/* ==========================================================================
   MINDS2WORK — DESIGN TOKENS  (v2.0)
   Fonte única da verdade. Todo valor visual do site nasce aqui.
   Camadas:  primitivos  →  semânticos  →  componentes (em site.css)
   Base herdada do site Airo/GoDaddy: #2563EB (primary), #0B1020 (hero),
   #0F1628 (navy), Inter + Plus Jakarta Sans, grade de 4px.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* ---------- 1. PRIMITIVOS · cor ---------- */
  /* Navy / superfícies (a rampa parte do #0B1020 e #0F1628 do site original) */
  --navy-1000: #05080F;
  --navy-950:  #070B16;
  --navy-900:  #0B1020;   /* hero original */
  --navy-850:  #0F1628;   /* navy original */
  --navy-800:  #141B30;
  --navy-700:  #1B2440;
  --navy-600:  #262F4D;

  /* Azul de marca (#2563EB original = blue-600) */
  --blue-100: #DBE7FF;
  --blue-200: #BDD3FF;
  --blue-300: #93B8FF;
  --blue-400: #5F95FA;
  --blue-500: #3B7BF3;
  --blue-600: #2563EB;   /* PRIMARY */
  --blue-700: #1D4ED8;   /* hover original */
  --blue-800: #1E3FAE;

  /* Violeta (token --secondary do tema shadcn original: hsl 251 83% 53%) */
  --violet-300: #B5A3FF;
  --violet-400: #8F78FF;
  --violet-500: #6A4DF4;
  --violet-600: #4824EB;

  /* Âmbar (token --accent do tema original: hsl 41 83% 53%) — uso mínimo */
  --amber-400: #F5C04D;
  --amber-500: #EBAC24;

  /* Neutros frios */
  --ink-50:  #F5F7FC;
  --ink-100: #E7EBF5;
  --ink-200: #CBD2E4;
  --ink-300: #A7B0C8;
  --ink-400: #7B859F;
  --ink-500: #5A6482;

  /* Feedback */
  --green-500: #25D366;   /* WhatsApp / sucesso */
  --red-400:   #F87171;   /* erro (já usado no original) */

  /* ---------- 2. SEMÂNTICOS ---------- */
  --bg:            var(--navy-900);
  --bg-deep:       var(--navy-950);
  --bg-raised:     var(--navy-850);
  --bg-elevated:   var(--navy-800);
  --surface:       rgba(255, 255, 255, 0.035);
  --surface-hover: rgba(255, 255, 255, 0.065);
  --surface-strong:rgba(255, 255, 255, 0.09);
  --glass:         rgba(15, 22, 40, 0.62);
  --glass-strong:  rgba(11, 16, 32, 0.82);

  --text:          var(--ink-50);
  --text-body:     rgba(226, 232, 246, 0.78);
  --text-muted:    var(--ink-300);
  --text-subtle:   var(--ink-400);
  --text-on-brand: #FFFFFF;

  --brand:         var(--blue-600);
  --brand-hover:   var(--blue-700);
  --brand-bright:  var(--blue-400);
  --brand-text:    var(--blue-300);       /* azul legível sobre fundo escuro */
  --brand-soft:    rgba(37, 99, 235, 0.14);
  --brand-line:    rgba(37, 99, 235, 0.38);
  --brand-glow:    rgba(37, 99, 235, 0.45);
  --violet:        var(--violet-500);
  --violet-glow:   rgba(106, 77, 244, 0.38);

  --border:        rgba(255, 255, 255, 0.08);
  --border-hover:  rgba(255, 255, 255, 0.18);
  --border-brand:  rgba(95, 149, 250, 0.45);
  --focus-ring:    #7FAAFF;

  /* Gradientes */
  --grad-brand:    linear-gradient(135deg, #5F95FA 0%, #2563EB 48%, #6A4DF4 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(95,149,250,.18), rgba(106,77,244,.10));
  --grad-text:     linear-gradient(120deg, #FFFFFF 0%, #BDD3FF 45%, #8F9CFF 100%);
  --grad-hairline: linear-gradient(90deg, transparent, rgba(147,184,255,.45), transparent);
  --grad-surface:  linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.015));

  /* ---------- 3. TIPOGRAFIA ---------- */
  --font-heading: "Plus Jakarta Sans", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Escala fluida (min @360px → max @1440px) */
  --fs-2xs:  0.6875rem;                                       /* 11  rótulos mono   */
  --fs-xs:   clamp(0.75rem,   0.73rem + 0.10vw, 0.8125rem);   /* 12→13              */
  --fs-sm:   clamp(0.875rem,  0.85rem + 0.12vw, 0.9375rem);   /* 14→15              */
  --fs-base: clamp(1rem,      0.96rem + 0.20vw, 1.125rem);    /* 16→18  corpo       */
  --fs-lg:   clamp(1.125rem,  1.06rem + 0.30vw, 1.3125rem);   /* 18→21  lead        */
  --fs-xl:   clamp(1.25rem,   1.14rem + 0.55vw, 1.625rem);    /* 20→26  h4/h3 card  */
  --fs-2xl:  clamp(1.5rem,    1.28rem + 1.00vw, 2.125rem);    /* 24→34  h3          */
  --fs-3xl:  clamp(1.875rem,  1.45rem + 1.90vw, 3.125rem);    /* 30→50  h2          */
  --fs-4xl:  clamp(2.25rem,   1.60rem + 2.90vw, 4rem);        /* 36→64  h2 grande   */
  --fs-5xl:  clamp(2.75rem,   1.55rem + 5.10vw, 5.5rem);      /* 44→88  h1 hero     */
  --fs-stat: clamp(2.5rem,    1.70rem + 3.40vw, 4.5rem);      /* números de impacto */

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-title: 1.28;
  --lh-body:  1.7;
  --lh-long:  1.85;       /* artigos */

  --ls-tight:  -0.035em;  /* h1/h2 */
  --ls-snug:   -0.02em;
  --ls-normal: 0;
  --ls-caps:   0.16em;    /* eyebrows mono */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-xbold:   800;

  /* ---------- 4. ESPAÇO · grade 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.25rem;  /* 20 */
  --sp-6: 1.5rem;   /* 24 */
  --sp-8: 2rem;     /* 32 */
  --sp-10: 2.5rem;  /* 40 */
  --sp-12: 3rem;    /* 48 */
  --sp-16: 4rem;    /* 64 */
  --sp-20: 5rem;    /* 80 */
  --sp-24: 6rem;    /* 96 */
  --sp-32: 8rem;    /* 128 */
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);   /* respiro vertical de seção */
  --gutter:    clamp(1.25rem, 0.8rem + 2vw, 2.5rem);

  /* ---------- 5. LAYOUT ---------- */
  --container:      80rem;     /* 1280 — max-w-7xl do original */
  --container-wide: 90rem;
  --container-text: 46rem;     /* ~736 — leitura */
  --container-narrow: 62rem;
  --header-h: 4.5rem;

  /* Breakpoints (referência — media queries não aceitam var()) */
  --bp-sm: 480px;  --bp-md: 768px;  --bp-lg: 1024px;  --bp-xl: 1280px;

  /* ---------- 6. FORMA ---------- */
  --r-xs:   4px;      /* radius original do site */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-xl:   26px;
  --r-pill: 999px;

  --bw-hairline: 1px;
  --bw-accent:   2px;   /* bordas-acento do original (borderTop 2px azul) */

  /* ---------- 7. ELEVAÇÃO ---------- */
  --shadow-1: 0 1px 2px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.25);
  --shadow-2: 0 8px 24px -8px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.3);
  --shadow-3: 0 24px 60px -24px rgba(0,0,0,.7), 0 8px 20px -8px rgba(0,0,0,.4);
  --shadow-glow:   0 0 0 1px var(--border-brand), 0 18px 50px -18px var(--brand-glow);
  --shadow-brand:  0 10px 30px -10px rgba(37,99,235,.65), inset 0 1px 0 rgba(255,255,255,.22);
  --shadow-inset:  inset 0 1px 0 rgba(255,255,255,.06);

  /* ---------- 8. MOVIMENTO ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);       /* entradas */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);       /* transições longas */
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);    /* micro-feedback */
  --dur-fast:   150ms;
  --dur-base:   300ms;
  --dur-slow:   650ms;
  --dur-reveal: 900ms;
  --stagger:    80ms;
  --enter-y:    28px;

  /* ---------- 9. CAMADAS ---------- */
  --z-base: 1;
  --z-content: 10;
  --z-sticky: 50;
  --z-header: 100;
  --z-float: 150;     /* WhatsApp */
  --z-modal: 200;
  --z-toast: 300;
  --z-progress: 400;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-base: 1ms; --dur-slow: 1ms; --dur-reveal: 1ms; --stagger: 0ms; --enter-y: 0px; }
}