/* ============================================================
   SysMasters Design System — Colors & Typography
   ============================================================
   Theme: "Neon Circuit" — dark, futuristic, WebGL-ready
   Vibe: cyberpunk-tech meets premium agency
   ============================================================ */

/* ---- FONTS ---- */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Instrument+Serif:ital@0;1&display=swap');

:root {
  /* ============================================================
     COLOR — Primitives
     ============================================================ */

  /* Base (near-black with cool shift) */
  --sm-ink-950: #050510;    /* deepest bg */
  --sm-ink-900: #0a0a18;    /* default bg */
  --sm-ink-850: #0f0f22;    /* raised bg */
  --sm-ink-800: #14142b;    /* card */
  --sm-ink-700: #1c1c3a;    /* card hover */
  --sm-ink-600: #262650;    /* border strong */
  --sm-ink-500: #35356b;    /* border */
  --sm-ink-400: #4a4a8a;    /* border muted */
  --sm-ink-300: #6e6eb0;    /* text disabled */
  --sm-ink-200: #9b9bd0;    /* text muted */
  --sm-ink-100: #c5c5e8;    /* text secondary */
  --sm-ink-50:  #e8e8f7;    /* text primary */
  --sm-ink-0:   #ffffff;    /* pure */

  /* Signature — Electric Mint (primary accent) */
  --sm-mint-950: #002820;
  --sm-mint-700: #00a881;
  --sm-mint-500: #00ffc8;   /* ⭐ primary */
  --sm-mint-300: #7dffde;
  --sm-mint-100: #d0fff0;

  /* Signature — Cyber Cyan (secondary accent) */
  --sm-cyan-950: #001f33;
  --sm-cyan-700: #0099cc;
  --sm-cyan-500: #00d4ff;   /* ⭐ secondary */
  --sm-cyan-300: #7de5ff;
  --sm-cyan-100: #d0f2ff;

  /* Signature — Plasma Lime (tertiary / highlights) */
  --sm-lime-950: #1a2600;
  --sm-lime-700: #65cc00;
  --sm-lime-500: #7dff00;   /* ⭐ tertiary */
  --sm-lime-300: #c0ff7d;
  --sm-lime-100: #ecffd0;

  /* Magenta — rare use, for warnings / "hot" callouts */
  --sm-magenta-500: #ff2a8a;

  /* Semantic */
  --sm-success: var(--sm-mint-500);
  --sm-info:    var(--sm-cyan-500);
  --sm-warning: #ffb800;
  --sm-danger:  #ff3860;

  /* ============================================================
     COLOR — Semantic tokens
     ============================================================ */
  --bg-canvas:     var(--sm-ink-950);
  --bg-page:       var(--sm-ink-900);
  --bg-raised:     var(--sm-ink-850);
  --bg-card:       var(--sm-ink-800);
  --bg-card-hover: var(--sm-ink-700);
  --bg-inset:      var(--sm-ink-950);

  --fg-1: var(--sm-ink-50);   /* primary text */
  --fg-2: var(--sm-ink-100);  /* secondary */
  --fg-3: var(--sm-ink-200);  /* muted */
  --fg-4: var(--sm-ink-300);  /* disabled */

  --border-1: var(--sm-ink-500);
  --border-2: var(--sm-ink-600);
  --border-subtle: color-mix(in oklab, var(--sm-ink-500) 40%, transparent);

  --accent:       var(--sm-mint-500);
  --accent-2:     var(--sm-cyan-500);
  --accent-3:     var(--sm-lime-500);
  --accent-on:    var(--sm-ink-950);   /* text on accent fills */

  /* Glows (cast as drop-shadows / box-shadows) */
  --glow-mint: 0 0 40px color-mix(in oklab, var(--sm-mint-500) 45%, transparent);
  --glow-cyan: 0 0 40px color-mix(in oklab, var(--sm-cyan-500) 45%, transparent);
  --glow-lime: 0 0 40px color-mix(in oklab, var(--sm-lime-500) 45%, transparent);

  /* ============================================================
     GRADIENTS
     ============================================================ */
  --grad-aurora:
    radial-gradient(60% 50% at 20% 30%, color-mix(in oklab, var(--sm-mint-500) 35%, transparent) 0%, transparent 60%),
    radial-gradient(50% 40% at 80% 20%, color-mix(in oklab, var(--sm-cyan-500) 30%, transparent) 0%, transparent 60%),
    radial-gradient(40% 40% at 60% 80%, color-mix(in oklab, var(--sm-lime-500) 20%, transparent) 0%, transparent 60%);

  --grad-signature: linear-gradient(135deg, var(--sm-mint-500) 0%, var(--sm-cyan-500) 50%, var(--sm-lime-500) 100%);
  --grad-signature-soft: linear-gradient(135deg,
    color-mix(in oklab, var(--sm-mint-500) 25%, transparent) 0%,
    color-mix(in oklab, var(--sm-cyan-500) 25%, transparent) 100%);

  --grad-edge: linear-gradient(180deg, transparent 0%, var(--sm-ink-950) 100%);

  /* ============================================================
     TYPOGRAPHY
     ============================================================ */
  --font-display: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-serif:   'Instrument Serif', 'Times New Roman', serif;

  /* Type scale — fluid, big-display-friendly */
  --fs-hero:   clamp(64px, 10vw, 160px);   /* monumental headlines */
  --fs-h1:     clamp(44px, 6vw, 88px);
  --fs-h2:     clamp(32px, 4vw, 56px);
  --fs-h3:     clamp(24px, 2.4vw, 36px);
  --fs-h4:     20px;
  --fs-body-l: 20px;
  --fs-body:   16px;
  --fs-body-s: 14px;
  --fs-micro:  12px;
  --fs-mono:   13px;
  --fs-eyebrow: 12px;

  --lh-tight:   0.92;
  --lh-display: 1.02;
  --lh-heading: 1.15;
  --lh-body:    1.55;
  --lh-loose:   1.7;

  --ls-tight:  -0.04em;
  --ls-display: -0.03em;
  --ls-normal:  0;
  --ls-wide:    0.08em;
  --ls-widest:  0.18em;

  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semi:     600;
  --fw-bold:     700;

  /* ============================================================
     SPACING
     ============================================================ */
  --sp-0:  0;
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  24px;
  --sp-6:  32px;
  --sp-7:  48px;
  --sp-8:  64px;
  --sp-9:  96px;
  --sp-10: 128px;
  --sp-11: 192px;

  /* ============================================================
     RADII
     ============================================================ */
  --r-xs: 4px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 20px;
  --r-xl: 28px;
  --r-2xl: 40px;
  --r-pill: 999px;

  /* ============================================================
     SHADOWS / ELEVATION
     ============================================================ */
  --shadow-1: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-2: 0 4px 16px rgba(0,0,0,0.45), 0 0 0 1px var(--border-subtle) inset;
  --shadow-3: 0 12px 40px rgba(0,0,0,0.55), 0 0 0 1px var(--border-subtle) inset;
  --shadow-4: 0 24px 80px rgba(0,0,0,0.65), 0 0 0 1px var(--border-subtle) inset;

  --shadow-accent:
    0 0 0 1px color-mix(in oklab, var(--sm-mint-500) 50%, transparent),
    0 8px 32px color-mix(in oklab, var(--sm-mint-500) 25%, transparent);

  /* Inner glow (sits inside cards for subtle depth) */
  --inner-hairline: inset 0 1px 0 color-mix(in oklab, var(--sm-ink-0) 8%, transparent);

  /* ============================================================
     MOTION
     ============================================================ */
  --ease-standard: cubic-bezier(0.22, 1, 0.36, 1);        /* out-quad */
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1);     /* gentle bounce */
  --ease-sharp:    cubic-bezier(0.76, 0, 0.24, 1);
  --dur-fast:   150ms;
  --dur-base:   280ms;
  --dur-slow:   500ms;
  --dur-hero:   900ms;
}

/* ============================================================
   LIGHT / DAY THEME
   ============================================================
   Applied when <html data-theme="light"> or body.theme-light
   Keeps neon accents as accents, inverts surfaces to off-white
   with a warm tint and preserves the "systems" feeling.
   ============================================================ */
[data-theme="light"], .theme-light {
  --bg-canvas:     #f4f4ee;   /* warm paper */
  --bg-page:       #fafaf5;
  --bg-raised:     #ffffff;
  --bg-card:       #ffffff;
  --bg-card-hover: #f4f4ee;
  --bg-inset:      #eeeee6;

  --fg-1: #0a0a18;
  --fg-2: #2e2e44;
  --fg-3: #5a5a76;
  --fg-4: #9696ae;

  --border-1: #d8d8cf;
  --border-2: #c4c4b8;
  --border-subtle: color-mix(in oklab, #5a5a76 15%, transparent);

  /* Slightly deepened accents for contrast on light bg */
  --accent:   #00b896;
  --accent-2: #0099cc;
  --accent-3: #5ccc00;
  --accent-on: #ffffff;

  --glow-mint: 0 0 32px color-mix(in oklab, #00b896 25%, transparent);
  --glow-cyan: 0 0 32px color-mix(in oklab, #0099cc 25%, transparent);
  --glow-lime: 0 0 32px color-mix(in oklab, #5ccc00 25%, transparent);

  --grad-aurora:
    radial-gradient(60% 50% at 20% 30%, color-mix(in oklab, #00b896 18%, transparent) 0%, transparent 60%),
    radial-gradient(50% 40% at 80% 20%, color-mix(in oklab, #0099cc 18%, transparent) 0%, transparent 60%),
    radial-gradient(40% 40% at 60% 80%, color-mix(in oklab, #5ccc00 12%, transparent) 0%, transparent 60%);

  --grad-signature: linear-gradient(135deg, #00b896 0%, #0099cc 50%, #5ccc00 100%);
  --grad-signature-soft: linear-gradient(135deg,
    color-mix(in oklab, #00b896 18%, transparent) 0%,
    color-mix(in oklab, #0099cc 18%, transparent) 100%);

  --shadow-1: 0 1px 2px rgba(10,10,24,0.06);
  --shadow-2: 0 6px 20px rgba(10,10,24,0.08), 0 0 0 1px var(--border-subtle) inset;
  --shadow-3: 0 14px 40px rgba(10,10,24,0.10), 0 0 0 1px var(--border-subtle) inset;
  --shadow-4: 0 24px 60px rgba(10,10,24,0.14), 0 0 0 1px var(--border-subtle) inset;
  --shadow-accent:
    0 0 0 1px color-mix(in oklab, #00b896 50%, transparent),
    0 8px 28px color-mix(in oklab, #00b896 20%, transparent);
  --inner-hairline: inset 0 1px 0 color-mix(in oklab, #ffffff 80%, transparent);
}

/* ============================================================
   BASE RESETS & DEFAULTS
   ============================================================ */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.sm-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  font-weight: var(--fw-medium);
  text-wrap: balance;
}
.sm-h1 {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  line-height: var(--lh-display);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-semi);
  text-wrap: balance;
}
.sm-h2 {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-semi);
  text-wrap: balance;
}
.sm-h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  font-weight: var(--fw-medium);
}
.sm-h4 {
  font-family: var(--font-display);
  font-size: var(--fs-h4);
  line-height: 1.3;
  font-weight: var(--fw-medium);
}
.sm-body { font-size: var(--fs-body); line-height: var(--lh-body); color: var(--fg-2); }
.sm-body-l { font-size: var(--fs-body-l); line-height: var(--lh-loose); color: var(--fg-2); text-wrap: pretty; }
.sm-body-s { font-size: var(--fs-body-s); line-height: var(--lh-body); color: var(--fg-3); }
.sm-micro { font-size: var(--fs-micro); line-height: 1.4; color: var(--fg-3); }
.sm-mono  { font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: 0; }
.sm-eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--accent);
  font-weight: var(--fw-medium);
}
.sm-serif-accent {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: var(--fw-regular);
}

/* Gradient text helper */
.sm-gradient-text {
  background: var(--grad-signature);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}