/*
 * WWin Design System — Tokens
 * Fonte de verdade de todas as variáveis CSS.
 * Nunca use valores hardcoded no projeto — referencie sempre estes tokens.
 * Baseado no MIV W.WIN + atualizações premium 2025.
 */

:root {

  /* =========================================================
   * FONTES
   * ========================================================= */

  --font-heading: "Giga Sans", Arial, Helvetica, sans-serif;
  --font-body:    "Inter", Arial, Helvetica, sans-serif;
  --font-mono:    "JetBrains Mono", "Fira Code", "Courier New", monospace;

  /* =========================================================
   * CORES — Paleta Navy (backgrounds escuros MIV)
   * ========================================================= */

  --color-navy-950: #020817;   /* Quase preto — profundidade máxima */
  --color-navy-900: #06142e;   /* Deep Navy — hero, topo */
  --color-navy-800: #0b1f3f;   /* Navy escuro — superfícies */
  --color-navy-700: #123461;   /* Navy médio — cards, borders */
  --color-navy-600: #213864;   /* Blue brand — borders, hovers */
  --color-navy-500: #264789;   /* Blue Navy — links, interativos */
  --color-navy-400: #234687;   /* Blue — variante de interação */

  /* Alias semântico da cor de marca */
  --color-blue-brand: #213864;

  /* =========================================================
   * CORES — Azul Claro (Clareza)
   * ========================================================= */

  --color-blue-300: #8CABD6;   /* Azul Claro MIV — texto secundário */
  --color-blue-200: #97B3DD;   /* Variante — ícones, destaques */
  --color-blue-100: #C1D6FF;   /* Ultra-claro — highlights */

  /* =========================================================
   * CORES — Acento
   * ========================================================= */

  --color-accent:       #3E81FF;              /* CTA, interativos */
  --color-accent-hover: #264789;              /* Hover do accent */
  --color-accent-light: rgba(62,129,255,0.15);/* Accent translúcido */

  /* =========================================================
   * CORES — Escala de Cinza
   * ========================================================= */

  --color-gray-950: #111111;
  --color-gray-900: #1f2933;
  --color-gray-700: #4b5563;
  --color-gray-500: #6b7280;
  --color-gray-300: #d1d5db;
  --color-gray-200: #e5e7eb;
  --color-gray-100: #f3f4f6;
  --color-gray-50:  #f8fafc;

  /* =========================================================
   * CORES — Neutro Quente (legado MIV)
   * ========================================================= */

  --color-warm-950: #3F2021;   /* Cinza Chumbo (Sofisticação) MIV */
  --color-warm-900: #282828;   /* Charcoal — texto sobre fundos claros */
  --color-warm-800: #313131;
  --color-warm-700: #3A3A3A;
  --color-warm-600: #424242;
  --color-warm-400: #D8D8D8;
  --color-warm-200: #EFEFEF;

  /* =========================================================
   * CORES — Funcionais
   * ========================================================= */

  --color-white:   #FFFFFF;
  --color-black:   #000000;
  --color-success: #26AE60;
  --color-warning: #E67E21;
  --color-danger:  #BF382A;
  --color-info:    #5278CB;

  /* =========================================================
   * TEXTO — Tokens semânticos duais (claro + escuro)
   * ========================================================= */

  /* Uso em fundos escuros (dark/navy/gradient) */
  --text-inverse:       #FFFFFF;
  --text-inverse-muted: rgba(255, 255, 255, 0.72);

  /* Uso em fundos claros (white/light/muted) */
  --text-primary:   #101828;
  --text-secondary: #475467;
  --text-muted:     #667085;
  --text-disabled:  #98a2b3;

  /* =========================================================
   * TEXTO — Aliases para componentes (padrão escuro)
   * ========================================================= */

  --color-text-primary:   var(--color-white);
  --color-text-secondary: var(--color-blue-300);
  --color-text-muted:     var(--color-blue-200);
  --color-text-disabled:  var(--color-navy-500);

  /* =========================================================
   * BACKGROUNDS — Semânticos
   * ========================================================= */

  /* Fundos escuros (padrão do site) */
  --color-bg-primary:   var(--color-navy-950);
  --color-bg-secondary: var(--color-navy-900);
  --color-bg-elevated:  var(--color-navy-800);
  --color-bg-surface:   var(--color-navy-600);

  /* Fundos claros */
  --bg-white: #ffffff;
  --bg-light: #f8fafc;
  --bg-muted: #eef2f7;

  /* Fundos escuros (aliases diretos para seções) */
  --bg-dark:  #020817;
  --bg-navy:  #06142e;

  /* =========================================================
   * BORDERS
   * ========================================================= */

  --color-border:        var(--color-navy-600);
  --color-border-subtle: var(--color-navy-700);
  --color-border-strong: var(--color-blue-300);

  /* =========================================================
   * GRADIENTES INSTITUCIONAIS
   * ========================================================= */

  --linear-1: linear-gradient(142deg, #000000 21.85%, #213864 115.65%);
  --linear-2: linear-gradient(127deg, #000000 28.65%, #666666 169.3%);

  /* =========================================================
   * TIPOGRAFIA — Pesos
   * ========================================================= */

  --font-weight-light:   300;
  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-bold:    700;
  --font-weight-xbold:   800;

  /* =========================================================
   * TIPOGRAFIA — Escala de Tamanhos
   * ========================================================= */

  --text-xs:   0.6875rem;  /* 11px */
  --text-sm:   0.8125rem;  /* 13px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-7xl:  4.5rem;     /* 72px */
  --text-8xl:  6rem;       /* 96px */

  /* =========================================================
   * TIPOGRAFIA — Line Heights e Letter Spacing
   * ========================================================= */

  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.5;
  --leading-relaxed: 1.6;
  --leading-loose:   1.8;

  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.03em;
  --tracking-snug:    -0.02em;
  --tracking-normal:   0em;
  --tracking-wide:     0.04em;
  --tracking-wider:    0.08em;
  --tracking-widest:   0.12em;

  /* =========================================================
   * ESPAÇAMENTO — Grid base 4px
   * ========================================================= */

  --space-1:  0.25rem;   /* 4px  */
  --space-2:  0.5rem;    /* 8px  */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-7:  1.75rem;   /* 28px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-14: 3.5rem;    /* 56px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-28: 7rem;      /* 112px */
  --space-32: 8rem;      /* 128px */
  --space-40: 10rem;     /* 160px */
  --space-48: 12rem;     /* 192px */

  /* =========================================================
   * BORDER RADIUS
   * ========================================================= */

  --radius-none: 0px;
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-2xl:  48px;
  --radius-full: 999px;

  /* =========================================================
   * SOMBRAS — Suaves e Premium
   * ========================================================= */

  --shadow-soft:      0 12px 32px rgba(0, 0, 0, 0.08);
  --shadow-medium:    0 18px 48px rgba(0, 0, 0, 0.12);
  --shadow-premium:   0 24px 70px rgba(0, 0, 0, 0.16);
  --shadow-glow-blue: 0 0 42px rgba(33, 56, 100, 0.22);

  /* Legado — mantidos para backward compatibility */
  --shadow-sm:     0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-md:     0 6px 20px rgba(0, 0, 0, 0.14);
  --shadow-lg:     var(--shadow-medium);
  --shadow-xl:     var(--shadow-premium);
  --shadow-glow:   0 0 24px rgba(140, 171, 214, 0.12);
  --shadow-accent: 0 4px 20px rgba(62, 129, 255, 0.22);

  /* =========================================================
   * TRANSIÇÕES — Premium
   * ========================================================= */

  --ease-premium:    cubic-bezier(0.22, 1, 0.36, 1);
  --transition-fast: 200ms var(--ease-premium);
  --transition-base: 320ms var(--ease-premium);
  --transition-slow: 480ms var(--ease-premium);
  --transition-enter: 600ms var(--ease-premium);

  /* =========================================================
   * Z-INDEX — Camadas
   * ========================================================= */

  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  300;
  --z-modal:    400;
  --z-toast:    500;

  /* =========================================================
   * LAYOUT
   * ========================================================= */

  --container-max:     1180px;
  --container-padding: clamp(20px, 4vw, 48px);

  /* Legado */
  --container-pad-x: clamp(20px, 4vw, 48px);
  --grid-cols:        12;
  --grid-gap:         clamp(20px, 3vw, 32px);

  /* =========================================================
   * BREAKPOINTS (referência — use via media queries)
   * ========================================================= */

  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1536px;
}