/* ==========================================================================
   EDISON — Educational Intelligence Operating Network
   Design Tokens (Alien-Tech White & Dark Variant)
   ========================================================================== */

:root {
  /* -------------------------------------------------------------------------
     3.2.1 Core Canvas Palette (Alien-Tech Cool Pearl Canvas)
     ------------------------------------------------------------------------- */
  --canvas-base: #F4F6FA;
  --canvas-pearl: #FAFBFD;
  --canvas-mist: #ECEFF5;
  --canvas-glass: rgba(255, 255, 255, 0.72);
  --canvas-glass-strong: rgba(255, 255, 255, 0.88);

  /* -------------------------------------------------------------------------
     3.2.2 Text Palette
     ------------------------------------------------------------------------- */
  --text-primary: #0B1220;
  --text-secondary: #3F4A5F;
  --text-muted: #7A8499;
  --text-faint: #A8B0C0;
  --text-inverse: #FAFBFD;

  /* -------------------------------------------------------------------------
     3.2.3 Accent: Electric Blue (Primary Interactive Accent)
     ------------------------------------------------------------------------- */
  --accent-blue: #2E5BFF;
  --accent-blue-bright: #4D74FF;
  --accent-blue-deep: #1A3FCC;
  --accent-blue-glow: rgba(46, 91, 255, 0.18);
  --accent-blue-glow-strong: rgba(46, 91, 255, 0.32);

  /* -------------------------------------------------------------------------
     3.2.4 Accent: Violet (Intelligence & Prediction Accent)
     ------------------------------------------------------------------------- */
  --accent-violet: #7C3AED;
  --accent-violet-bright: #9D5CFF;
  --accent-violet-deep: #5B21B6;
  --accent-violet-glow: rgba(124, 58, 237, 0.18);
  --accent-violet-glow-strong: rgba(124, 58, 237, 0.32);

  /* -------------------------------------------------------------------------
     3.2.5 Semantic Status Colors
     ------------------------------------------------------------------------- */
  --status-success: #00B884;
  --status-success-glow: rgba(0, 184, 132, 0.20);
  --status-warning: #F5A623;
  --status-warning-glow: rgba(245, 166, 35, 0.20);
  --status-danger: #E84545;
  --status-danger-glow: rgba(232, 69, 69, 0.20);
  --status-info: #00B8D9;
  --status-info-glow: rgba(0, 184, 217, 0.20);

  /* -------------------------------------------------------------------------
     3.2.6 Holographic Gradient
     ------------------------------------------------------------------------- */
  --gradient-holo: linear-gradient(
    135deg,
    rgba(46, 91, 255, 0.08) 0%,
    rgba(124, 58, 237, 0.06) 50%,
    rgba(0, 184, 217, 0.05) 100%
  );
  --gradient-holo-surface: linear-gradient(
    135deg,
    rgba(46, 91, 255, 0.04) 0%,
    rgba(124, 58, 237, 0.03) 50%,
    rgba(0, 184, 217, 0.02) 100%
  );

  /* -------------------------------------------------------------------------
     3.3 Typography: Font Families & Modular Scale (1.200 Minor Third, 14px)
     ------------------------------------------------------------------------- */
  --font-display: "Space Grotesk", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", "Fira Code", Menlo, monospace;

  --text-xs: 11px;
  --text-sm: 13px;
  --text-base: 14px;
  --text-md: 17px;
  --text-lg: 21px;
  --text-xl: 26px;
  --text-2xl: 34px;
  --text-3xl: 44px;

  --leading-xs: 1.45;
  --leading-sm: 1.5;
  --leading-base: 1.6;
  --leading-md: 1.45;
  --leading-lg: 1.35;
  --leading-xl: 1.25;
  --leading-2xl: 1.15;
  --leading-3xl: 1.1;

  /* -------------------------------------------------------------------------
     3.4 Spatial System (Base 4px multiples)
     ------------------------------------------------------------------------- */
  --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;

  /* -------------------------------------------------------------------------
     3.5 Shape & Surface: Radii, Hairline Borders & Cool Shadows
     ------------------------------------------------------------------------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-pill: 999px;

  --border-hairline: 1px solid rgba(11, 18, 32, 0.08);
  --border-strong: 1px solid rgba(11, 18, 32, 0.14);
  --border-accent: 1px solid rgba(46, 91, 255, 0.32);
  --border-violet: 1px solid rgba(124, 58, 237, 0.32);
  --border-glow: 1px solid rgba(46, 91, 255, 0.48);

  --shadow-float: 0 1px 2px rgba(11, 18, 32, 0.04), 0 4px 12px rgba(11, 18, 32, 0.04);
  --shadow-pop: 0 4px 8px rgba(11, 18, 32, 0.06), 0 12px 32px rgba(11, 18, 32, 0.08);
  --shadow-glow-blue: 0 0 0 1px rgba(46, 91, 255, 0.24), 0 0 24px rgba(46, 91, 255, 0.18);
  --shadow-glow-violet: 0 0 0 1px rgba(124, 58, 237, 0.24), 0 0 24px rgba(124, 58, 237, 0.18);
  --focus-ring: 0 0 0 3px var(--accent-blue-glow-strong);

  /* -------------------------------------------------------------------------
     Foundation Controls
     ------------------------------------------------------------------------- */
  --scrollbar-thumb: rgba(11, 18, 32, 0.14);
  --scrollbar-thumb-hover: var(--accent-blue);
  --loader-bar-width: 120px;
  --loader-bar-height: 1px;

  /* -------------------------------------------------------------------------
     3.6 Micro-Grid Pattern
     ------------------------------------------------------------------------- */
  --grid-pattern:
    linear-gradient(rgba(11, 18, 32, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 18, 32, 0.025) 1px, transparent 1px);
  --grid-size: 24px;

  /* -------------------------------------------------------------------------
     3.7 Motion Language: Easing and Durations
     ------------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in: cubic-bezier(0.7, 0, 0.84, 0);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  --dur-instant: 80ms;
  --dur-quick: 160ms;
  --dur-base: 240ms;
  --dur-deliberate: 400ms;
  --dur-cinematic: 800ms;

  /* -------------------------------------------------------------------------
     Layout Shell Metrics
     ------------------------------------------------------------------------- */
  --command-bar-height: 56px;
  --status-bar-height: 28px;
  --sidebar-width-expanded: 260px;
  --sidebar-width-collapsed: 88px;
  --stage-max-width: 1440px;
}

/* ---------------------------------------------------------------------------
   3.2.7 Dark Variant (Applied via data-theme="dark" attribute on <html>)
   --------------------------------------------------------------------------- */
[data-theme="dark"] {
  --canvas-base: #0A0E1A;
  --canvas-pearl: #121829;
  --canvas-mist: #1A2238;
  --canvas-glass: rgba(18, 24, 41, 0.78);
  --canvas-glass-strong: rgba(18, 24, 41, 0.92);

  --text-primary: #E8ECF5;
  --text-secondary: #A8B0C5;
  --text-muted: #6B7791;
  --text-faint: #444E66;
  --text-inverse: #0B1220;

  --border-hairline: 1px solid rgba(255, 255, 255, 0.08);
  --border-strong: 1px solid rgba(255, 255, 255, 0.14);
  --border-accent: 1px solid rgba(77, 116, 255, 0.36);
  --border-violet: 1px solid rgba(157, 92, 255, 0.36);
  --border-glow: 1px solid rgba(77, 116, 255, 0.52);

  --shadow-float: 0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 16px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 4px 12px rgba(0, 0, 0, 0.5), 0 16px 36px rgba(0, 0, 0, 0.45);
  --scrollbar-thumb: rgba(255, 255, 255, 0.16);

  --grid-pattern:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
}

/* Density Settings */
[data-density="compact"] {
  --space-4: 12px;
  --space-5: 16px;
  --space-6: 20px;
  --space-12: 36px;
}

[data-density="spacious"] {
  --space-4: 20px;
  --space-5: 26px;
  --space-6: 32px;
  --space-12: 56px;
}