/* ==========================================================================
   PEGORETH & ROAS — DESIGN TOKENS
   Educação sobre Bitcoin, segurança digital e autocustódia.

   Camada 1 de 3.  tokens.css → base.css → components.css

   REGRA: nenhum valor bruto (hex, px de espaçamento, família de fonte)
   deve aparecer fora deste arquivo. Componentes consomem apenas tokens
   semânticos (--c-*, --t-*, --sp-*, --r-*, --sh-*).
   ========================================================================== */

:root {

  /* ---------------------------------------------------------------------
     1. PALETA PRIMITIVA  (referência bruta — não usar direto em componentes)
     Base aprovada pelo fundador, estendida em escala e ajustada para
     atingir contraste WCAG 2.2 AA. Ver DESIGN.md §4 para os ajustes.
     --------------------------------------------------------------------- */

  /* Navy — cor institucional. #14213D é a base aprovada (navy-700). */
  --p-navy-900: #0B1428;
  --p-navy-800: #0E1A33;
  --p-navy-700: #14213D;   /* APROVADA — Deep Navy */
  --p-navy-600: #26324F;
  --p-navy-500: #3B4763;
  --p-navy-400: #5A6580;
  --p-navy-300: #818BA2;   /* calibrado: 3.18:1 sobre sand-100 → passa WCAG 1.4.11 */
  --p-navy-200: #C3C8D3;
  --p-navy-100: #E4E7ED;

  /* Sand — fundo quente. #F7F7F2 é a base aprovada (sand-100). */
  --p-sand-100: #F7F7F2;   /* APROVADA — Warm White */
  --p-sand-200: #F1F0E8;
  --p-sand-300: #E7E5D9;
  --p-sand-400: #DAD7C8;
  --p-sand-500: #C4C0AD;

  /* Ember — laranja. #F7931A é a base aprovada (ember-500).
     ember-700/800 existem porque o laranja aprovado NÃO passa em
     contraste como texto sobre fundo claro. Ver DESIGN.md §4.2. */
  --p-ember-100: #FDF0DE;
  --p-ember-200: #FBDCB4;
  --p-ember-300: #F9C078;
  --p-ember-500: #F7931A;  /* APROVADA — Bitcoin Orange */
  --p-ember-600: #C87409;
  --p-ember-700: #9A5A06;
  --p-ember-800: #6E4004;

  /* Charcoal — neutro puro. #252525 é a base aprovada. */
  --p-char-900: #151515;
  --p-char-800: #252525;   /* APROVADA — Charcoal */
  --p-char-600: #4A4A4A;
  --p-char-400: #7C7C7C;

  --p-white: #FFFFFF;

  /* Semânticas de estado — dessaturadas para conviver com a paleta */
  --p-green-600: #1F6B48;
  --p-green-100: #E3F0E9;
  --p-amber-700: #8A5A00;
  --p-amber-100: #FBEFD5;
  --p-red-700:   #96231F;
  --p-red-100:   #F8E4E3;
  --p-blue-700:  #1B527A;
  --p-blue-100:  #E2EDF5;


  /* ---------------------------------------------------------------------
     2. COR SEMÂNTICA  (esta é a camada que os componentes consomem)
     --------------------------------------------------------------------- */

  /* Superfícies */
  --c-background-primary:    var(--p-sand-100);
  --c-background-secondary:  var(--p-sand-200);
  --c-background-inverse:    var(--p-navy-700);
  --c-surface:               var(--p-white);
  --c-surface-sunken:        var(--p-sand-300);
  --c-surface-elevated:      var(--p-white);
  --c-surface-inverse:       var(--p-navy-800);
  --c-surface-accent-soft:   var(--p-ember-100);

  /* Texto */
  --c-text-primary:      var(--p-navy-700);
  --c-text-secondary:    var(--p-navy-500);
  --c-text-muted:        var(--p-navy-400);
  --c-text-inverse:      var(--p-sand-100);
  --c-text-inverse-muted:var(--p-navy-200);
  --c-text-accent:       var(--p-ember-700);  /* 5.09:1 — único laranja válido como texto corrido sobre claro */
  --c-text-accent-large: var(--p-ember-600);  /* 3.28:1 — SOMENTE texto grande (>=24px, ou >=18.66px bold) */
  --c-text-on-accent:    var(--p-navy-900);   /* 7.99:1 — texto sobre superfície laranja */

  /* ⚠️ REGRA DE COR NÃO NEGOCIÁVEL
     --p-ember-500 (#F7931A, o laranja aprovado) tem 2.14:1 sobre o fundo claro.
     NUNCA use ember-500 como cor de texto sobre fundo claro. Ele existe para:
     superfícies, réguas, ícones decorativos e texto sobre fundo escuro.
     Para laranja em texto sobre claro use --c-text-accent. */

  /* Ação */
  --c-action-primary:          var(--p-navy-700);
  --c-action-primary-hover:    var(--p-navy-800);
  --c-action-primary-active:   var(--p-navy-900);
  --c-action-primary-text:     var(--p-sand-100);
  --c-action-secondary-border: var(--p-navy-300);
  --c-action-secondary-hover:  var(--p-sand-200);
  --c-action-accent:           var(--p-ember-500);
  --c-action-accent-hover:     var(--p-ember-600);
  --c-action-disabled:         var(--p-sand-400);
  --c-action-disabled-text:    var(--p-navy-300);

  /* Bordas e traços */
  --c-border-default: var(--p-sand-400);
  --c-border-subtle:  var(--p-sand-300);
  --c-border-strong:  var(--p-navy-300);
  --c-border-inverse: rgba(247, 247, 242, 0.18);
  /* A régua curta laranja é a assinatura gráfica da marca. É puramente
     DECORATIVA e por isso isenta de WCAG 1.4.11 (2.14:1 sobre claro).
     Condição: nunca pode ser o único meio de transmitir uma informação. */
  --c-rule-accent:    var(--p-ember-500);

  /* Foco — visível em fundo claro e escuro */
  --c-scrim:            rgba(11, 20, 40, 0.55);   /* fundo de modal */
  --c-focus-ring:       var(--p-ember-600);
  --c-focus-ring-inverse: var(--p-ember-300);

  /* Estados */
  --c-success:      var(--p-green-600);
  --c-success-bg:   var(--p-green-100);
  --c-warning:      var(--p-amber-700);
  --c-warning-bg:   var(--p-amber-100);
  --c-error:        var(--p-red-700);
  --c-error-bg:     var(--p-red-100);
  --c-info:         var(--p-blue-700);
  --c-info-bg:      var(--p-blue-100);


  /* ---------------------------------------------------------------------
     3. TIPOGRAFIA
     Serif   — Fraunces      (SIL OFL) títulos editoriais e institucionais
     Sans    — Inter         (SIL OFL) interface, corpo, botões, formulários
     Mono    — IBM Plex Mono (SIL OFL) eyebrows, rótulos, dados, seeds
     Todas licenciadas para uso comercial. Ver DESIGN.md §4.3.
     --------------------------------------------------------------------- */

  --f-serif: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --f-sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --f-mono:  "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Escala fluida — clamp(min, preferido, max). Sem media query. */
  --t-display-size:     clamp(2.75rem, 1.6rem + 5.2vw, 5.75rem);
  --t-display-lh:       0.98;
  --t-display-ls:       -0.03em;
  --t-display-weight:   300;

  --t-h1-size:          clamp(2.25rem, 1.5rem + 3.2vw, 4rem);
  --t-h1-lh:            1.04;
  --t-h1-ls:            -0.025em;
  --t-h1-weight:        300;

  --t-h2-size:          clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
  --t-h2-lh:            1.12;
  --t-h2-ls:            -0.02em;
  --t-h2-weight:        400;

  --t-h3-size:          clamp(1.3rem, 1.1rem + 0.9vw, 1.75rem);
  --t-h3-lh:            1.2;
  --t-h3-ls:            -0.01em;
  --t-h3-weight:        500;

  --t-h4-size:          clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
  --t-h4-lh:            1.3;
  --t-h4-ls:            0;
  --t-h4-weight:        600;

  --t-body-lg-size:     clamp(1.0625rem, 1rem + 0.45vw, 1.3125rem);
  --t-body-lg-lh:       1.6;

  --t-body-size:        1rem;
  --t-body-lh:          1.7;

  --t-body-sm-size:     0.9375rem;
  --t-body-sm-lh:       1.6;

  --t-caption-size:     0.8125rem;
  --t-caption-lh:       1.5;

  --t-eyebrow-size:     0.75rem;
  --t-eyebrow-lh:       1.4;
  --t-eyebrow-ls:       0.18em;
  --t-eyebrow-weight:   500;

  --t-button-size:      0.9375rem;
  --t-button-weight:    600;
  --t-button-ls:        0.01em;

  --t-label-size:       0.8125rem;
  --t-label-weight:     600;
  --t-label-ls:         0.02em;

  --t-quote-size:       clamp(1.25rem, 1rem + 1.1vw, 1.75rem);
  --t-quote-lh:         1.45;

  --t-code-size:        0.875rem;
  --t-code-lh:          1.6;


  /* ---------------------------------------------------------------------
     4. ESPAÇAMENTO — escala de 4px
     --------------------------------------------------------------------- */

  --sp-0:   0;
  --sp-1:   0.25rem;   /*  4 */
  --sp-2:   0.5rem;    /*  8 */
  --sp-3:   0.75rem;   /* 12 */
  --sp-4:   1rem;      /* 16 */
  --sp-5:   1.5rem;    /* 24 */
  --sp-6:   2rem;      /* 32 */
  --sp-7:   2.5rem;    /* 40 */
  --sp-8:   3rem;      /* 48 */
  --sp-9:   4rem;      /* 64 */
  --sp-10:  5rem;      /* 80 */
  --sp-11:  6.5rem;    /* 104 */
  --sp-12:  8rem;      /* 128 */

  /* Ritmo vertical entre seções — fluido */
  --sp-section:       clamp(3.5rem, 2rem + 7vw, 8rem);
  --sp-section-tight: clamp(2.5rem, 1.5rem + 4vw, 5rem);


  /* ---------------------------------------------------------------------
     5. LAYOUT
     --------------------------------------------------------------------- */

  --layout-max:        1320px;   /* largura máxima do container */
  --layout-text-max:   68ch;     /* medida de leitura confortável */
  --layout-gutter:     clamp(1.25rem, 0.75rem + 2.2vw, 3rem);
  --layout-grid-gap:   clamp(1rem, 0.5rem + 1.6vw, 2rem);

  /* Breakpoints — documentados aqui, usados nas media queries.
     CSS não permite var() em @media; manter sincronizado à mão. */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1600px;


  /* ---------------------------------------------------------------------
     6. RAIOS
     Marca editorial: raios discretos. Nada arredondado demais.
     --------------------------------------------------------------------- */

  --r-none: 0;
  --r-xs:   2px;
  --r-sm:   4px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-xl:   20px;
  --r-pill: 999px;
  --r-card: var(--r-md);


  /* ---------------------------------------------------------------------
     7. SOMBRAS
     Usadas com parcimônia. A hierarquia vem de cor e espaço, não de sombra.
     --------------------------------------------------------------------- */

  --sh-none: none;
  --sh-xs:   0 1px 2px rgba(20, 33, 61, 0.05);
  --sh-sm:   0 2px 6px rgba(20, 33, 61, 0.06);
  --sh-md:   0 8px 24px rgba(20, 33, 61, 0.08);
  --sh-lg:   0 20px 48px rgba(20, 33, 61, 0.12);
  --sh-focus: 0 0 0 3px rgba(200, 116, 9, 0.35);


  /* ---------------------------------------------------------------------
     8. MOVIMENTO
     --------------------------------------------------------------------- */

  --mo-fast:   120ms;
  --mo-base:   200ms;
  --mo-slow:   360ms;
  --mo-ease:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --mo-ease-out: cubic-bezier(0.16, 1, 0.3, 1);


  /* ---------------------------------------------------------------------
     9. OUTROS
     --------------------------------------------------------------------- */

  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-overlay: 300;
  --z-modal: 400;
  --z-toast: 500;

  /* Impressão — tinta pura, independente do tema */
  --c-print-bg: #FFFFFF;
  --c-print-fg: #000000;

  --tap-min: 44px;   /* alvo de toque mínimo */
  --rule-w: 2px;     /* espessura da régua da marca */
  --rule-len: 40px;  /* comprimento da régua da marca */
}


/* ==========================================================================
   TEMA ESCURO
   O tema claro é a direção aprovada. O escuro existe como alternativa
   funcional e só é aplicado quando o usuário opta explicitamente
   (data-theme="dark"), nunca automaticamente por prefers-color-scheme,
   para não contrariar a direção visual aprovada.
   ========================================================================== */

:root[data-theme="dark"] {
  --c-background-primary:    var(--p-navy-900);
  --c-background-secondary:  var(--p-navy-800);
  --c-background-inverse:    var(--p-sand-100);
  --c-surface:               var(--p-navy-800);
  --c-surface-sunken:        #08101F;
  --c-surface-elevated:      var(--p-navy-600);
  --c-surface-inverse:       var(--p-sand-100);
  --c-surface-accent-soft:   rgba(247, 147, 26, 0.12);

  --c-text-primary:       var(--p-sand-100);
  --c-text-secondary:     var(--p-navy-200);
  --c-text-muted:         var(--p-navy-300);
  --c-text-inverse:       var(--p-navy-700);
  --c-text-inverse-muted: var(--p-navy-500);
  --c-text-accent:        var(--p-ember-300);
  --c-text-on-accent:     var(--p-navy-900);

  --c-action-primary:        var(--p-sand-100);
  --c-action-primary-hover:  var(--p-white);
  --c-action-primary-active: var(--p-sand-300);
  --c-action-primary-text:   var(--p-navy-900);
  --c-action-secondary-border: var(--p-navy-500);
  --c-action-secondary-hover:  var(--p-navy-700);
  --c-action-disabled:       var(--p-navy-600);
  --c-action-disabled-text:  var(--p-navy-400);

  --c-border-default: rgba(247, 247, 242, 0.16);
  --c-border-subtle:  rgba(247, 247, 242, 0.09);
  --c-border-strong:  rgba(247, 247, 242, 0.32);
  --c-border-inverse: var(--p-navy-300);

  --c-focus-ring: var(--p-ember-300);

  --c-success-bg: rgba(31, 107, 72, 0.18);
  --c-warning-bg: rgba(138, 90, 0, 0.20);
  --c-error-bg:   rgba(150, 35, 31, 0.20);
  --c-info-bg:    rgba(27, 82, 122, 0.20);
  --c-success: #6FCF97;
  --c-warning: #E3B341;
  --c-error:   #EE7C78;
  --c-info:    #7FB6DD;

  --sh-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-sm: 0 2px 6px rgba(0, 0, 0, 0.45);
  --sh-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --sh-lg: 0 20px 48px rgba(0, 0, 0, 0.55);
}