/* ==========================================================================
   O Meu Tarot — tokens
   Uma só fonte de verdade para cor, tipografia, espaço, raios e movimento.
   Regra: um componente escolhe um PAPEL (--t-card-title), nunca um número.
   ========================================================================== */

:root {
  /* --- Paleta ------------------------------------------------------------
     Extraída do logótipo: azul-noite profundo + dourado, com off-white quente
     para leitura. Sem roxo, sem brilhos.                                   */
  --night-1000: #010918;  /* fundo exacto do logótipo — o hero usa este */
  --night-950: #050A14;
  --night-900: #0A1226;
  --night-800: #101B33;
  --night-700: #17253F;
  --night-600: #223350;   /* limites sobre escuro */

  --sea-700: #1B3A5C;
  --sea-500: #2E5A82;     /* azul da onda */

  --gold-300: #F0DEAC;
  --gold-400: #E0C079;    /* dourado principal sobre escuro — 10.6:1 no noite */
  --gold-500: #C6A05A;    /* filetes e limites dourados — 7.6:1 no noite */
  --gold-600: #9E7838;    /* só ornamento sobre claro: 3.75:1, não serve texto */
  --gold-700: #8A6526;    /* dourado de TEXTO sobre claro — 4.9:1 no off-white */

  --warm-50:  #FAF6EF;    /* fundo das secções claras */
  --warm-100: #F3ECE0;
  --warm-200: #E3D8C6;    /* limites sobre claro */

  --ink-900: #16191F;     /* texto sobre claro */
  --ink-700: #383D48;
  --ink-500: #585E6C;     /* texto secundário sobre claro */

  --paper:     #EDE8DC;   /* texto sobre escuro */
  --paper-dim: #B6B0A1;   /* texto secundário sobre escuro */

  /* --- Superfície corrente (trocada por [data-surface]) ------------------ */
  --bg: var(--night-900);
  --bg-soft: var(--night-800);
  --fg: var(--paper);
  --fg-dim: var(--paper-dim);
  --accent: var(--gold-400);
  --accent-quiet: var(--gold-500);
  --rule: color-mix(in srgb, var(--gold-500) 26%, transparent);
  --field-bg: rgba(255, 255, 255, 0.04);
  --field-border: var(--night-600);

  /* --- Tipografia -------------------------------------------------------- */
  --font-serif: "Cormorant Garamond", "Iowan Old Style", "Palatino Linotype",
                Palatino, "Book Antiqua", Georgia, serif;
  --font-sans: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Papéis — nunca usar valores soltos nos componentes */
  --t-hero:        clamp(2.75rem, 9vw, 5.25rem);
  --t-page-title:  clamp(2.125rem, 5.5vw, 3.5rem);
  --t-block-title: clamp(1.75rem, 3.8vw, 2.5rem);
  --t-sub-title:   clamp(1.1875rem, 2.2vw, 1.5rem);
  --t-card-title:  1.3125rem;
  --t-panel-title: 0.78125rem;  /* sobrescritas: eyebrow, colunas do footer */
  --t-quote:       clamp(1.375rem, 3vw, 2rem);
  --t-lead:        clamp(1.0625rem, 1.6vw, 1.25rem);
  --t-body:        1.0625rem;
  --t-small:       0.9375rem;
  --t-micro:       0.8125rem;

  --lh-tight: 1.12;
  --lh-title: 1.2;
  --lh-body: 1.72;
  --track-caps: 0.2em;

  /* --- Espaço ------------------------------------------------------------ */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;

  /* Muito espaço negativo: é o princípio de desenho número um do projecto. */
  --sec-y: clamp(4.5rem, 11vw, 9rem);
  --gutter: clamp(1.25rem, 5vw, 2.5rem);

  --wrap: 72rem;
  --wrap-mid: 56rem;
  --wrap-narrow: 38rem;  /* medida de leitura confortável (~68ch) */

  /* --- Controlos --------------------------------------------------------- */
  --ctl-md: 48px;
  --ctl-lg: 56px;

  /* --- Raios ------------------------------------------------------------- */
  --r-sm: 4px;
  --r-md: 10px;
  --r-lg: 18px;

  /* --- Movimento --------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 180ms;
  --dur: 320ms;
  --dur-slow: 700ms;

  --header-h: 68px;
}

@media (min-width: 62em) {
  :root { --header-h: 84px; }
}

/* --- Superfícies ---------------------------------------------------------
   Trocar as variáveis semânticas em vez de duplicar CSS de componentes.     */
[data-surface="night"] {
  --bg: var(--night-900);
  --bg-soft: var(--night-800);
  --fg: var(--paper);
  --fg-dim: var(--paper-dim);
  --accent: var(--gold-400);
  --accent-quiet: var(--gold-500);
  --rule: color-mix(in srgb, var(--gold-500) 26%, transparent);
  --field-bg: rgba(255, 255, 255, 0.04);
  --field-border: var(--night-600);
}

[data-surface="night-deep"] {
  --bg: var(--night-950);
  --bg-soft: var(--night-900);
  --fg: var(--paper);
  --fg-dim: var(--paper-dim);
  --accent: var(--gold-400);
  --accent-quiet: var(--gold-500);
  --rule: color-mix(in srgb, var(--gold-500) 26%, transparent);
  --field-bg: rgba(255, 255, 255, 0.04);
  --field-border: var(--night-700);
}

/* Sobre claro o acento tem de ser --gold-700: o --gold-600 dá 3.75:1 no
   off-white e falha o AA para texto normal (eyebrow, numeral da carta, links do
   prose). Medido, não estimado. */
[data-surface="paper"] {
  --bg: var(--warm-50);
  --bg-soft: var(--warm-100);
  --fg: var(--ink-900);
  --fg-dim: var(--ink-500);
  --accent: var(--gold-700);
  --accent-quiet: var(--gold-700);
  --rule: var(--warm-200);
  --field-bg: #fff;
  --field-border: var(--warm-200);
}