/* =========================================================================
   FKweb Social — Camada 2: Design tokens
   -------------------------------------------------------------------------
   §1  Paleta bruta da marca      (não usar direto em componentes)
   §2  Tipografia
   §3  Espaçamento
   §4  Raio de borda
   §5  Elevação
   §6  Movimento
   §7  Layout
   §8  Tokens semânticos — tema claro   <- componentes consomem SÓ estes
   §9  Tokens semânticos — tema escuro
   §10 Compatibilidade com nomes antigos

   Os valores de §1 a §7 vêm do manual de identidade FKweb
   ("Identidade visual - guide/assets/css/tokens.css") e não devem ser
   alterados sem aprovação da marca. O que é específico da rede social
   está marcado com o comentário "social".
   ========================================================================= */

:root {
  /* ---- §1 PALETA BRUTA ------------------------------------------------- */

  /* Marca — terracota */
  --fk-areia:        #FFF6F2;
  --fk-pessego:      #F8DDCF;
  --fk-terracota:    #CA7445;   /* cor primária */
  --fk-cacau:        #7B401F;

  /* Marca — apoio frio */
  --fk-petroleo:     #2A4243;
  --fk-breu:         #0A0C0D;

  /* Neutros */
  --fk-off-white:    #FBF4F2;
  --fk-cinza-100:    #C5C0BE;
  --fk-cinza-500:    #676260;
  --fk-cinza-700:    #423F3F;
  --fk-grafite:      #282626;
  --fk-quase-preto:  #161515;

  /* Escala derivada do terracota (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;
  --fk-brand-600:  #A25A32;
  --fk-brand-700:  #7B401F;
  --fk-brand-800:  #532F1B;
  --fk-brand-900:  #342218;

  /* 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%);

  /* ---- §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 editorial do manual (títulos de página, heróis) */
  --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;

  /* social — escala de interface. Um feed é denso: os títulos editoriais
     acima são grandes demais para cartões, menus e barras de ação. Esta é a
     escala usada pelos componentes da rede. */
  --fk-ui-2xs:  11px;
  --fk-ui-xs:   12px;
  --fk-ui-sm:   13px;
  --fk-ui-base: 15px;   /* corpo de texto do feed */
  --fk-ui-md:   16px;
  --fk-ui-lg:   18px;
  --fk-ui-xl:   22px;
  --fk-ui-2xl:  28px;

  --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;

  /* Cal Sans tem espaçamento fechado: todo título da marca usa tracking-title */
  --fk-tracking-tight:  -0.02em;
  --fk-tracking-normal: 0;
  --fk-tracking-title:  0.02em;
  --fk-tracking-wide:   0.06em;

  /* ---- §3 ESPAÇAMENTO -------------------------------------------------- */
  --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 ------------------------------------------------ */
  --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;

  /* social — papéis fixos de raio, para o conjunto ficar coerente */
  --fk-radius-card:  var(--fk-radius-xl);
  --fk-radius-field: var(--fk-radius-md);
  --fk-radius-chip:  var(--fk-radius-full);

  /* ---- §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;

  /* ---- §7 LAYOUT ------------------------------------------------------- */
  --fk-container:        1200px;
  --fk-container-narrow: 760px;

  /* social — medidas da rede */
  --fk-app-width:    1040px;  /* feed + painel lateral */
  --fk-feed-width:   640px;   /* coluna de leitura */
  --fk-form-width:   440px;   /* cartões de autenticação */
  --fk-appbar-h:     60px;
  --fk-footer-h:     40px;    /* rodapé fixo da FKweb */
  --fk-gutter:       16px;
  --fk-aside-width:  296px;
}

/* =========================================================================
   §8 TOKENS SEMÂNTICOS — TEMA CLARO (padrão)
   ========================================================================= */
: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:  #F6ECE6;
  --fk-surface-raised: #FFFFFF;          /* social — menus, dropdowns, modais */
  --fk-surface-hover:  #F8F0EB;          /* social — linhas clicáveis */

  --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);       /* 8,09:1 sobre claro */
  --fk-text-brand-hover:  var(--fk-brand-800);

  --fk-border:        #EDDFD7;
  --fk-border-strong: #DCCCC3;
  --fk-border-brand:  var(--fk-terracota);

  /* --fk-accent é o terracota puro: contorno, ícone, barra, anel, gradiente.
     Nunca texto — ele dá só 3,45:1 sobre fundo claro.
     --fk-accent-strong é o preenchimento que carrega texto em cima. */
  --fk-accent:               var(--fk-terracota);
  --fk-accent-hover:         var(--fk-brand-600);
  --fk-accent-active:        var(--fk-cacau);
  --fk-accent-strong:        var(--fk-brand-600); /* 5,2:1 com areia em cima */
  --fk-accent-strong-hover:  var(--fk-cacau);
  --fk-accent-contrast:      var(--fk-areia);
  --fk-accent-soft:          #FBEADF;
  --fk-accent-tint:          rgba(202, 116, 69, .10);

  /* Feedback — cada cor tem fundo (bg) e contorno (line) próprios */
  --fk-success:      #3F7D5C;
  --fk-success-bg:   #E6F1EB;
  --fk-success-line: #B9D6C6;
  --fk-warning:      #B8791B;
  --fk-warning-bg:   #FBF0DC;
  --fk-warning-line: #E8D0A0;
  --fk-danger:          #B23C2E;
  --fk-danger-bg:       #FAE7E4;
  --fk-danger-line:     #EFC3BB;
  --fk-danger-solid:    #B23C2E;   /* preenchimento destrutivo com texto em cima */
  --fk-danger-contrast: #FFF7F5;
  --fk-info:         #2A4243;
  --fk-info-bg:      #E3EAEA;
  --fk-info-line:    #BFD0D0;

  /* social */
  --fk-appbar-bg:    rgba(255, 246, 242, .78);
  --fk-appbar-solid: #FFF9F6;
  --fk-overlay:      rgba(22, 21, 21, .45);
  --fk-scrim:        rgba(10, 12, 13, .88);
  --fk-avatar-ring:  #EFE2DA;

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

/* =========================================================================
   §9 TOKENS SEMÂNTICOS — TEMA ESCURO
   ========================================================================= */
[data-theme="dark"] {
  --fk-bg:             #201E1E;
  --fk-bg-subtle:      var(--fk-quase-preto);
  --fk-surface:        #2B2827;
  --fk-surface-alt:    var(--fk-cinza-700);
  --fk-surface-inset:  #211F1F;
  --fk-surface-raised: #332F2E;
  --fk-surface-hover:  #363231;

  --fk-text:              var(--fk-areia);
  --fk-text-muted:        #ADA6A3;
  --fk-text-subtle:       #857E7B;
  --fk-text-inverse:      var(--fk-grafite);
  --fk-text-brand:        var(--fk-brand-300);
  --fk-text-brand-hover:  var(--fk-brand-200);

  --fk-border:        #3B3736;
  --fk-border-strong: #4C4746;
  --fk-border-brand:  var(--fk-terracota);

  /* No escuro o terracota já se destaca: ele pode ser o preenchimento,
     desde que o texto em cima seja bem escuro (5,1:1). */
  --fk-accent:               var(--fk-terracota);
  --fk-accent-hover:         var(--fk-brand-400);
  --fk-accent-active:        var(--fk-brand-300);
  --fk-accent-strong:        var(--fk-terracota);
  --fk-accent-strong-hover:  var(--fk-brand-400);
  --fk-accent-contrast:      #1B1411;
  --fk-accent-soft:          #40291D;
  --fk-accent-tint:          rgba(202, 116, 69, .16);

  /* Feedback — clareados para manter contraste sobre superfície escura */
  --fk-success:      #86CBA4;
  --fk-success-bg:   #1F3529;
  --fk-success-line: #3D5E4C;
  --fk-warning:      #E0B368;
  --fk-warning-bg:   #37290F;
  --fk-warning-line: #5C4820;
  --fk-danger:          #EE9285;
  --fk-danger-bg:       #3C221D;
  --fk-danger-line:     #6A3B33;
  --fk-danger-solid:    #B8463A;
  --fk-danger-contrast: #FFF1EE;
  --fk-info:         #9CC0C1;
  --fk-info-bg:      #1D2C2D;
  --fk-info-line:    #3A4F50;

  --fk-appbar-bg:    rgba(32, 30, 30, .78);
  --fk-appbar-solid: #262322;
  --fk-overlay:      rgba(0, 0, 0, .6);
  --fk-scrim:        rgba(0, 0, 0, .92);
  --fk-avatar-ring:  #423D3B;

  --fk-shadow-xs: 0 1px 2px rgba(0, 0, 0, .34);
  --fk-shadow-sm: 0 1px 3px rgba(0, 0, 0, .42), 0 1px 2px rgba(0, 0, 0, .3);
  --fk-shadow-md: 0 4px 12px rgba(0, 0, 0, .46), 0 2px 4px rgba(0, 0, 0, .3);
  --fk-shadow-lg: 0 12px 32px rgba(0, 0, 0, .52), 0 4px 8px rgba(0, 0, 0, .32);
  --fk-shadow-xl: 0 24px 56px rgba(0, 0, 0, .58), 0 8px 16px rgba(0, 0, 0, .36);

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

/* =========================================================================
   §10 COMPATIBILIDADE
   Nomes usados pela folha antiga (e por algum style="" que ainda apareça no
   PHP) continuam válidos, apontando para os tokens novos. Não use em código
   novo — estão aqui só para que nada quebre enquanto a migração termina.
   ========================================================================= */
:root {
  --fkweb-marca1: var(--fk-accent);
  --fkweb-marca2: var(--fk-text-brand);
  --fkweb-marca3: var(--fk-brand-800);

  --fkweb-color-light1: var(--fk-surface);
  --fkweb-color-light2: var(--fk-surface-inset);
  --fkweb-color-light3: var(--fk-border);
  --fkweb-color-light4: var(--fk-text-subtle);

  --fkweb-color-dark1: var(--fk-text-muted);
  --fkweb-color-dark2: var(--fk-text);
  --fkweb-color-dark3: var(--fk-text);
  --fkweb-color-dark4: var(--fk-text);

  --fkweb-colorsystem1: var(--fk-info);
  --fkweb-colorsystem2: var(--fk-danger);
  --fkweb-colorsystem3: var(--fk-success);

  --radius-sm: var(--fk-radius-sm);
  --radius-md: var(--fk-radius-md);
  --radius-lg: var(--fk-radius-lg);
  --shadow-card: var(--fk-shadow-xs);
  --font-body:    var(--fk-font-sans);
  --font-display: var(--fk-font-brand);
  --transition:   var(--fk-duration-fast) var(--fk-ease);
}