/* ============================================================
   NEUROBOX DESIGN TOKENS — v2.0.0
   Fonte canônica: design-system/webportal/index.html
   Uso: @import url('tokens.css') ou link no HTML
   ============================================================ */

:root {
  /* ============================================================
     1. CORES DO ECOSSISTEMA
     ============================================================ */
  --cyan:          #38bdf8;
  --cyan-light:    #7dd3fc;
  --cyan-dark:     #0ea5e9;
  --pink:          #ec4899;
  --pink-dark:     #db2777;
  --purple:        #a855f7;
  --purple-dark:   #7c3aed;
  --fuchsia:       #d946ef;
  --fuchsia-dark:  #a21caf;
  --amber:         #f59e0b;
  --orange:        #f97316;
  --red:           #ef4444;
  --green:         #10b981;
  --teal:          #06b6d4;

  /* -- Surfaces ------------------------------------------------ */
  --bg:            #030208;
  --bg-surface:    #09080f;
  --bg-card:       rgba(13,12,22,0.6);
  --bg-glass:      rgba(255,255,255,0.03);
  --bg-hover:      rgba(255,255,255,0.05);
  --bg-active:     rgba(56,189,248,0.1);

  /* -- Borders ------------------------------------------------- */
  --border:        rgba(255,255,255,0.07);
  --border-hover:  rgba(255,255,255,0.14);
  --border-cyan:   rgba(56,189,248,0.2);
  --border-pink:   rgba(236,72,153,0.2);
  --border-purple: rgba(168,85,247,0.2);

  /* -- Text ----------------------------------------------------- */
  --text:          #f1f0f8;
  --text-muted:    #7b7e8c;

  /* ============================================================
     2. GRADIENTS
     ============================================================ */
  --gradient-cyan:       linear-gradient(135deg, #0ea5e9, #38bdf8);
  --gradient-pink:       linear-gradient(135deg, #db2777, #ec4899);
  --gradient-purple:     linear-gradient(135deg, #7c3aed, #a855f7);
  --gradient-grad:       linear-gradient(135deg, #38bdf8, #a855f7, #ec4899);
  --gradient-neurobox:   linear-gradient(135deg, #38bdf8, #ec4899);
  --gradient-brain:      linear-gradient(135deg, #a855f7, #38bdf8);
  --gradient-link:       linear-gradient(135deg, #38bdf8, #a855f7);
  --gradient-cos:        linear-gradient(135deg, #d946ef, #ec4899);

  /* ============================================================
     3. TYPOGRAPHY
     ============================================================ */
  --font-display:  'Outfit', sans-serif;
  --font-sans:     'Plus Jakarta Sans', sans-serif;
  --font-mono:     'JetBrains Mono', monospace;

  --text-xs:    0.75rem;    /* 12px */
  --text-sm:    0.875rem;   /* 14px */
  --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 */

  --weight-normal:  400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   900;

  /* ============================================================
     4. SPACING (match webportal)
     ============================================================ */
  --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;

  /* ============================================================
     5. BORDER RADIUS (match webportal)
     ============================================================ */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-md:   14px;
  --radius-lg:   20px;
  --radius-xl:   28px;
  --radius-full: 9999px;

  /* ============================================================
     6. SHADOWS & GLOW (match webportal)
     ============================================================ */
  --shadow-sm:   0 1px 3px rgba(0,0,0,0.4);
  --shadow:      0 4px 16px rgba(0,0,0,0.5);
  --shadow-lg:   0 20px 40px rgba(0,0,0,0.6);
  --glow-cyan:   0 0 20px rgba(56,189,248,0.3);
  --glow-pink:   0 0 20px rgba(236,72,153,0.3);
  --glow-purple: 0 0 20px rgba(168,85,247,0.3);

  /* ============================================================
     7. TRANSITIONS
     ============================================================ */
  --transition:  all 0.2s ease;

  /* ============================================================
     8. LAYOUT
     ============================================================ */
  --sidebar-w:     264px;
  --navbar-h:      64px;
  --content-max:   1060px;
}