/* ============================================
   G.R.I.P. Platform — Design Tokens
   Cognitive Simulation Neurotech UI
   ============================================ */

:root {
  /* ---- Color Palette ---- */
  --color-bg:              #0A0A0F;
  --color-bg-raised:       #12121A;
  --color-bg-elevated:     #1A1A28;
  --color-bg-overlay:      rgba(10, 10, 15, 0.85);
  --color-border:          #1E1E2E;
  --color-border-subtle:   #16161F;

  --color-accent:          #00F0FF;
  --color-accent-dim:      rgba(0, 240, 255, 0.15);
  --color-accent-muted:    rgba(0, 240, 255, 0.35);

  --color-text-primary:    #E0E0E0;
  --color-text-secondary:  #8888AA;
  --color-text-muted:      #555570;
  --color-text-inverse:    #0A0A0F;

  --color-success:         #00FF88;
  --color-success-dim:     rgba(0, 255, 136, 0.15);
  --color-warning:         #FFB800;
  --color-warning-dim:     rgba(255, 184, 0, 0.15);
  --color-error:           #FF4060;
  --color-error-dim:       rgba(255, 64, 96, 0.15);

  /* ---- Typography ---- */
  --font-mono:             'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace;
  --font-sans:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --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:              2rem;       /* 32px */
  --text-4xl:              2.5rem;     /* 40px */

  --leading-tight:         1.2;
  --leading-normal:        1.5;
  --leading-relaxed:       1.75;

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

  /* ---- Spacing (4px scale) ---- */
  --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-8:               2rem;       /* 32px */
  --space-10:              2.5rem;     /* 40px */
  --space-12:              3rem;       /* 48px */
  --space-16:              4rem;       /* 64px */
  --space-20:              5rem;       /* 80px */
  --space-24:              6rem;       /* 96px */

  /* ---- Border Radius ---- */
  --radius-sm:             4px;
  --radius-md:             8px;
  --radius-lg:             12px;
  --radius-xl:             16px;
  --radius-full:           9999px;

  /* ---- Shadows & Glows ---- */
  --shadow-sm:             0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md:             0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg:             0 8px 32px rgba(0, 0, 0, 0.6);
  --shadow-xl:             0 16px 48px rgba(0, 0, 0, 0.7);

  --glow-cyan-sm:          0 0 8px rgba(0, 240, 255, 0.3);
  --glow-cyan-md:          0 0 16px rgba(0, 240, 255, 0.25), 0 0 4px rgba(0, 240, 255, 0.5);
  --glow-cyan-lg:          0 0 32px rgba(0, 240, 255, 0.2), 0 0 8px rgba(0, 240, 255, 0.4), 0 0 2px rgba(0, 240, 255, 0.6);
  --glow-cyan-intense:     0 0 48px rgba(0, 240, 255, 0.3), 0 0 16px rgba(0, 240, 255, 0.5), 0 0 4px rgba(0, 240, 255, 0.8);

  --glow-success:          0 0 12px rgba(0, 255, 136, 0.3);
  --glow-warning:          0 0 12px rgba(255, 184, 0, 0.3);
  --glow-error:            0 0 12px rgba(255, 64, 96, 0.3);

  --text-glow-cyan:        0 0 10px rgba(0, 240, 255, 0.5);

  /* ---- Transitions ---- */
  --transition-fast:       0.15s ease;
  --transition-base:       0.2s ease;
  --transition-slow:       0.35s ease;
  --transition-color:      color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
  --transition-transform:  transform 0.2s ease;
  --transition-shadow:     box-shadow 0.2s ease;
  --transition-opacity:    opacity 0.2s ease;
  --transition-all:        all 0.2s ease;

  /* ---- Z-Index Scale ---- */
  --z-base:                0;
  --z-raised:              10;
  --z-dropdown:            100;
  --z-sticky:              200;
  --z-overlay:             300;
  --z-modal:               400;
  --z-popover:             500;
  --z-toast:               600;
  --z-tooltip:             700;
  --z-max:                 9999;

  /* ---- Layout ---- */
  --sidebar-width:         260px;
  --sidebar-collapsed:     64px;
  --header-height:         56px;
  --content-max-width:     1400px;
}