/* ==================================================================
   tokens.css — Design System Unificado FUZZALAB
   ==================================================================
   Camada base de design tokens. Carregar ANTES do CSS de cada projeto.
   Cada projeto pode sobrescrever estes valores no seu próprio :root.

   Uso:
     <link href="/css/tokens.css" rel="stylesheet">
     <link href="css/project.css" rel="stylesheet">  (← seus overrides)
   ================================================================== */

/* ===== LIGHT THEME (default) ===== */
:root {

  /* -- Legacy aliases (templates compatibility) -- */
  --bg:              #ffffff;
  --bg2:             #f8f8f8;
  --bg3:             #f0f0f0;
  --text:            #1a1a1a;
  --text-dim:        #666666;
  --green:           #16a34a;
  --green-rgb:       22, 163, 74;
  --green-dim:       #86efac;
  --amber:           #d97706;
  --cyan:            #0ea5e9;
  --card-bg:         var(--bg-card);
  --border-subtle:   rgba(0,0,0,.06);
  --nav-accent:      #16a34a;
  --purple:          #7c3aed;
  --red:             #ef4444;
  --orange:          #f59e0b;

  /* -- Background hierarchy -- */
  --bg-page:         #ffffff;
  --bg-surface:      #f8f8f8;
  --bg-card:         #ffffff;
  --bg-card-hover:   #f0f0f0;
  --bg-input:        #fafafa;
  --bg-overlay:      rgba(0,0,0,.5);
  --bg-badge:        #f0f0f0;
  --bg-progress:     #e5e5e5;

  /* -- Text hierarchy -- */
  --text-primary:    #1a1a1a;
  --text-secondary:  #666666;
  --text-muted:      #999999;
  --text-on-accent:  #ffffff;

  /* -- Accent / Brand -- */
  --accent:          #16a34a;
  --accent-hover:    #15803d;
  --accent-dim:      #86efac;
  --accent-bg:       rgba(22,163,74,.08);

  /* -- Semantic -- */
  --success:         #16a34a;
  --warning:         #f59e0b;
  --danger:          #ef4444;
  --info:            #0ea5e9;

  /* -- Borders -- */
  --border:          #e5e5e5;
  --border-light:    #f0f0f0;
  --border-focus:    #16a34a;

  /* -- Shadows -- */
  --shadow-sm:       0 1px 2px rgba(0,0,0,.04);
  --shadow:          0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow-md:       0 4px 6px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.04);
  --shadow-lg:       0 10px 15px rgba(0,0,0,.08), 0 4px 6px rgba(0,0,0,.04);
  /* -- Radii -- */
  --radius-sm:       4px;
  --radius:          8px;
  --radius-md:       12px;
  --radius-lg:       16px;
  --radius-full:     9999px;

  /* -- Typography -- */
  --font-sans:       -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono:       'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', Consolas, monospace;
  --font-display:    'Space Grotesk', var(--font-sans);

  /* -- Transitions -- */
  --transition-fast: 150ms ease;
  --transition:      250ms ease;
  --transition-slow: 350ms ease;

  /* -- Spacing scale -- */
  --space-xs:        4px;
  --space-sm:        8px;
  --space:           16px;
  --space-md:        24px;
  --space-lg:        32px;
  --space-xl:        48px;

  /* -- Layout -- */
  --max-width:       1200px;
  --topbar-height:   36px;

  /* -- Scanline (hacker aesthetic) — default off -- */
  --scan:            transparent;
}

/* ===== DARK THEME ===== */
[data-theme="dark"] {
  --bg-page:         #000000;
  --bg-surface:      #0a0a0a;
  --bg-card:         #111111;
  --bg-card-hover:   #1a1a1a;
  --bg-input:        #141414;
  --bg-overlay:      rgba(0,0,0,.7);
  --bg-badge:        #1a1a1a;
  --bg-progress:     #222222;

  --text-primary:    #e5e5e5;
  --text-secondary:  #888888;
  --text-muted:      #555555;
  --text-on-accent:  #000000;

  --accent:          #4ade80;
  --accent-hover:    #22c55e;
  --accent-dim:      #166534;
  --accent-bg:       rgba(74,222,128,.08);

  --success:         #4ade80;
  --warning:         #fbbf24;
  --danger:          #f87171;
  --info:            #38bdf8;

  --border:          #222222;
  --border-light:    #1a1a1a;
  --border-focus:    #4ade80;

  --shadow-sm:       0 1px 2px rgba(255,255,255,.02);
  --shadow:          0 1px 3px rgba(255,255,255,.03), 0 1px 2px rgba(255,255,255,.02);
  --shadow-md:       0 4px 6px rgba(255,255,255,.04), 0 2px 4px rgba(255,255,255,.03);
  --shadow-lg:       0 10px 15px rgba(255,255,255,.05), 0 4px 6px rgba(255,255,255,.04);

  --border-focus:    #4ade80;

  /* -- Legacy aliases (templates compatibility) -- */
  --bg:              #000000;
  --bg2:             #0a0a0a;
  --bg3:             #1a1a1a;
  --text:            #e5e5e5;
  --text-dim:        #888888;
  --green:           #00ff41;
  --green-rgb:       0, 255, 65;
  --green-dim:       #00cc33;
  --amber:           #ffb000;
  --cyan:            #00ccff;
  --card-bg:         var(--bg-card);
  --border-subtle:   rgba(255,255,255,.04);
  --nav-accent:      #4ade80;
  --purple:          #a78bfa;
  --red:             #ef4444;
  --orange:          #f59e0b;
}

/* ===== Element resets ===== */
mark {
  background: var(--accent-bg, rgba(74,222,128,.15));
  color: var(--accent, #4ade80);
  padding: 1px 4px;
  border-radius: 3px;
}