/* ================================================================
   BIT SYSTEM · Design Tokens
   2P Growth Lab - design system INTERNO da agência
   ----------------------------------------------------------------
   ESCOPO: tudo que a 2P produz com a cara da 2P -
   landings, propostas, pitch-decks, relatórios internos,
   social, apresentações comerciais, site institucional.

   NÃO é usado em entregas pra clientes finais.

   ARQUITETURA EM 3 CAMADAS:
     1. PRIMITIVOS   (--neon-500, --neutral-900)      → paleta crua
     2. SEMÂNTICOS   (--color-surface, --color-text)  → intenção
     3. COMPONENTES  (--btn-bg, --card-border)        → consumo

   MODOS:
     [data-theme="dark"]   → padrão (marca 2P é dark-first)
     [data-theme="light"]  → relatórios, propostas em PDF, print

   REGRA DE OURO:
     Componentes NUNCA consomem primitivos diretamente.
     Use sempre a camada semântica.
   ================================================================ */

@import url('https://fonts.googleapis.com/css2-family=VT323&family=Inconsolata:wght@400;500;600;700;800;900&display=swap');

/* ================================================================
   CAMADA 1 - PRIMITIVOS (paleta crua, nunca consumir em componente)
   ================================================================ */
:root {
  /* Escala corrigida: 900 = mais escuro/saturado, 50 = mais claro
     (convenção Tailwind/Material - familiar pros devs) */

  /* Neon (primary) */
  --neon-50:  #E6FFFB;
  --neon-100: #CBFFEF;
  --neon-200: #A4FFE5;
  --neon-300: #73FFDA;
  --neon-400: #51FFD5;
  --neon-500: #00FFD1;   /* ★ cor-assinatura 2P */
  --neon-600: #00E0B8;
  --neon-700: #00B896;
  --neon-800: #008A72;
  --neon-900: #005C4D;

  /* Fuchsia (accent) */
  --fuchsia-50:  #FFE6FF;
  --fuchsia-100: #FFC4FF;
  --fuchsia-200: #FF9AFF;
  --fuchsia-300: #FF68FF;
  --fuchsia-400: #FF48FF;
  --fuchsia-500: #FF00FF;   /* base */
  --fuchsia-600: #D900D9;
  --fuchsia-700: #A300A3;
  --fuchsia-800: #700070;
  --fuchsia-900: #400040;

  /* Tolopea (secondary / deep blue) */
  --tolopea-50:  #EAE6FF;
  --tolopea-100: #C6BCFF;
  --tolopea-200: #9B8AFF;
  --tolopea-300: #7359FF;
  --tolopea-400: #5742FF;
  --tolopea-500: #411CFF;
  --tolopea-600: #310AF7;
  --tolopea-700: #2908CF;
  --tolopea-800: #2409A9;   /* base Figma */
  --tolopea-900: #190675;

  /* Neutrals */
  --neutral-0:    #FFFFFF;
  --neutral-50:   #FAFAFA;
  --neutral-100:  #E4E4E4;
  --neutral-200:  #C9C9C9;
  --neutral-300:  #AFAEAF;
  --neutral-400:  #969595;
  --neutral-500:  #7E7C7D;
  --neutral-600:  #666465;
  --neutral-700:  #4C4A4A;
  --neutral-800:  #393838;
  --neutral-900:  #221F20;
  --neutral-950:  #100F0F;   /* preto de marca */

  /* Feedback (primitivos) */
  --green-400:  #4CFF4C;
  --green-600:  #00C853;
  --amber-400:  #FFD54C;
  --amber-600:  #FFA726;
  --red-400:    #FF7C71;
  --red-600:    #E53935;

  /* ============================================================
     CAMADA 3 - ESCALAS FUNDACIONAIS (compartilhadas entre temas)
     ============================================================ */

  /* Espaçamento - 4px base, nome numérico (multiplicador de 4px) */
  --space-0:   0;
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;
  --space-20:  80px;
  --space-24:  96px;
  --space-32:  128px;

  /* Radii - mantido baixo pra preservar estética retrô */
  --radius-none: 0;
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   12px;
  --radius-2xl:  16px;
  --radius-full: 9999px;

  /* Border widths */
  --border-1: 1px;
  --border-2: 2px;
  --border-3: 3px;
  --border-4: 4px;

  /* Sizes - ícones, hit targets */
  --size-icon-xs:   12px;
  --size-icon-sm:   16px;
  --size-icon-md:   20px;
  --size-icon-lg:   24px;
  --size-icon-xl:   32px;
  --size-icon-2xl:  48px;
  --size-hit:       44px;   /* mínimo touch */

  /* Typography - fontes */
  --font-pixel: 'VT323', 'Consolas', ui-monospace, monospace;
  --font-mono:  'Inconsolata', 'JetBrains Mono', ui-monospace, monospace;
  --font-sans:  'Inconsolata', 'JetBrains Mono', ui-monospace, monospace;

  /* Type scale */
  --fs-display:  96px;
  --fs-h1:       64px;
  --fs-h2:       48px;
  --fs-h3:       32px;
  --fs-h4:       24px;
  --fs-h5:       20px;
  --fs-body-lg:  18px;
  --fs-body:     16px;
  --fs-body-sm:  14px;
  --fs-caption:  12px;

  --lh-tight:  1;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-relax:  1.65;

  --ls-tight:    -0.02em;
  --ls-normal:   0;
  --ls-wide:     0.04em;
  --ls-overline: 0.12em;

  /* Motion - linguagem retrô */
  --motion-fast:     100ms;
  --motion-base:     200ms;
  --motion-slow:     400ms;
  --ease-pixel:      steps(8, end);      /* step-animation 8-bit */
  --ease-blink:      steps(2);
  --ease-smooth:     cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-out-back:   cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Layout */
  --container-sm:   640px;
  --container-md:   960px;
  --container-lg:   1200px;
  --container-xl:   1440px;

  /* Z-index */
  --z-base:    0;
  --z-raised:  10;
  --z-overlay: 100;
  --z-modal:   1000;
  --z-toast:   2000;

  /* Focus ring - a11y importante */
  --focus-ring: 0 0 0 3px var(--neon-500);

  /* ============================================================
     CAMADA 2 - SEMÂNTICOS · BRAND (cor-marca da 2P - fixa)
     ============================================================ */
  --brand-primary:        var(--neon-500);
  --brand-primary-hover:  var(--neon-400);
  --brand-primary-ink:    var(--neutral-950);      /* texto sobre brand */
  --brand-accent:         var(--fuchsia-500);
  --brand-accent-hover:   var(--fuchsia-400);
  --brand-deep:           var(--tolopea-800);
}

/* ================================================================
   CAMADA 2 - SEMÂNTICOS · DARK (tema padrão 2P)
   ================================================================ */
:root,
[data-theme="dark"] {
  color-scheme: dark;

  /* Surfaces */
  --color-bg:              var(--neutral-950);
  --color-surface:         var(--neutral-900);
  --color-surface-raised:  var(--neutral-800);
  --color-surface-sunken:  var(--neutral-950);
  --color-surface-invert:  var(--neutral-50);

  /* Text */
  --color-text:            var(--neutral-50);
  --color-text-muted:      var(--neutral-300);
  --color-text-subtle:     var(--neutral-500);
  --color-text-invert:     var(--neutral-950);
  --color-text-brand:      var(--brand-primary);
  --color-text-link:       var(--brand-primary);
  --color-text-link-hover: var(--brand-primary-hover);

  /* Borders */
  --color-border:          var(--neutral-800);
  --color-border-strong:   var(--neutral-700);
  --color-border-brand:    var(--brand-primary);

  /* Interactive */
  --color-action-bg:         var(--brand-primary);
  --color-action-bg-hover:   var(--brand-primary-hover);
  --color-action-text:       var(--brand-primary-ink);
  --color-action-accent-bg:  var(--brand-accent);
  --color-action-ghost-bg:   transparent;
  --color-action-ghost-border: var(--neutral-700);

  /* Feedback */
  --color-success:      var(--green-400);
  --color-success-bg:   color-mix(in srgb, var(--green-400) 15%, var(--neutral-950));
  --color-warning:      var(--amber-400);
  --color-warning-bg:   color-mix(in srgb, var(--amber-400) 15%, var(--neutral-950));
  --color-danger:       var(--red-400);
  --color-danger-bg:    color-mix(in srgb, var(--red-400) 15%, var(--neutral-950));
  --color-info:         var(--tolopea-300);
  --color-info-bg:      color-mix(in srgb, var(--tolopea-300) 15%, var(--neutral-950));

  /* Elevation (sombras sólidas pixel-style) */
  --shadow-sm:       2px 2px 0 var(--neutral-950);
  --shadow-md:       4px 4px 0 var(--neutral-950);
  --shadow-lg:       8px 8px 0 var(--neutral-950);
  --shadow-brand:    4px 4px 0 var(--brand-primary);
  --shadow-accent:   4px 4px 0 var(--brand-accent);
  --shadow-inset:    inset 0 0 0 2px var(--brand-primary);

  /* Gradientes */
  --gradient-primary:   linear-gradient(135deg, var(--brand-primary), var(--brand-accent));
  --gradient-deep:      linear-gradient(135deg, var(--brand-deep), var(--brand-accent));
  --gradient-surface:   linear-gradient(180deg, var(--neutral-900), var(--neutral-950));
}

/* ================================================================
   CAMADA 2 - SEMÂNTICOS · LIGHT (relatórios, print, docs)
   ================================================================ */
[data-theme="light"] {
  color-scheme: light;

  --color-bg:              var(--neutral-50);
  --color-surface:         var(--neutral-0);
  --color-surface-raised:  var(--neutral-0);
  --color-surface-sunken:  var(--neutral-100);
  --color-surface-invert:  var(--neutral-950);

  --color-text:            var(--neutral-950);
  --color-text-muted:      var(--neutral-700);
  --color-text-subtle:     var(--neutral-500);
  --color-text-invert:     var(--neutral-50);
  --color-text-brand:      var(--tolopea-800);       /* contraste OK em light */
  --color-text-link:       var(--tolopea-800);
  --color-text-link-hover: var(--tolopea-600);

  --color-border:          var(--neutral-200);
  --color-border-strong:   var(--neutral-300);
  --color-border-brand:    var(--tolopea-800);

  --color-action-bg:         var(--neutral-950);
  --color-action-bg-hover:   var(--tolopea-800);
  --color-action-text:       var(--brand-primary);
  --color-action-accent-bg:  var(--brand-accent);
  --color-action-ghost-bg:   transparent;
  --color-action-ghost-border: var(--neutral-300);

  --color-success:      var(--green-600);
  --color-success-bg:   color-mix(in srgb, var(--green-600) 10%, var(--neutral-0));
  --color-warning:      var(--amber-600);
  --color-warning-bg:   color-mix(in srgb, var(--amber-600) 10%, var(--neutral-0));
  --color-danger:       var(--red-600);
  --color-danger-bg:    color-mix(in srgb, var(--red-600) 10%, var(--neutral-0));
  --color-info:         var(--tolopea-600);
  --color-info-bg:      color-mix(in srgb, var(--tolopea-600) 10%, var(--neutral-0));

  --shadow-sm:       2px 2px 0 var(--neutral-950);
  --shadow-md:       4px 4px 0 var(--neutral-950);
  --shadow-lg:       8px 8px 0 var(--neutral-950);
  --shadow-brand:    4px 4px 0 var(--tolopea-800);
  --shadow-accent:   4px 4px 0 var(--brand-accent);
  --shadow-inset:    inset 0 0 0 2px var(--tolopea-800);

  --gradient-primary:   linear-gradient(135deg, var(--neon-500), var(--fuchsia-400));
  --gradient-deep:      linear-gradient(135deg, var(--tolopea-800), var(--fuchsia-500));
  --gradient-surface:   linear-gradient(180deg, var(--neutral-0), var(--neutral-100));
}

/* ================================================================
   RESET + DEFAULTS
   ================================================================ */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--color-text-link);
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-smooth);
}
a:hover { color: var(--color-text-link-hover); }

/* Focus ring global - a11y */
:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* Respeita prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ================================================================
   TYPE HELPERS
   ================================================================ */
.t-display   { font-family: var(--font-pixel); font-size: var(--fs-display); line-height: var(--lh-tight); text-transform: uppercase; letter-spacing: var(--ls-tight); }
.t-h1        { font-family: var(--font-pixel); font-size: var(--fs-h1);      line-height: var(--lh-tight); text-transform: uppercase; }
.t-h2        { font-family: var(--font-pixel); font-size: var(--fs-h2);      line-height: var(--lh-tight); text-transform: uppercase; }
.t-h3        { font-family: var(--font-mono);  font-weight: 700; font-size: var(--fs-h3); line-height: var(--lh-snug); }
.t-h4        { font-family: var(--font-mono);  font-weight: 700; font-size: var(--fs-h4); line-height: var(--lh-snug); }
.t-h5        { font-family: var(--font-mono);  font-weight: 600; font-size: var(--fs-h5); line-height: var(--lh-snug); }
.t-body-lg   { font-family: var(--font-mono);  font-size: var(--fs-body-lg); line-height: var(--lh-relax); }
.t-body      { font-family: var(--font-mono);  font-size: var(--fs-body);    line-height: var(--lh-normal); }
.t-body-sm   { font-family: var(--font-mono);  font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.t-caption   { font-family: var(--font-mono);  font-weight: 600; font-size: var(--fs-caption); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.t-overline  { font-family: var(--font-mono);  font-weight: 500; font-size: var(--fs-caption); letter-spacing: var(--ls-overline); text-transform: uppercase; color: var(--color-text-subtle); }

.t-pixel     { font-family: var(--font-pixel); text-transform: uppercase; }
.t-mono      { font-family: var(--font-mono); }

/* Color helpers semânticos */
.c-text       { color: var(--color-text); }
.c-muted      { color: var(--color-text-muted); }
.c-subtle     { color: var(--color-text-subtle); }
.c-brand      { color: var(--color-text-brand); }
.c-accent     { color: var(--brand-accent); }
.c-success    { color: var(--color-success); }
.c-warning    { color: var(--color-warning); }
.c-danger     { color: var(--color-danger); }

/* ================================================================
   EFFECTS · scanlines, pixel-cursor (assinatura da marca)
   ================================================================ */
.fx-scanlines { position: relative; }
.fx-scanlines::after {
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(180deg, rgba(0,0,0,0.12) 0 2px, transparent 2px 4px);
  opacity: .3;
}

.fx-cursor::after {
  content: "▊";
  display: inline-block;
  margin-left: 0.1em;
  color: var(--brand-primary);
  animation: bit-blink 1s var(--ease-blink) infinite;
}
@keyframes bit-blink { 50% { opacity: 0; } }

.fx-pixelate { image-rendering: pixelated; }

/* ================================================================
   ALIASES DE COMPATIBILIDADE - v1 → v2
   Mantém páginas legadas funcionando enquanto migram para tokens
   semânticos. Remover em v3.
   ----------------------------------------------------------------
   Primitivos fixos (independem do tema)
   ================================================================ */
:root {
  --neon:         var(--neon-500);
  --fuchsia:      var(--fuchsia-500);
  --tolopea:      var(--tolopea-800);
  --neutral-black: var(--neutral-950);
  --t-fast:       var(--motion-fast);
  --t-base:       var(--motion-base);

  /* Gradiente terciário (não existe no v2 - mantido como alias) */
  --gradient-secondary: var(--gradient-deep);
  --gradient-tertiary:  linear-gradient(135deg, var(--neon-500), var(--tolopea-800));
}

/* Aliases temáticos (herdam do tema ativo) */
:root,
[data-theme="dark"],
[data-theme="light"] {
  --fg:        var(--color-text);
  --fg-muted:  var(--color-text-muted);
  --fg-subtle: var(--color-text-subtle);
  --success:   var(--color-success);
  --warning:   var(--color-warning);
  --error:     var(--color-danger);
  --error-300: var(--red-400);
}