/* ==========================================================================
   Enfoque Contable — Design tokens
   Single accent (teal) locked across light + dark. One radius system (soft).
   ========================================================================== */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url("../fonts/PlusJakartaSans-Variable.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122;
}

:root {
  /* ---- Brand teal ramp (calibrated to the original site's watercolor teal) ---- */
  --teal-950: #0e2724;
  --teal-900: #143631;
  --teal-800: #1c4841;
  --teal-700: #24594f;
  --teal-600: #2c6d64;
  --teal-500: #3a8378;
  --teal-400: #5c9c8f;
  --teal-300: #92c0b4;
  --teal-200: #bcdad0;
  --teal-100: #dcecE6;
  --teal-50: #f2f8f6;

  /* ---- Nav is always solid brand teal, independent of light/dark theme ---- */
  --nav-bg: var(--teal-600);
  --nav-text: #ffffff;
  --nav-text-soft: rgba(255, 255, 255, 0.82);

  /* ---- Neutrals (warm, never pure black/white) ---- */
  --ink: #142320;
  --ink-soft: #4c5c58;
  --ink-faint: #7c8b87;
  --paper: #fbfaf7;
  --paper-sunk: #f2f1ec;
  --line: #dfe3df;
  --line-strong: #c7cdc8;
  --white: #ffffff;

  /* ---- Semantic ---- */
  --bg: var(--paper);
  --bg-sunk: var(--paper-sunk);
  --surface: var(--white);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-faint: var(--ink-faint);
  --border: var(--line);
  --accent: var(--teal-600);
  --accent-strong: var(--teal-700);
  --accent-soft: var(--teal-100);
  --on-accent: var(--white);
  --focus-ring: var(--teal-500);

  /* ---- Radius (soft system, locked) ---- */
  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 24px;
  --r-pill: 999px;

  /* ---- Shadows (tinted to brand, never pure black) ---- */
  --shadow-sm: 0 1px 2px rgba(10, 33, 30, 0.06), 0 1px 1px rgba(10, 33, 30, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(10, 33, 30, 0.18);
  --shadow-lg: 0 24px 60px -16px rgba(10, 33, 30, 0.28);

  /* ---- Type ---- */
  --font: "Plus Jakarta Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.4s;
  --dur-slow: 0.7s;

  /* ---- Layout ---- */
  --container: 1280px;
  --container-narrow: 860px;
  --nav-h: 76px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1917;
    --bg-sunk: #0a1412;
    --surface: #122320;
    --text: #f2f6f4;
    --text-soft: #b9c7c2;
    --text-faint: #7f948e;
    --border: #1f342f;
    --accent: var(--teal-400);
    --accent-strong: var(--teal-300);
    --accent-soft: #16332c;
    --on-accent: #0a211e;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 24px 60px -16px rgba(0, 0, 0, 0.6);
  }
}

:root[data-theme="dark"] {
  --bg: #0d1917;
  --bg-sunk: #0a1412;
  --surface: #122320;
  --text: #f2f6f4;
  --text-soft: #b9c7c2;
  --text-faint: #7f948e;
  --border: #1f342f;
  --accent: var(--teal-400);
  --accent-strong: var(--teal-300);
  --accent-soft: #16332c;
  --on-accent: #0a211e;
}

:root[data-theme="light"] {
  --bg: var(--paper);
  --bg-sunk: var(--paper-sunk);
  --surface: var(--white);
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-faint: var(--ink-faint);
  --border: var(--line);
  --accent: var(--teal-600);
  --accent-strong: var(--teal-700);
  --accent-soft: var(--teal-100);
  --on-accent: var(--white);
}