/* ============================================================
     SYNAPTIX ECOSYSTEM DESIGN SYSTEM — token layer (TRON Grid)
     Ported from tokens/colors.css, typography.css, spacing.css,
     base/base.css. Theme: .theme-synaptix (grid green hero program).
     ============================================================ */
  :root {
    /* Brand cores */
    --synaptix:      #00843D;
    --synaptix-deep: #006B31;
    --synaptix-soft: #D4EDDD;
    --cambridge:     #F2A91B;
    --tim:           #F03E2F;

    /* Grid neutral ramp (blue-black) */
    --ink-950:#03050E; --ink-900:#080C1C; --ink-800:#101631; --ink-700:#1B2342;
    --ink-600:#2E3858; --ink-500:#4C5878; --ink-400:#7C88A6; --ink-300:#A9B3CC;
    --ink-200:#CDD4E4; --ink-100:#E3E8F2; --ink-50:#EEF2F9; --white:#FFFFFF;

    /* Semantic aliases */
    --surface-page:#EEF2F9; --surface-card:#FFFFFF; --surface-inverse:#080C1C;
    --text-primary:#080C1C; --text-secondary:#2E3858; --text-muted:#4C5878;
    --text-inverse:#EEF2F9;
    --border:#CDD4E4; --border-strong:#A9B3CC; --border-inverse:#1B2342;

    /* Active accent = Synaptix */
    --accent:#00843D; --accent-deep:#006B31; --accent-soft:#D4EDDD; --accent-contrast:#080C1C;

    /* Type */
    --font-display:'Chakra Petch', system-ui, sans-serif;
    --font-sans:'IBM Plex Sans', system-ui, -apple-system, sans-serif;
    --font-mono:'JetBrains Mono', ui-monospace, monospace;
    --text-xs:0.75rem; --text-sm:0.875rem; --text-base:1rem; --text-md:1.125rem;
    --text-lg:1.25rem; --text-xl:1.5rem; --text-2xl:1.875rem; --text-3xl:2.25rem;
    --text-4xl:3rem; --text-5xl:3.75rem; --text-6xl:4.5rem;
    --weight-extralight:200; --weight-regular:400; --weight-medium:500;
    --weight-semibold:600; --weight-bold:700;
    --leading-tight:1.12; --leading-snug:1.28; --leading-normal:1.5;
    --tracking-tight:-0.02em; --tracking-caps:0.08em;

    /* Spacing / radius / shadow */
    --space-2:0.5rem; --space-3:0.75rem; --space-4:1rem; --space-5:1.5rem;
    --space-6:2rem; --space-7:2.5rem; --space-8:3rem; --space-9:4rem;
    --space-10:5rem; --space-12:6rem;
    --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
    --shadow-md:0 4px 12px rgba(8,12,28,0.08), 0 2px 4px rgba(8,12,28,0.05);
    --shadow-lg:0 12px 28px rgba(8,12,28,0.12), 0 4px 8px rgba(8,12,28,0.06);
    --container-xl:1280px;
    --ease-out:cubic-bezier(0.22,1,0.36,1);
  }

  *,*::before,*::after { box-sizing:border-box; }
  html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
  body {
    margin:0; font-family:var(--font-sans); font-size:var(--text-base);
    line-height:var(--leading-normal); color:var(--text-primary);
    background:var(--surface-page); -webkit-font-smoothing:antialiased;
    text-rendering:optimizeLegibility; overflow-x:hidden;
  }
  h1,h2,h3,h4 {
    font-family:var(--font-display); font-weight:var(--weight-bold);
    line-height:var(--leading-tight); letter-spacing:var(--tracking-tight);
    margin:0; text-wrap:balance;
  }
  p { margin:0; text-wrap:pretty; }
  .eyebrow {
    font-family:var(--font-mono); font-size:var(--text-xs); font-weight:var(--weight-medium);
    letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--accent);
  }

  /* ---- TRON grid floor (from base.css) ---- */
  .sx-grid-floor {
    position:absolute; inset:0; overflow:hidden; pointer-events:none;
    --grid-line: color-mix(in oklab, var(--accent) 55%, transparent);
  }
  .sx-grid-floor::after {
    content:''; position:absolute; left:50%; bottom:0; width:320%; height:78%;
    transform:translateX(-50%) perspective(440px) rotateX(74deg); transform-origin:50% 100%;
    background-image:
      repeating-linear-gradient(to right,  var(--grid-line) 0 2px, transparent 2px 64px),
      repeating-linear-gradient(to bottom, var(--grid-line) 0 2px, transparent 2px 64px);
    -webkit-mask-image:linear-gradient(to top,#000 8%,transparent 92%);
    mask-image:linear-gradient(to top,#000 8%,transparent 92%);
  }
  .sx-grid-dots {
    --grid-dot: rgba(124,136,166,0.18);
    background-image:radial-gradient(var(--grid-dot) 1px, transparent 1.6px);
    background-size:26px 26px;
  }