/*
 * Fortes Tech — Design Tokens
 * Fonte: Manual de Identidade Visual (FORTES - WILLIAN CESAR.pdf)
 * Camadas: primitivos -> semânticos -> componentes
 */

:root {
  /* ---------- PRIMITIVOS: paleta oficial do manual ---------- */
  --ft-vermelho-puro: #ff0000;
  --ft-electric-purple: #c100ff;
  --ft-turquesa: #00f0d0;
  --ft-azul-escuro: #011962;
  --ft-preto-frio: #111216;
  --ft-preto-absoluto: #050507;
  --ft-preto: #000000;
  --ft-ghost-white: #f2f2f4;
  --ft-laranja-citrico: #ffac0b;
  --ft-degrade-base: #02216a;

  /* Faixa de cores dos elementos gráficos */
  --ft-creme: #f7ecde;
  --ft-areia: #f4e1d0;

  /* Degradê metálico (amostrado do swatch "Degradê") */
  --ft-degrade-metal: linear-gradient(
    115deg,
    #3671bd 0%,
    #23467d 12%,
    #142146 24%,
    #103581 40%,
    #0e4abc 55%,
    #6b94d5 70%,
    #c7dcef 78%,
    #7a8da8 86%,
    #1b2d57 100%
  );
  --ft-degrade-profundo: linear-gradient(135deg, #02216a 0%, #011962 45%, #050507 100%);

  /* Neutros derivados (opacidades do Ghost White sobre preto) */
  --ft-ghost-72: rgb(242 242 244 / 0.72);
  --ft-ghost-48: rgb(242 242 244 / 0.48);
  --ft-ghost-16: rgb(242 242 244 / 0.16);
  --ft-ghost-08: rgb(242 242 244 / 0.08);
  --ft-vermelho-24: rgb(255 0 0 / 0.24);

  /* ---------- SEMÂNTICOS: tema escuro (padrão da marca) ---------- */
  --ft-bg: var(--ft-preto-absoluto);
  --ft-bg-deep: var(--ft-preto);
  --ft-surface: var(--ft-preto-frio);
  --ft-surface-raised: #17181d;
  --ft-border: var(--ft-ghost-16);
  --ft-border-subtle: var(--ft-ghost-08);

  --ft-text: var(--ft-ghost-white);
  --ft-text-muted: var(--ft-ghost-72);
  --ft-text-subtle: var(--ft-ghost-48);

  --ft-brand: var(--ft-vermelho-puro);
  --ft-on-brand: var(--ft-preto-absoluto);
  --ft-institucional: var(--ft-azul-escuro);

  --ft-accent-tech: var(--ft-turquesa);
  --ft-accent-ia: var(--ft-electric-purple);
  --ft-accent-atencao: var(--ft-laranja-citrico);

  --ft-success: var(--ft-turquesa);
  --ft-warning: var(--ft-laranja-citrico);
  --ft-danger: var(--ft-vermelho-puro);
  --ft-focus-ring: var(--ft-turquesa);

  /* ---------- TIPOGRAFIA ---------- */
  --ft-font-heading: "Glacial Indifference", "Montserrat", system-ui, sans-serif;
  --ft-font-body: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ft-font-mono: "JetBrains Mono", ui-monospace, "Cascadia Code", monospace;

  --ft-text-xs: 0.75rem;
  --ft-text-sm: 0.875rem;
  --ft-text-base: 1rem;
  --ft-text-lg: 1.125rem;
  --ft-text-xl: 1.375rem;
  --ft-text-2xl: 1.75rem;
  --ft-text-3xl: 2.25rem;
  --ft-text-4xl: clamp(2.5rem, 5vw, 3.5rem);
  --ft-text-5xl: clamp(3rem, 8vw, 5.5rem);

  --ft-leading-tight: 1.05;
  --ft-leading-snug: 1.25;
  --ft-leading-body: 1.6;
  --ft-tracking-heading: 0.04em;
  --ft-tracking-label: 0.18em;

  /* ---------- ESPAÇO (base 4px) ---------- */
  --ft-space-1: 0.25rem;
  --ft-space-2: 0.5rem;
  --ft-space-3: 0.75rem;
  --ft-space-4: 1rem;
  --ft-space-6: 1.5rem;
  --ft-space-8: 2rem;
  --ft-space-12: 3rem;
  --ft-space-16: 4rem;
  --ft-space-24: 6rem;
  --ft-space-32: 8rem;
  --ft-container: 1200px;

  /* ---------- FORMA: cantos chanfrados a 45°, nunca arredondados ---------- */
  --ft-radius: 0;
  --ft-cut-sm: 6px;
  --ft-cut: 12px;
  --ft-cut-lg: 24px;
  --ft-angle: 45deg;
  --ft-border-width: 1px;

  /* ---------- PROFUNDIDADE: luz de LED vermelha, não sombra ---------- */
  --ft-glow-brand: 0 0 0 1px var(--ft-vermelho-24), 0 0 24px rgb(255 0 0 / 0.28);
  --ft-glow-tech: 0 0 20px rgb(0 240 208 / 0.25);
  --ft-shadow-raised: 0 12px 32px rgb(0 0 0 / 0.55);

  /* ---------- MOVIMENTO ---------- */
  --ft-duration-fast: 150ms;
  --ft-duration: 240ms;
  --ft-duration-slow: 480ms;
  --ft-duration-reveal: 800ms;
  --ft-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ft-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ft-ease-snap: cubic-bezier(0.7, 0, 0.2, 1);

  /* ---------- COMPONENTES ---------- */
  --ft-btn-height: 48px;
  --ft-btn-padding-x: 1.75rem;
  --ft-input-height: 48px;
  --ft-header-height: 72px;
}

/* Tema claro: versão principal do logo (colorida sobre branco) */
[data-theme="light"] {
  --ft-bg: var(--ft-ghost-white);
  --ft-bg-deep: #ffffff;
  --ft-surface: #ffffff;
  --ft-surface-raised: #ffffff;
  --ft-border: rgb(17 18 22 / 0.16);
  --ft-border-subtle: rgb(17 18 22 / 0.08);
  --ft-text: var(--ft-preto-frio);
  --ft-text-muted: rgb(17 18 22 / 0.72);
  --ft-text-subtle: rgb(17 18 22 / 0.56);
  --ft-on-brand: var(--ft-preto-absoluto);
  --ft-institucional: var(--ft-azul-escuro);
  --ft-focus-ring: var(--ft-azul-escuro);
  --ft-glow-brand: 0 8px 24px rgb(255 0 0 / 0.18);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --ft-duration-fast: 0ms;
    --ft-duration: 0ms;
    --ft-duration-slow: 0ms;
    --ft-duration-reveal: 0ms;
  }
}

/* ---------- UTILITÁRIOS DE ASSINATURA ---------- */

/* Chanfro diagonal: mesmo corte a 45° das barras do monograma */
.ft-chamfer {
  clip-path: polygon(var(--ft-cut) 0, 100% 0, 100% calc(100% - var(--ft-cut)), calc(100% - var(--ft-cut)) 100%, 0 100%, 0 var(--ft-cut));
}

.ft-chamfer-tr {
  clip-path: polygon(0 0, calc(100% - var(--ft-cut)) 0, 100% var(--ft-cut), 100% 100%, 0 100%);
}

/* Paralelogramo: a forma das barras do "F" */
.ft-parallelogram {
  clip-path: polygon(var(--ft-cut) 0, 100% 0, calc(100% - var(--ft-cut)) 100%, 0 100%);
}

/* Faixa de cores dos elementos gráficos */
.ft-strip {
  height: 8px;
  background: linear-gradient(
    90deg,
    var(--ft-creme) 0 33%,
    var(--ft-preto) 33% 50%,
    var(--ft-azul-escuro) 50% 67%,
    var(--ft-areia) 67% 84%,
    var(--ft-preto) 84% 100%
  );
}

.ft-label {
  font-family: var(--ft-font-heading);
  font-size: var(--ft-text-xs);
  letter-spacing: var(--ft-tracking-label);
  text-transform: uppercase;
}

.ft-heading {
  font-family: var(--ft-font-heading);
  line-height: var(--ft-leading-tight);
  letter-spacing: var(--ft-tracking-heading);
  text-transform: uppercase;
}