/* ==========================================================================
   EMCASH ACADEMY — Design System · tokens
   Conceito: "Casa da Moeda" — conhecimento cunhado e posto em circulação.
   Proporção cromática 60 / 30 / 10:
     60%  COFRE  (teal)    superfícies institucionais, navegação, acesso
     30%  COBRE  (laranja) ação, progresso, foco de leitura
     10%  LATÃO  (ouro)    filetes, selos, cunhagem, certificados
   Neutros (PAPEL / GRAFITE) são suporte e não entram na proporção.
   ========================================================================== */

:root {
  color-scheme: light;

  /* ---- Rampa COFRE (teal) ---- */
  --cofre-950: #04211d;
  --cofre-900: #062b26;
  --cofre-850: #07332c;
  --cofre-800: #0a3b34;
  --cofre-700: #0e4c43;
  --cofre-600: #115e52;
  --cofre-500: #17786a;
  --cofre-400: #2e9585;
  --cofre-300: #62b5a7;
  --cofre-200: #a2d3ca;
  --cofre-100: #d6eae5;
  --cofre-050: #eef6f4;

  /* ---- Rampa COBRE (laranja) ---- */
  --cobre-800: #6f2c0d;
  --cobre-700: #8f3b12;
  --cobre-600: #b14a18;
  --cobre-500: #d2601f;
  --cobre-400: #e97b36;
  --cobre-300: #f09c68;
  --cobre-200: #f8c7a5;
  --cobre-100: #fce7d8;

  /* ---- Rampa LATÃO (metal) ---- */
  --latao-700: #6d5410;
  --latao-600: #8a6b15;
  --latao-500: #b08a1e;
  --latao-400: #c9a227;
  --latao-300: #dcc069;
  --latao-200: #efe0ae;

  /* ---- Neutros: PAPEL (claro) e GRAFITE (escuro), com viés de teal ---- */
  --papel-000: #ffffff;
  --papel-050: #f7faf8;
  --papel-100: #f1f5f3;
  --papel-200: #e6ece9;
  --papel-300: #d4ddd8;
  --papel-400: #b6c3bd;
  --grafite-400: #7c8c86;
  --grafite-500: #5d6d67;
  --grafite-600: #45534e;
  --grafite-700: #2f3a36;
  --grafite-800: #1e2724;
  --grafite-900: #131a18;
  --grafite-950: #0b1210;

  /* ---- Semântica de estado (reservada — nunca usada como acento) ---- */
  --st-ok: #157f3e;
  --st-ok-ink: #0d5a2b;
  --st-ok-wash: #e4f2e8;
  --st-atencao: #c2870a;
  --st-atencao-ink: #7d5604;
  --st-atencao-wash: #fbf1da;
  --st-critico: #b4231f;
  --st-critico-ink: #8d1a17;
  --st-critico-wash: #fbe6e5;

  /* ---- Papéis semânticos (o que o CSS de componente usa) ---- */
  --bg: var(--papel-100);
  --bg-plane: var(--papel-200);
  --surface: var(--papel-000);
  --surface-2: var(--papel-050);
  --surface-3: var(--papel-100);
  --surface-inset: var(--papel-100);

  --ink: #101a17;
  --ink-2: var(--grafite-600);
  --ink-3: var(--grafite-500);
  --ink-muted: var(--grafite-400);
  --ink-on-dark: #eaf2ef;

  --rule: var(--papel-300);
  --rule-soft: var(--papel-200);
  --rule-strong: var(--papel-400);
  --rule-brass: rgba(176, 138, 30, .55);

  --accent: var(--cofre-600);          /* 60% — institucional */
  --accent-ink: var(--cofre-800);
  --accent-wash: var(--cofre-050);
  --accent-line: var(--cofre-200);

  --action: var(--cobre-600);          /* 30% — ação */
  --action-hover: var(--cobre-700);
  --action-ink: var(--cobre-700);
  --action-wash: var(--cobre-100);
  --action-line: var(--cobre-200);
  --on-action: #fffaf6;

  --metal: var(--latao-500);           /* 10% — cunhagem */
  --metal-bright: var(--latao-400);
  --metal-ink: var(--latao-700);

  /* ---- Superfícies "cofre" (sempre escuras, em qualquer tema) ---- */
  --vault-bg: #05231f;
  --vault-bg-2: #072e28;
  --vault-ink: #e7f1ee;
  --vault-ink-2: #9dbdb5;
  --vault-rule: rgba(162, 211, 202, .16);

  /* ---- Tipografia ---- */
  --font-display: "Newsreader", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-sans: "Libre Franklin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --t-display-1: clamp(2.35rem, 1.75rem + 2.4vw, 3.75rem);
  --t-display-2: clamp(1.75rem, 1.45rem + 1.2vw, 2.4rem);
  --t-h1: clamp(1.45rem, 1.3rem + .5vw, 1.75rem);
  --t-h2: 1.22rem;
  --t-h3: 1.02rem;
  --t-body: .95rem;
  --t-sm: .865rem;
  --t-xs: .785rem;
  --t-label: .705rem;

  --lh-tight: 1.12;
  --lh-snug: 1.3;
  --lh-body: 1.6;
  --track-label: .145em;
  --track-caps: .06em;

  /* ---- Escala de espaço ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 20px;
  --s-6: 24px; --s-7: 32px; --s-8: 40px; --s-9: 56px; --s-10: 72px; --s-11: 96px;

  /* ---- Raios (institucional: contidos, nunca "pill everywhere") ---- */
  --r-1: 2px; --r-2: 4px; --r-3: 6px; --r-4: 10px; --r-5: 14px; --r-round: 999px;

  /* ---- Elevação (tint de teal, nunca cinza puro) ---- */
  --sh-1: 0 1px 1px rgba(6, 43, 38, .05);
  --sh-2: 0 1px 2px rgba(6, 43, 38, .06), 0 6px 16px -10px rgba(6, 43, 38, .18);
  --sh-3: 0 2px 4px rgba(6, 43, 38, .07), 0 18px 40px -18px rgba(6, 43, 38, .28);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .6);

  /* ---- Movimento ---- */
  --ease-out: cubic-bezier(.16, .84, .44, 1);
  --ease-in-out: cubic-bezier(.65, .05, .36, 1);
  --ease-stamp: cubic-bezier(.2, 1.5, .4, 1);
  --dur-1: 120ms; --dur-2: 220ms; --dur-3: 380ms; --dur-4: 620ms;

  --shell-nav: 264px;
  --shell-top: 68px;
  --measure: 68ch;
}

/* ==========================  TEMA ESCURO  ============================== */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg: var(--grafite-950);
    --bg-plane: #070d0c;
    --surface: #101917;
    --surface-2: #16211e;
    --surface-3: #1b2723;
    --surface-inset: #0d1614;

    --ink: #e8efec;
    --ink-2: #b3c2bc;
    --ink-3: #93a59e;
    --ink-muted: #77887f;
    --ink-on-dark: #eaf2ef;

    --rule: #26332e;
    --rule-soft: #1c2724;
    --rule-strong: #36453f;
    --rule-brass: rgba(220, 192, 105, .38);

    --accent: var(--cofre-300);
    --accent-ink: var(--cofre-200);
    --accent-wash: #0f2b27;
    --accent-line: #1d3f39;

    --action: var(--cobre-400);
    --action-hover: var(--cobre-300);
    --action-ink: var(--cobre-300);
    --action-wash: #33180c;
    --action-line: #4d2413;
    --on-action: #200c03;

    --metal: var(--latao-300);
    --metal-bright: var(--latao-200);
    --metal-ink: var(--latao-200);

    --st-ok-ink: #4ec27b;
    --st-ok-wash: #10281a;
    --st-atencao-ink: #e5bb5e;
    --st-atencao-wash: #2c2210;
    --st-critico-ink: #f18b86;
    --st-critico-wash: #2e1413;

    --sh-1: 0 1px 1px rgba(0, 0, 0, .4);
    --sh-2: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 20px -12px rgba(0, 0, 0, .7);
    --sh-3: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 48px -20px rgba(0, 0, 0, .8);
    --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .04);
  }
}

:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: var(--grafite-950);
  --bg-plane: #070d0c;
  --surface: #101917;
  --surface-2: #16211e;
  --surface-3: #1b2723;
  --surface-inset: #0d1614;

  --ink: #e8efec;
  --ink-2: #b3c2bc;
  --ink-3: #93a59e;
  --ink-muted: #77887f;
  --ink-on-dark: #eaf2ef;

  --rule: #26332e;
  --rule-soft: #1c2724;
  --rule-strong: #36453f;
  --rule-brass: rgba(220, 192, 105, .38);

  --accent: var(--cofre-300);
  --accent-ink: var(--cofre-200);
  --accent-wash: #0f2b27;
  --accent-line: #1d3f39;

  --action: var(--cobre-400);
  --action-hover: var(--cobre-300);
  --action-ink: var(--cobre-300);
  --action-wash: #33180c;
  --action-line: #4d2413;
  --on-action: #200c03;

  --metal: var(--latao-300);
  --metal-bright: var(--latao-200);
  --metal-ink: var(--latao-200);

  --st-ok-ink: #4ec27b;
  --st-ok-wash: #10281a;
  --st-atencao-ink: #e5bb5e;
  --st-atencao-wash: #2c2210;
  --st-critico-ink: #f18b86;
  --st-critico-wash: #2e1413;

  --sh-1: 0 1px 1px rgba(0, 0, 0, .4);
  --sh-2: 0 1px 2px rgba(0, 0, 0, .45), 0 8px 20px -12px rgba(0, 0, 0, .7);
  --sh-3: 0 2px 6px rgba(0, 0, 0, .5), 0 24px 48px -20px rgba(0, 0, 0, .8);
  --sh-inset: inset 0 1px 0 rgba(255, 255, 255, .04);
}