/* DMX Studio — design tokens (flattened for standalone hosting).
   Brand fonts load from Google Fonts CDN; icons from Phosphor CDN. */
@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Syne:wght@600;700;800&family=Space+Grotesk:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

/* ===== tokens/fonts.css ===== */
/* DMX Studio — Webfonts
   Loaded from Google Fonts CDN. These ARE the real brand fonts (not substitutes),
   simply CDN-hosted rather than self-hosted binaries.
   - Michroma    → display / headlines (wide, futuristic)
   - Syne        → the DMX monogram / logotype only
   - Space Grotesk → UI + body copy
   - Space Mono  → labels, code, metadata, the "terminal" voice
*/

/* ===== tokens/colors.css ===== */
/* ============================================================
   DMX STUDIO — COLOR SYSTEM
   Brand DNA: one electric accent (Acid Lime) against deep ink
   and a lime-tinted offwhite. Disciplined, high-contrast, tech.
   ============================================================ */
:root {
  /* ---- Brand primary ---------------------------------------- */
  --lime: #C6F135;          /* THE brand color. Use sparingly, with intent. */
  --lime-bright: #D4FF3D;   /* hover / glow on dark */
  --lime-press: #ABD320;    /* pressed / active */
  --lime-deep: #5D7400;     /* lime text on light surfaces, olive */
  --lime-surface: #EDF3C9;  /* faint lime wash for tint backgrounds */

  /* ---- Ink / dark surfaces (cool, the "terminal" mode) ------ */
  --ink-900: #0A0B0D;       /* primary dark surface */
  --ink-800: #121417;
  --ink-700: #1C2024;       /* dotted-grid lines, hairlines on dark */
  --ink-600: #2A2F35;
  --ink-mute: #5B6168;      /* muted text on dark */
  --ink-soft: #7D838B;      /* secondary text on dark */

  /* ---- Neutrals (warm, tuned to the offwhite) --------------- */
  --n-0:   #FCFCF8;         /* lightest paper */
  --n-50:  #F1F4E2;         /* brand offwhite (lime-tinted) */
  --n-100: #E8E6DF;         /* page background, warm gray */
  --n-200: #D6D4C9;         /* borders / dividers on light */
  --n-300: #B9B6A8;         /* disabled, faint */
  --n-400: #8A8576;         /* muted text on light */
  --n-500: #5F5C50;         /* secondary text */
  --n-700: #2C2A24;         /* strong text */
  --n-900: #15140F;         /* ink — primary text on light */

  /* ---- Semantic (restrained, never competes with lime) ------ */
  --success: #3FB97A;
  --warning: #F2B53D;
  --danger:  #FF4D4D;
  --info:    #4DA3FF;

  /* ---- Extended accents (secondary — data-viz / illustration only) */
  --acc-magenta: #FF2D55;
  --acc-cyan:    #29D4C5;
  --acc-amber:   #FF8A3D;

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */
  --bg:            var(--n-50);     /* default page background */
  --bg-warm:       var(--n-100);
  --surface:       var(--n-0);      /* cards on light */
  --surface-dark:  var(--ink-900);  /* cards / hero on dark */
  --surface-tint:  var(--lime-surface);

  --text:          var(--n-900);
  --text-muted:    var(--n-400);
  --text-secondary:var(--n-500);
  --text-on-dark:  #E9ECE3;
  --text-on-dark-muted: var(--ink-mute);
  --text-on-lime:  var(--ink-900);

  --border:        var(--n-200);
  --border-strong: var(--n-300);
  --border-dark:   var(--ink-700);

  --accent:        var(--lime);
  --accent-hover:  var(--lime-bright);
  --accent-press:  var(--lime-press);
  --focus-ring:    var(--lime);
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   DMX STUDIO — TYPOGRAPHY
   Voices:
   - Michroma (display)    → headlines & big display moments — wide, futuristic
   - Syne (logo)           → the DMX monogram / logotype only
   - Space Grotesk (sans)  → UI, body copy, anything read in volume
   - Space Mono (mono)     → labels, metadata, code, the studio "voice"
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-display: 'Michroma', sans-serif;          /* headlines & big display */
  --font-logo:    'Syne', sans-serif;              /* the DMX monogram only */
  --font-sans:    'Space Grotesk', system-ui, sans-serif;
  --font-mono:    'Space Mono', ui-monospace, monospace;

  /* ---- Weights ---- */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;
  --fw-extra:   800;   /* Syne monogram weight */

  /* ---- Type scale (px, 1.25-ish display ramp) ---- */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   20px;
  --text-2xl:  24px;
  --text-3xl:  32px;
  --text-4xl:  44px;
  --text-5xl:  60px;
  --text-6xl:  84px;
  --text-mono-display: 120px;  /* the big monogram */

  /* ---- Line heights ---- */
  --lh-solid: 0.8;    /* the monogram lockup */
  --lh-tight: 1.05;   /* display headlines */
  --lh-snug:  1.25;   /* subheads */
  --lh-body:  1.55;   /* paragraphs */

  /* ---- Letter-spacing ---- */
  --tracking-monogram: -0.06em; /* Syne DMX */
  --tracking-display:  0;       /* Michroma headlines — never negative, it's wide by design */
  --tracking-tight:    -0.03em; /* Space Grotesk emphasis */
  --tracking-normal:   0;
  --tracking-label:    0.18em;  /* mono labels / eyebrows */
  --tracking-wide:     0.3em;   /* terminal metadata */
  --tracking-studio:   0.54em;  /* the spread "S T U D I O" lockup */
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   DMX STUDIO — SPACING & LAYOUT
   4px base grid. The brand also leans on a visible 22-26px
   dotted module grid as a background motif.
   ============================================================ */
:root {
  --space-0:  0;
  --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;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* the dotted-grid motif */
  --grid-module: 26px;
  --grid-module-sm: 22px;

  /* layout maxima */
  --container: 1080px;
  --container-narrow: 760px;
}

/* ===== tokens/effects.css ===== */
/* ============================================================
   DMX STUDIO — EFFECTS (radii, borders, shadows, motifs)
   The system is flat and crisp. Shadows are subtle on light;
   on dark, depth comes from a lime glow or a 1px hairline,
   never a soft drop shadow.
   ============================================================ */
:root {
  /* ---- Corner radii (tight; the brand is angular) ---- */
  --radius-xs:  2px;
  --radius-sm:  3px;
  --radius-md:  6px;
  --radius-lg:  14px;
  --radius-xl:  22px;
  --radius-pill: 999px;

  /* ---- Border widths ---- */
  --border-hair: 1px;
  --border-thick: 2px;
  --border-stroke: 3px;   /* the outlined "X" treatment */

  /* ---- Shadows (light surfaces) ---- */
  --shadow-sm: 0 1px 3px rgba(10,11,13,0.08);
  --shadow-md: 0 4px 16px rgba(10,11,13,0.10);
  --shadow-lg: 0 12px 40px rgba(10,11,13,0.16);

  /* ---- Dark-surface depth ---- */
  --hairline-dark: inset 0 0 0 1px var(--ink-700);
  --glow-lime: 0 0 24px rgba(198,241,53,0.35);
  --ring-lime: 0 0 0 2px var(--lime);

  /* ---- Focus ---- */
  --focus: 0 0 0 3px rgba(198,241,53,0.45);

  /* ---- Motion ---- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur: 200ms;
  --dur-slow: 360ms;

  /* ---- The dotted-grid background motif ----
     usage: background-image: var(--grid-dots-dark); background-size: 26px 26px; */
  --grid-dots-dark: radial-gradient(#1a1e22 1px, transparent 1px);
  --grid-dots-light: radial-gradient(#D6D4C9 1px, transparent 1px);
}