/* ============================================================================
 * Neuro_Nomad Portfolio — Design Tokens
 * Locked 2026-09-07. See skills/packs/portfolio-cyan-reconciliation/SKILL.md
 *
 * Palette rules:
 * - Matrix green  : "system is running" semantic ONLY (terminal, live, verified)
 * - Neon purple   : section headers, primary accents
 * - Neon blue     : links, secondary, transition zones
 * - Cyan-400      : GhostCode section only (their own theme — do NOT override)
 * - Deep black    : all backgrounds
 * - Off-white     : body text
 *
 * Shape: NO sharp corners. Heavy border-radius. Glassmorphism. Glow.
 * Typography: system stack only. No Google Fonts.
 * Motion: respects prefers-reduced-motion. No autoloop.
 * ============================================================================ */

:root {
  /* -- Core palette ---------------------------------------------------------- */

  /* Matrix green (reserved for "alive" / "system running" / "verified") */
  --green-matrix:        #00FF41;
  --green-matrix-bright: #4DFF7A;
  --green-matrix-dim:    #00B82E;
  --green-matrix-glow:   rgba(0, 255, 65, 0.4);
  --green-matrix-faint:  rgba(0, 255, 65, 0.08);

  /* Neon purple (headers, primary accents) */
  --purple-neon:         #A855F7;
  --purple-neon-bright:  #C084FC;
  --purple-neon-dim:     #7E22CE;
  --purple-neon-glow:    rgba(168, 85, 247, 0.4);
  --purple-neon-faint:   rgba(168, 85, 247, 0.08);

  /* Neon blue (links, secondary, transition) */
  --blue-neon:           #3B82F6;
  --blue-neon-bright:    #60A5FA;
  --blue-neon-dim:       #1D4ED8;
  --blue-neon-glow:      rgba(59, 130, 246, 0.4);
  --blue-neon-faint:     rgba(59, 130, 246, 0.08);

  /* Cyan-400 (GhostCode section ONLY — do not use elsewhere) */
  --cyan-ghostcode:        #22D3EE;
  --cyan-ghostcode-bright: #67E8F9;
  --cyan-ghostcode-dim:    #0891B2;
  --cyan-ghostcode-glow:   rgba(34, 211, 238, 0.4);
  --cyan-ghostcode-faint:  rgba(34, 211, 238, 0.08);

  /* Deep black (backgrounds) */
  --black-deep:          #050507;
  --black-base:          #0A0A0F;
  --black-elevated:      #11121A;
  --black-surface:       #16171F;
  --black-border:        #1F2030;
  --black-border-bright: #2A2C3F;

  /* Off-white (text) */
  --white-pure:          #FFFFFF;
  --white-off:           #E5E7EB;
  --white-muted:         #9CA3AF;
  --white-dim:           #6B7280;
  --white-faint:         #4B5563;

  /* -- Functional aliases (semantic) ----------------------------------------- */

  /* Surfaces */
  --bg-page:             var(--black-deep);
  --bg-section:          var(--black-base);
  --bg-elevated:         var(--black-elevated);
  --bg-card:             var(--black-surface);
  --bg-overlay:          rgba(10, 10, 15, 0.7);

  /* Glassmorphism */
  --glass-bg:            rgba(22, 23, 31, 0.6);
  --glass-bg-strong:     rgba(22, 23, 31, 0.85);
  --glass-border:        rgba(255, 255, 255, 0.06);
  --glass-border-bright: rgba(255, 255, 255, 0.12);

  /* Text */
  --text-primary:        var(--white-off);
  --text-secondary:      var(--white-muted);
  --text-tertiary:       var(--white-dim);
  --text-faint:          var(--white-faint);
  --text-inverse:        var(--black-deep);

  /* Accents (semantic) */
  --accent-primary:      var(--purple-neon);
  --accent-secondary:    var(--blue-neon);
  --accent-system:       var(--green-matrix);
  --accent-warning:      #F59E0B;
  --accent-error:        #EF4444;
  --accent-success:      #10B981;

  /* Per-section accents (locked) */
  --accent-hero:         var(--green-matrix);
  --accent-aide:         var(--green-matrix);
  --accent-ghostcode:    var(--cyan-ghostcode);
  --accent-vitalis:      var(--purple-neon);
  --accent-vitalis-dev:  var(--purple-neon-bright);
  --accent-cyber:        var(--blue-neon);
  --accent-lorein:       var(--green-matrix);

  /* -- Shape & spacing ------------------------------------------------------- */

  /* Border radius — NO sharp corners anywhere */
  --radius-xs:           0.375rem;   /* 6px */
  --radius-sm:           0.5rem;     /* 8px */
  --radius-md:           0.75rem;    /* 12px */
  --radius-lg:           1rem;       /* 16px */
  --radius-xl:           1.5rem;     /* 24px */
  --radius-2xl:          2rem;       /* 32px */
  --radius-3xl:          3rem;       /* 48px */
  --radius-pill:         9999px;
  --radius-blob:         42% 58% 70% 30% / 45% 30% 70% 55%;  /* organic blob shape */

  /* Spacing scale */
  --space-1:             0.25rem;
  --space-2:             0.5rem;
  --space-3:             0.75rem;
  --space-4:             1rem;
  --space-5:             1.25rem;
  --space-6:             1.5rem;
  --space-8:             2rem;
  --space-10:            2.5rem;
  --space-12:            3rem;
  --space-16:            4rem;
  --space-20:            5rem;
  --space-24:            6rem;
  --space-32:            8rem;

  /* -- Typography ------------------------------------------------------------ */

  /* System font stacks. No Google Fonts. */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter",
               "Roboto", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SF Mono", "Monaco", "Cascadia Code", "Roboto Mono",
               Consolas, "Courier New", monospace;
  --font-display: var(--font-sans);

  /* Type scale */
  --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 */
  --text-7xl:  4.5rem;      /* 72px */
  --text-8xl:  6rem;        /* 96px */
  --text-9xl:  8rem;        /* 128px */

  /* Font weights */
  --weight-normal:    400;
  --weight-medium:    500;
  --weight-semibold:  600;
  --weight-bold:      700;
  --weight-extrabold: 800;
  --weight-black:     900;

  /* Line heights */
  --leading-none:    1;
  --leading-tight:   1.15;
  --leading-snug:    1.3;
  --leading-normal:  1.5;
  --leading-relaxed: 1.7;
  --leading-loose:   2;

  /* Letter spacing */
  --tracking-tighter: -0.05em;
  --tracking-tight:   -0.025em;
  --tracking-normal:  0;
  --tracking-wide:    0.025em;
  --tracking-wider:   0.05em;
  --tracking-widest:  0.1em;

  /* -- Motion ---------------------------------------------------------------- */

  /* Durations */
  --duration-instant: 0ms;
  --duration-fast:    150ms;
  --duration-normal:  250ms;
  --duration-slow:    400ms;
  --duration-slower:  600ms;

  /* Easings */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* -- Effects --------------------------------------------------------------- */

  /* Glow shadows — section-specific */
  --glow-green:  0 0 30px var(--green-matrix-glow);
  --glow-purple: 0 0 30px var(--purple-neon-glow);
  --glow-blue:   0 0 30px var(--blue-neon-glow);
  --glow-cyan:   0 0 30px var(--cyan-ghostcode-glow);

  /* Drop shadows */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md:  0 4px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg:  0 12px 24px rgba(0, 0, 0, 0.6);
  --shadow-xl:  0 24px 48px rgba(0, 0, 0, 0.7);
  --shadow-2xl: 0 40px 80px rgba(0, 0, 0, 0.8);

  /* Backdrop blurs */
  --blur-sm:    4px;
  --blur-md:    8px;
  --blur-lg:    12px;
  --blur-xl:    16px;
  --blur-2xl:   24px;
  --blur-3xl:   40px;

  /* -- Layout ---------------------------------------------------------------- */

  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1280px;
  --container-2xl:  1536px;
  --container-max:  var(--container-xl);

  --header-height: 4.5rem;
  --section-padding-y: var(--space-24);

  /* -- Z-index scale --------------------------------------------------------- */

  --z-base:        0;
  --z-elevated:    10;
  --z-sticky:      100;
  --z-overlay:     500;
  --z-modal:       1000;
  --z-toast:       2000;
  --z-cursor:      9999;
}

/* ============================================================================
 * Reduced motion — respect user preferences
 * ============================================================================ */

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

/* ============================================================================
 * OKLCH variants (for browsers that support it)
 * These are slightly more vivid than the hex versions on wide-gamut displays.
 * ============================================================================ */

@supports (color: oklch(0% 0 0)) {
  :root {
    --green-matrix:        oklch(86% 0.27 142);
    --purple-neon:         oklch(64% 0.22 300);
    --blue-neon:           oklch(63% 0.20 250);
    --cyan-ghostcode:      oklch(80% 0.14 200);
  }
}