/* =========================================================================
   FKweb — Design Tokens
   Fonte da verdade da identidade visual. Todo valor abaixo foi extraído
   dos arquivos originais em /identidade (PDFs vetoriais da marca).
   Nada aqui deve ser alterado sem aprovação da marca.
   ========================================================================= */

:root {
  /* ---------------------------------------------------------------------
     1. PALETA BRUTA  (raw palette — não usar direto em componentes)
     --------------------------------------------------------------------- */

  /* Marca — terracota */
  --fk-areia:        #FFF6F2;  /* rgb(255,246,242) — cmyk(0,4,5,0)    */
  --fk-pessego:      #F8DDCF;  /* rgb(248,221,207) — cmyk(0,11,17,3)  */
  --fk-terracota:    #CA7445;  /* rgb(202,116,69)  — cmyk(0,43,66,21) */
  --fk-cacau:        #7B401F;  /* rgb(123,64,31)   — cmyk(0,48,75,52) */

  /* Marca — apoio frio */
  --fk-petroleo:     #2A4243;  /* rgb(42,66,67)    — cmyk(37,1,0,74)  */
  --fk-breu:         #0A0C0D;  /* rgb(10,12,13)    — cmyk(23,8,0,95)  */

  /* Neutros */
  --fk-off-white:    #FBF4F2;  /* rgb(251,244,242) */
  --fk-cinza-100:    #C5C0BE;  /* rgb(197,192,190) */
  --fk-cinza-500:    #676260;  /* rgb(103,98,96)   */
  --fk-cinza-700:    #423F3F;  /* rgb(66,63,63)    */
  --fk-grafite:      #282626;  /* rgb(40,38,38)    */
  --fk-quase-preto:  #161515;  /* rgb(22,21,21)    */

  /* Gradientes oficiais (radiais, do centro para a borda) */
  --fk-gradient-terracota: radial-gradient(circle at 50% 50%, #CA7445 0%, #7B401F 100%);
  --fk-gradient-petroleo:  radial-gradient(circle at 50% 50%, #2A4243 0%, #0A0C0D 100%);

  /* Escala derivada do terracota — para estados de interface.
     Gerada por interpolação entre Areia → Terracota → Cacau. */
  --fk-brand-50:   #FFF6F2;
  --fk-brand-100:  #F8DDCF;
  --fk-brand-200:  #ECC3AC;
  --fk-brand-300:  #E1A88A;
  --fk-brand-400:  #D68E68;
  --fk-brand-500:  #CA7445;  /* cor primária da marca */
  --fk-brand-600:  #A25A32;
  --fk-brand-700:  #7B401F;
  --fk-brand-800:  #532F1B;
  --fk-brand-900:  #342218;

  /* Feedback — harmonizados com a temperatura da marca */
  --fk-success:    #3F7D5C;
  --fk-success-bg: #E6F1EB;
  --fk-warning:    #B8791B;
  --fk-warning-bg: #FBF0DC;
  --fk-danger:     #B23C2E;
  --fk-danger-bg:  #FAE7E4;
  --fk-info:       #2A4243;
  --fk-info-bg:    #E3EAEA;

  /* ---------------------------------------------------------------------
     2. TIPOGRAFIA
     --------------------------------------------------------------------- */
  --fk-font-brand: 'Cal Sans', 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fk-font-sans:  'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --fk-font-mono:  ui-monospace, 'SFMono-Regular', 'Cascadia Mono', 'JetBrains Mono', Consolas, monospace;

  /* Escala — conforme o design system Atom */
  --fk-text-h1:     64px;
  --fk-text-h2:     48px;
  --fk-text-h3:     36px;
  --fk-text-h4:     28px;
  --fk-text-h5:     22px;
  --fk-text-lg:     20px;
  --fk-text-md:     16px;
  --fk-text-sm:     14px;
  --fk-text-xs:     12px;

  --fk-leading-tight:   1.1;
  --fk-leading-snug:    1.25;
  --fk-leading-normal:  1.5;
  --fk-leading-relaxed: 1.65;

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

  /* Entreletra. Cal Sans é desenhada com espaçamento fechado — no padrão (0)
     os títulos ficam apertados. Por isso todo título da marca usa
     --fk-tracking-title, um respiro positivo aplicado só à Cal Sans.
     O passo `tight` fica reservado a texto em Inter muito grande e nunca
     deve ser usado em títulos. */
  --fk-tracking-tight:  -0.02em;
  --fk-tracking-normal: 0;
  --fk-tracking-title:  0.02em;
  --fk-tracking-wide:   0.06em;

  /* ---------------------------------------------------------------------
     3. ESPAÇAMENTO  (escala Atom)
     --------------------------------------------------------------------- */
  --fk-space-0:  0px;
  --fk-space-1:  2px;
  --fk-space-2:  4px;
  --fk-space-3:  8px;
  --fk-space-4:  12px;
  --fk-space-5:  16px;
  --fk-space-6:  20px;
  --fk-space-7:  24px;
  --fk-space-8:  32px;
  --fk-space-9:  40px;
  --fk-space-10: 48px;
  --fk-space-11: 56px;
  --fk-space-12: 64px;
  --fk-space-14: 80px;
  --fk-space-16: 96px;
  --fk-space-20: 128px;

  /* ---------------------------------------------------------------------
     4. RAIO DE BORDA  (escala Atom)
     --------------------------------------------------------------------- */
  --fk-radius-none: 0px;
  --fk-radius-xs:   2px;
  --fk-radius-sm:   4px;
  --fk-radius-md:   8px;
  --fk-radius-lg:   12px;
  --fk-radius-xl:   16px;
  --fk-radius-2xl:  24px;
  --fk-radius-3xl:  32px;
  --fk-radius-full: 9999px;

  /* ---------------------------------------------------------------------
     5. ELEVAÇÃO
     --------------------------------------------------------------------- */
  --fk-shadow-xs: 0 1px 2px rgba(22, 21, 21, .06);
  --fk-shadow-sm: 0 1px 3px rgba(22, 21, 21, .08), 0 1px 2px rgba(22, 21, 21, .04);
  --fk-shadow-md: 0 4px 12px rgba(22, 21, 21, .08), 0 2px 4px rgba(22, 21, 21, .04);
  --fk-shadow-lg: 0 12px 32px rgba(22, 21, 21, .10), 0 4px 8px rgba(22, 21, 21, .04);
  --fk-shadow-xl: 0 24px 56px rgba(22, 21, 21, .14), 0 8px 16px rgba(22, 21, 21, .06);

  /* ---------------------------------------------------------------------
     6. MOVIMENTO
     --------------------------------------------------------------------- */
  --fk-ease:        cubic-bezier(.4, 0, .2, 1);
  --fk-ease-out:    cubic-bezier(0, 0, .2, 1);
  --fk-ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --fk-duration-fast:   140ms;
  --fk-duration-normal: 220ms;
  --fk-duration-slow:   380ms;

  /* Layout */
  --fk-container:  1200px;
  --fk-container-narrow: 760px;
}

/* =========================================================================
   7. TOKENS SEMÂNTICOS — TEMA CLARO (padrão)
   Componentes devem consumir SOMENTE estes.
   ========================================================================= */
:root,
[data-theme="light"] {
  --fk-bg:            var(--fk-areia);
  --fk-bg-subtle:     var(--fk-off-white);
  --fk-surface:       #FFFFFF;
  --fk-surface-alt:   var(--fk-pessego);
  --fk-surface-inset: #F5EBE5;

  --fk-text:          var(--fk-grafite);
  --fk-text-muted:    var(--fk-cinza-500);
  --fk-text-subtle:   #8A8482;
  --fk-text-inverse:  var(--fk-areia);
  --fk-text-brand:    var(--fk-cacau);

  --fk-border:        #E7DAD2;
  --fk-border-strong: var(--fk-cinza-100);
  --fk-border-brand:  var(--fk-terracota);

  --fk-accent:          var(--fk-terracota);
  --fk-accent-hover:    var(--fk-brand-600);
  --fk-accent-active:   var(--fk-cacau);
  --fk-accent-contrast: var(--fk-areia);
  --fk-accent-soft:     var(--fk-pessego);

  --fk-focus-ring: 0 0 0 3px rgba(202, 116, 69, .35);
  color-scheme: light;
}

/* =========================================================================
   8. TOKENS SEMÂNTICOS — TEMA ESCURO
   ========================================================================= */
[data-theme="dark"] {
  --fk-bg:            var(--fk-grafite);
  --fk-bg-subtle:     var(--fk-quase-preto);
  --fk-surface:       #302D2D;
  --fk-surface-alt:   var(--fk-cinza-700);
  --fk-surface-inset: #211F1F;

  --fk-text:          var(--fk-areia);
  --fk-text-muted:    #A8A2A0;
  --fk-text-subtle:   #7E7876;
  --fk-text-inverse:  var(--fk-grafite);
  --fk-text-brand:    var(--fk-brand-300);

  --fk-border:        #423F3F;
  --fk-border-strong: #575252;
  --fk-border-brand:  var(--fk-terracota);

  --fk-accent:          var(--fk-terracota);
  --fk-accent-hover:    var(--fk-brand-400);
  --fk-accent-active:   var(--fk-brand-300);
  --fk-accent-contrast: var(--fk-areia);
  --fk-accent-soft:     #4A3227;

  --fk-shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);
  --fk-shadow-sm: 0 1px 3px rgba(0, 0, 0, .4), 0 1px 2px rgba(0, 0, 0, .3);
  --fk-shadow-md: 0 4px 12px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .3);
  --fk-shadow-lg: 0 12px 32px rgba(0, 0, 0, .5), 0 4px 8px rgba(0, 0, 0, .3);
  --fk-shadow-xl: 0 24px 56px rgba(0, 0, 0, .55), 0 8px 16px rgba(0, 0, 0, .35);

  --fk-focus-ring: 0 0 0 3px rgba(202, 116, 69, .5);
  color-scheme: dark;
}

/* Segue a preferência do sistema quando o tema não foi fixado no HTML */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fk-bg:            var(--fk-grafite);
    --fk-bg-subtle:     var(--fk-quase-preto);
    --fk-surface:       #302D2D;
    --fk-surface-alt:   var(--fk-cinza-700);
    --fk-surface-inset: #211F1F;

    --fk-text:          var(--fk-areia);
    --fk-text-muted:    #A8A2A0;
    --fk-text-subtle:   #7E7876;
    --fk-text-inverse:  var(--fk-grafite);
    --fk-text-brand:    var(--fk-brand-300);

    --fk-border:        #423F3F;
    --fk-border-strong: #575252;

    --fk-accent-hover:  var(--fk-brand-400);
    --fk-accent-active: var(--fk-brand-300);
    --fk-accent-soft:   #4A3227;
    color-scheme: dark;
  }
}