/* ============================================================================
   JCC — Design Tokens
   Padrão @rojao/ds (arquitetura de 3 camadas: primitivos → semânticos → componente)

   Gerado para consumo direto em CSS, sem build de JS/Tailwind.
   No @rojao/ds este arquivo equivaleria a:
     tokens/index.ts  →  styles/_primitives.generated.css  +  styles/base.css
     styles/themes/jcc.css (camada de marca)

   REGRAS (as mesmas do DS):
   - Componente NUNCA consome primitivo direto. Sempre via token semântico.
   - Token semântico é nomeado pelo SIGNIFICADO, não pelo valor.
     (--brand-primary, não --color-green)
   - Estados "soft" via color-mix, nunca hex hardcoded.
   - Dark mode via classe .dark trocando o valor da var — sem seletor por
     componente e sem prefixo `dark:`.
   ========================================================================= */

/* ============================================================================
   CAMADA 1 — PRIMITIVOS
   Valores brutos, sem semântica. Estáveis: raramente mudam.
   Não usar diretamente em componentes.
   ========================================================================= */

:root {
  /* ── Paleta: green (verde militar — marca primária) ───────────────────── */
  --green-50:  #f2f6ee;
  --green-100: #eef2e9;
  --green-200: #d5e0c8;
  --green-300: #b3c79f;
  --green-400: #8aa870;
  --green-500: #5f8442;
  --green-600: #416a28;
  --green-700: #2d5016;   /* ← cor da marca */
  --green-800: #234011;
  --green-900: #1e3a0e;

  /* ── Paleta: gold (dourado do selo — marca secundária/acento) ─────────── */
  --gold-50:  #fbf7ea;
  --gold-100: #f3e9c9;
  --gold-200: #ddc172;    /* acento escrito sobre verde da marca */
  --gold-300: #eccf74;    /* acento escrito sobre foto escura (badge do hero) */
  --gold-400: #dcbc5e;    /* hover do preenchimento dourado */
  --gold-500: #c8a84b;    /* ← cor da marca */
  --gold-600: #b6963c;
  --gold-700: #a8872e;
  --gold-800: #876c25;
  --gold-900: #6e5818;

  /* ── Paleta: mud (barro/terra — apoio, trilha) ────────────────────────── */
  --mud-100: #e8ddd0;
  --mud-200: #b9a988;    /* borda tracejada de slot de imagem */
  --mud-300: #b99b76;
  --mud-500: #8a6539;
  --mud-600: #7a6320;    /* rótulo da trilha leve */
  --mud-700: #6b4c2a;
  --mud-900: #4a341c;

  /* ── Paleta: cream (superfícies quentes) ──────────────────────────────── */
  --cream-50:  #fdfbf7;
  --cream-100: #f9f7f3;
  --cream-200: #f4f1ec;   /* ← fundo de página */
  --cream-300: #e7e3da;

  /* ── Paleta: sand (neutros quentes) ───────────────────────────────────────
     Escala trazida da proposta de direção (design doc, 07/2026). Convive com
     `neutral` sem substituí-la: `neutral` é o cinza frio herdado do Bootstrap,
     `sand` é o neutro amadeirado que casa com o creme e o barro. Use `sand`
     em superfície e texto de página; `neutral` só onde o framework exigir.

     Contraste verificado sobre --sand-900 (#100f0c):
       sand-500  5,19:1   ok para texto normal
       sand-400  6,98:1   ok
       sand-300  9,77:1   ok
     Sobre --cream-200 (#f4f1ec):
       sand-700  6,88:1   ok
       sand-800 10,45:1   ok
     ---------------------------------------------------------------------- */
  --sand-50:  #efe9df;
  --sand-100: #e2dbcf;
  --sand-200: #cdc5b6;
  --sand-300: #c2b8a6;
  --sand-400: #a49b8c;
  --sand-450: #9a9284;   /* apoio da marca na barra escura */
  --sand-500: #8c8477;
  --sand-600: #6f675c;   /* interpolado — único tom sem origem no documento */
  --sand-700: #5b5145;
  --sand-800: #3d372e;
  --sand-900: #100f0c;

  /* ── Paleta: neutral (texto, bordas, cinzas) ──────────────────────────── */
  --neutral-0:   #ffffff;
  --neutral-50:  #f7f7f6;
  --neutral-100: #ececea;
  --neutral-200: #d6d1c6;
  --neutral-300: #bdb9b1;
  --neutral-400: #a9a9a9;
  --neutral-500: #8a8681;
  --neutral-600: #6b6b6b;
  --neutral-700: #5f5f5f;
  --neutral-800: #2b2b2b;
  --neutral-900: #1a1a1a;

  /* ── Paleta: feedback (status) ────────────────────────────────────────── */
  --red-500:    #c0392b;
  --red-700:    #b3261e;
  --red-900:    #7d1a15;
  --emerald-300:#8fd07f;   /* sinal de "está acontecendo" sobre fundo escuro */
  --emerald-500:#2f8f4e;
  --emerald-700:#1e7a3c;
  --emerald-900:#14532d;
  --amber-500:  #c8901f;
  --amber-700:  #8a6d1f;
  --amber-900:  #5c4712;
  --azure-500:  #2a7ba3;
  --azure-700:  #1f5673;
  --azure-900:  #143a4d;

  /* ── Triplets RGB ─────────────────────────────────────────────────────────
     CSS não extrai canais de um hex guardado em var(). Frameworks que compõem
     alpha dinamicamente (Bootstrap: `rgba(var(--bs-primary-rgb), .25)`) exigem
     o valor em canais. Mantidos aqui, junto do hex de origem, para não haver
     cor literal na camada de ponte.
     ---------------------------------------------------------------------- */
  --green-700-rgb:   45, 80, 22;
  --green-900-rgb:   30, 58, 14;
  --gold-500-rgb:    200, 168, 75;
  --gold-700-rgb:    168, 135, 46;
  --mud-700-rgb:     107, 76, 42;
  --cream-200-rgb:   244, 241, 236;
  --cream-300-rgb:   231, 227, 218;
  --neutral-0-rgb:   255, 255, 255;
  --neutral-600-rgb: 107, 107, 107;
  --neutral-900-rgb: 26, 26, 26;
  --red-700-rgb:     179, 38, 30;
  --emerald-700-rgb: 30, 122, 60;
  --amber-500-rgb:   200, 144, 31;
  --azure-500-rgb:   42, 123, 163;
  --text-primary-rgb: 34, 34, 34;

  /* ── Alphas ───────────────────────────────────────────────────────────── */
  --black-alpha-50:  #0000000d;
  --black-alpha-100: #0000001a;
  --black-alpha-200: #00000033;
  --black-alpha-400: #00000066;
  --black-alpha-600: #00000099;
  --black-alpha-900: #000000e6;
  --white-alpha-50:  #ffffff0d;
  --white-alpha-100: #ffffff1a;
  --white-alpha-200: #ffffff33;
  --white-alpha-400: #ffffff66;
  --white-alpha-600: #ffffff99;
  --white-alpha-900: #ffffffe6;

  /* ── Escala: espaçamento (px, escala do DS) ───────────────────────────── */
  --space-1:  1px;
  --space-2:  2px;
  --space-4:  4px;
  --space-8:  8px;
  --space-12: 12px;
  --space-16: 16px;
  --space-20: 20px;
  --space-24: 24px;
  --space-32: 32px;
  --space-40: 40px;
  --space-48: 48px;
  --space-56: 56px;
  --space-64: 64px;
  --space-80: 80px;
  --space-96: 96px;

  /* ── Escala: raio ─────────────────────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-full: 9999px;

  /* ── Escala: motion ───────────────────────────────────────────────────── */
  --motion-fast: 100ms;
  --motion-base: 150ms;
  --motion-slow: 300ms;
  --motion-ease: cubic-bezier(.2, .7, .3, 1);

  /* ── Escala: tipografia ───────────────────────────────────────────────── */
  --font-size-xs:   12px;
  --font-size-sm:   14px;
  --font-size-base: 16px;
  --font-size-lg:   18px;
  --font-size-xl:   20px;
  --font-size-2xl:  24px;
  --font-size-3xl:  30px;
  --font-size-4xl:  36px;
  /* 48 e 64 entram só para display de hero — o corpo continua parando em 36. */
  --font-size-5xl:  48px;
  --font-size-6xl:  64px;

  --line-height-xs:   16px;
  --line-height-sm:   20px;
  --line-height-base: 24px;
  --line-height-lg:   28px;
  --line-height-xl:   32px;
  --line-height-2xl:  40px;

  --font-weight-regular:  400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;

  --font-family-display: "Oswald", "Segoe UI", system-ui, sans-serif;
  /* Fat face de cartaz, só para títulos grandes — ver jcc-cartaz.css. */
  --font-family-cartaz:  "Gravitas One", "Bookman Old Style", Georgia, serif;
  --font-family-body:    "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-family-mono:    ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── Escala: controles (altura e padding de campos/botões) ────────────── */
  --space-control-height-sm: 32px;
  --space-control-height-md: 40px;
  --space-control-height-lg: 48px;

  --space-control-padding-x-sm: 12px;
  --space-control-padding-x-md: 16px;
  --space-control-padding-x-lg: 20px;

  --space-control-padding-y-sm: 4px;
  --space-control-padding-y-md: 8px;
  --space-control-padding-y-lg: 12px;
}

/* ============================================================================
   CAMADA 2 — SEMÂNTICOS
   Significado aplicado. É ESTA camada que os componentes consomem.
   Nomes idênticos aos do @rojao/ds/styles/base.css — portável entre projetos.
   ========================================================================= */

:root {
  /* ── Brand ────────────────────────────────────────────────────────────── */
  --brand-primary:      var(--green-700);
  --brand-hover:        var(--green-900);
  --brand-on-primary:   var(--neutral-0);
  --brand-secondary:    var(--gold-500);
  --brand-on-secondary: var(--neutral-900);   /* dourado pede texto escuro (AA) */
  --brand-accent:       var(--gold-500);
  --brand-accent-light: var(--gold-100);

  /* ATENÇÃO — o dourado sobre creme dá 2,04:1 e reprova em WCAG AA, inclusive
     para texto grande. Ele serve como PREENCHIMENTO (botão, badge, filete) com
     texto escuro por cima (tinta sobre dourado = 7,59:1), ou como TEXTO sobre
     fundo escuro (8,36:1 sobre --sand-900). Nunca como texto sobre claro.
     Para acento escrito em fundo claro, use --gold-900 ou --brand-primary. */
  --accent-on-light:    var(--gold-900);   /* acento escrito sobre creme */
  --accent-on-brand:    var(--gold-200);   /* acento escrito sobre o verde */
  --accent-on-photo:    var(--gold-300);   /* acento escrito sobre foto escura */
  --accent-hover:       var(--gold-400);   /* hover do preenchimento dourado */
  --status-vivo:        var(--emerald-300);/* ponto de "acontecendo agora" */

  --brand-primary-rgb:   var(--green-700-rgb);
  --brand-hover-rgb:     var(--green-900-rgb);
  --brand-secondary-rgb: var(--gold-500-rgb);
  --brand-accent-rgb:    var(--gold-500-rgb);

  /* ── Surface ──────────────────────────────────────────────────────────── */
  --surface-page:    var(--cream-200);
  --surface-default: var(--neutral-0);
  --surface-raised:  var(--cream-100);
  --surface-overlay: var(--neutral-900);

  /* ── Border ───────────────────────────────────────────────────────────── */
  /* Direção adotada 07/2026: borda e texto secundário passam para a escala
     quente `sand`, no lugar do cinza frio. Muda o site inteiro de uma vez. */
  --border-subtle:  var(--sand-100);
  --border-default: var(--neutral-400);
  --border-strong:  var(--neutral-800);
  --border-focus:   var(--gold-700);

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --text-primary:     var(--neutral-900);
  --text-secondary:   var(--sand-700);
  --text-muted:       var(--sand-600);
  --text-disabled:    var(--neutral-400);
  --text-inverse:     var(--white-alpha-900);
  --text-placeholder: var(--neutral-500);

  /* ── Feedback ─────────────────────────────────────────────────────────── */
  --danger:        var(--red-700);
  --danger-soft:   color-mix(in srgb, var(--danger) 8%, transparent);
  --danger-border: color-mix(in srgb, var(--danger) 32%, transparent);
  --danger-text:   var(--red-900);

  --success:        var(--emerald-700);
  --success-soft:   color-mix(in srgb, var(--success) 8%, transparent);
  --success-border: color-mix(in srgb, var(--success) 32%, transparent);
  --success-text:   var(--emerald-900);

  --warning:        var(--amber-500);
  --warning-soft:   color-mix(in srgb, var(--warning) 8%, transparent);
  --warning-border: color-mix(in srgb, var(--warning) 32%, transparent);
  --warning-text:   var(--amber-900);

  --info:        var(--azure-500);
  --info-soft:   color-mix(in srgb, var(--info) 8%, transparent);
  --info-border: color-mix(in srgb, var(--info) 32%, transparent);
  --info-text:   var(--azure-900);

  --danger-rgb:  var(--red-700-rgb);
  --success-rgb: var(--emerald-700-rgb);
  --warning-rgb: var(--amber-500-rgb);
  --info-rgb:    var(--azure-500-rgb);

  /* ── Elevação ─────────────────────────────────────────────────────────── */
  --shadow-sm:    0 2px 10px rgba(26, 26, 26, .08);
  --shadow-md:    0 6px 18px rgba(26, 26, 26, .14);
  --shadow-lg:    0 12px 28px rgba(26, 26, 26, .18);
  --shadow-stage: 0 24px 64px rgba(0, 0, 0, .45);

  /* ── Tipografia aplicada ──────────────────────────────────────────────── */
  --font-display:   var(--font-family-display);
  --font-body:      var(--font-family-body);
  --tracking-title: .04em;
}

/* ── Dark mode ────────────────────────────────────────────────────────────
   Padrão do DS: a classe .dark troca o VALOR das vars. Nenhum componente
   precisa de regra própria — quem consome semântico responde sozinho.
   No escuro a primária inverte para o dourado: verde militar sobre fundo
   escuro não atinge contraste AA.
   ---------------------------------------------------------------------- */
.dark {
  --brand-primary:      var(--gold-500);
  --brand-hover:        var(--gold-400);
  --brand-on-primary:   var(--neutral-900);
  --brand-secondary:    var(--green-400);
  --brand-on-secondary: var(--neutral-900);
  --brand-accent:       var(--gold-400);
  --brand-accent-light: var(--gold-900);

  --surface-page:    #121210;
  --surface-default: var(--neutral-900);
  --surface-raised:  #24241f;
  --surface-overlay: var(--neutral-800);

  --border-subtle:  var(--white-alpha-100);
  --border-default: var(--white-alpha-200);
  --border-strong:  var(--white-alpha-400);
  --border-focus:   var(--gold-400);

  --text-primary:     var(--white-alpha-900);
  --text-secondary:   var(--white-alpha-600);
  --text-muted:       var(--white-alpha-400);
  --text-disabled:    var(--white-alpha-200);
  --text-inverse:     var(--neutral-900);
  --text-placeholder: var(--white-alpha-400);

  --danger:  var(--red-500);
  --success: var(--emerald-500);
  --warning: var(--amber-500);
  --info:    var(--azure-500);

  --shadow-sm: 0 2px 10px rgba(0, 0, 0, .4);
  --shadow-md: 0 6px 18px rgba(0, 0, 0, .5);
  --shadow-lg: 0 12px 28px rgba(0, 0, 0, .6);
}

/* ============================================================================
   CAMADA 3 — TOKENS DE COMPONENTE
   Isolam mudanças: alterar o botão não mexe na camada semântica.
   Sempre apontam para semântico, nunca para primitivo.
   ========================================================================= */

:root {
  /* ── Button ───────────────────────────────────────────────────────────── */
  --button-primary-bg:            var(--brand-primary);
  --button-primary-bg-hover:      var(--brand-hover);
  --button-primary-label:         var(--brand-on-primary);
  --button-primary-on-disabled:   var(--white-alpha-600);

  --button-secondary-bg:          var(--brand-secondary);
  --button-secondary-label:       var(--brand-on-secondary);
  --button-secondary-on-disabled: var(--text-disabled);

  /* Outline: stroke e label usam A MESMA var (regra imutável do DS) */
  --button-outline-primary-line:   var(--brand-primary);
  --button-outline-primary-label:  var(--brand-primary);
  --button-outline-secondary-line:  var(--text-secondary);
  --button-outline-secondary-label: var(--text-secondary);

  /* ── Input ────────────────────────────────────────────────────────────── */
  --input-bg:           var(--surface-default);
  --input-border:       var(--border-default);
  --input-border-focus: var(--border-focus);
  --input-label:        var(--text-secondary);
  --input-placeholder:  var(--text-placeholder);
  --input-height:       var(--space-control-height-md);
  --input-padding-x:    var(--space-control-padding-x-md);

  /* ── Card ─────────────────────────────────────────────────────────────── */
  --card-bg:       var(--surface-default);
  --card-border:   var(--border-subtle);
  --card-radius:   var(--radius-lg);
  --card-shadow:   var(--shadow-sm);
  --card-padding:  var(--space-20);

  /* ── Badge ────────────────────────────────────────────────────────────── */
  --badge-radius:       var(--radius-full);
  --badge-accent-bg:    var(--brand-secondary);
  --badge-accent-label: var(--brand-on-secondary);

  /* ── Topbar (cabeçalho público) ───────────────────────────────────────── */
  --topbar-bg:       var(--surface-overlay);
  --topbar-label:    var(--text-inverse);
  --topbar-accent:   var(--brand-accent);
  --topbar-underline:var(--brand-accent);

  /* ── Pix (bloco de pagamento — recorrente nas 4 jornadas públicas) ────── */
  --pix-code-bg:     var(--surface-raised);
  --pix-code-border: var(--border-subtle);
  --pix-code-font:   var(--font-family-mono);
  --pix-value-label: var(--success-text);
}

/* ============================================================================
   COMPATIBILIDADE — vars legadas dos layouts atuais
   Permite adoção incremental: o CSS existente continua funcionando enquanto
   as telas migram para os tokens semânticos.
   REMOVER quando _Layout.cshtml e _PublicLayout.cshtml não usarem mais --jcc-*.
   ========================================================================= */

:root {
  --jcc-green: var(--brand-primary);
  --jcc-gold:  var(--brand-accent);
  --jcc-dark:  var(--surface-overlay);
  --jcc-mud:   var(--mud-700);
}