/* ==========================================================================
   Gustafson.io — Colors & Type
   --------------------------------------------------------------------------
   Dark, cool, futuristic. Slate-blue on near-black. The system is designed
   for dark surfaces first; a light theme is provided as an inversion.
   ========================================================================== */

/* ----------------------------------------------------------------
   Webfonts
   We use a tightly geometric sans for UI/display + a clean mono.
   - Mona Sans: clean, sharp, neutral — UI default
   - Syne: technical, slightly mechanical — display headlines
   - DM Mono: precise, hi-tech mono — code, micro-labels, data
   ---------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Mona+Sans:wght@300;400;500;600;700&family=Syne:wght@500;600;700;800&family=DM+Mono:wght@400;500&display=swap');

:root {
  /* ================ COLOR — RAW PALETTE ================ */

  /* Ink — the near-blacks the brand sits on */
  --ink-1000: #05070a;   /* deepest, page background */
  --ink-900:  #0a0d12;   /* default surface */
  --ink-800:  #11151c;   /* raised surface / card */
  --ink-700:  #181d26;   /* hover surface */
  --ink-600:  #232a36;   /* divider / outline */
  --ink-500:  #2f3845;   /* muted border */

  /* Slate — the brand blue-gray, taken from the logo */
  --slate-100: #e6ecf5;
  --slate-200: #c5cfdd;
  --slate-300: #97a4b8;
  --slate-400: #6e7c92;  /* secondary text on dark */
  --slate-500: #4f5c70;  /* logo highlight */
  --slate-600: #3a4658;  /* logo mid */
  --slate-700: #2a3242;  /* logo shadow */
  --slate-800: #1c2230;
  --slate-900: #131825;

  /* Accent — cyan signal. Reserved for active/focus, key data, links. */
  --signal-100: #d6f5ff;
  --signal-300: #7adcff;
  --signal-500: #2bb8e6;  /* primary accent */
  --signal-600: #1a9bc4;
  --signal-700: #0f7a9c;

  /* Semantic */
  --ok-500:    #3ecf8e;
  --warn-500:  #e8b339;
  --error-500: #ef5a5a;

  /* Pure */
  --white: #ffffff;
  --black: #000000;

  /* ================ COLOR — SEMANTIC (DARK = DEFAULT) ================ */

  /* Surfaces (lowest → highest elevation) */
  --bg:           var(--ink-1000);
  --surface:      var(--ink-900);
  --surface-2:    var(--ink-800);
  --surface-3:    var(--ink-700);

  /* Foreground */
  --fg:           var(--slate-100);   /* primary text */
  --fg-muted:     var(--slate-300);   /* secondary text */
  --fg-subtle:    var(--slate-400);   /* tertiary / labels */
  --fg-faint:     var(--slate-500);   /* placeholder / disabled */
  --fg-on-accent: var(--ink-1000);    /* text on signal fills */

  /* Borders */
  --border:        var(--ink-600);
  --border-strong: var(--ink-500);
  --border-faint:  rgba(255,255,255,0.06);

  /* Brand */
  --brand:        var(--slate-500);
  --brand-strong: var(--slate-300);
  --accent:       var(--signal-500);
  --accent-hover: var(--signal-300);

  /* States */
  --focus-ring:   var(--signal-500);
  --selection:    rgba(43,184,230,0.28);

  /* ================ TYPOGRAPHY — FAMILIES ================ */
  --font-sans:    'Mona Sans', ui-sans-serif, system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --font-display: 'Syne', 'Mona Sans', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'DM Mono', ui-monospace, 'SF Mono', 'Menlo', monospace;

  /* ================ TYPOGRAPHY — SCALE ================ */
  /* Pixel-based for predictable layouts. Tightish line-heights for hi-tech feel. */
  --fs-12: 0.75rem;     /* 12 — micro / mono labels */
  --fs-13: 0.8125rem;   /* 13 — small */
  --fs-14: 0.875rem;    /* 14 — body small / UI */
  --fs-15: 0.9375rem;   /* 15 — body */
  --fs-16: 1rem;        /* 16 — body default */
  --fs-18: 1.125rem;    /* 18 — body large / lead */
  --fs-20: 1.25rem;     /* 20 — h5 */
  --fs-24: 1.5rem;      /* 24 — h4 */
  --fs-32: 2rem;        /* 32 — h3 */
  --fs-44: 2.75rem;     /* 44 — h2 */
  --fs-60: 3.75rem;     /* 60 — h1 */
  --fs-84: 5.25rem;     /* 84 — display */

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-normal:   1.5;
  --lh-relaxed:  1.65;

  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-mono:   0.02em;     /* small mono labels */
  --tracking-caps:   0.14em;     /* eyebrows / kickers */

  /* ================ SPACING ================ */
  /* 4px base. Use the named tokens; raw values exist for arbitrary needs. */
  --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;

  /* ================ RADII ================ */
  /* Restrained. The brand reads "precise" — radii are subtle, not pillowy. */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   10px;
  --radius-xl:   14px;
  --radius-2xl:  20px;
  --radius-pill: 999px;

  /* ================ SHADOWS ================ */
  /* Very low-key on dark. Mostly used for floating panels. */
  --shadow-sm: 0 1px 0 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.4);
  --shadow-md: 0 4px 20px -8px rgba(0,0,0,0.6), 0 1px 0 0 rgba(255,255,255,0.04) inset;
  --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.7), 0 1px 0 0 rgba(255,255,255,0.05) inset;
  --shadow-glow: 0 0 0 1px rgba(43,184,230,0.4), 0 0 32px -4px rgba(43,184,230,0.35);

  /* ================ MOTION ================ */
  /* Short, deliberate. No bounces. */
  --ease-out:   cubic-bezier(0.2, 0.7, 0.1, 1);
  --ease-in:    cubic-bezier(0.5, 0, 0.8, 0.4);
  --ease-inout: cubic-bezier(0.4, 0, 0.2, 1);

  --dur-fast:    120ms;
  --dur-base:    200ms;
  --dur-slow:    320ms;
  --dur-slowest: 520ms;
}

/* ================ LIGHT THEME (INVERSION) ================
   For documents, print, and the rare light surface.
   Brand stays the same — only surfaces and fg invert. */
[data-theme="light"] {
  --bg:           #f5f6f8;
  --surface:      #ffffff;
  --surface-2:    #fafbfc;
  --surface-3:    #f0f2f5;

  --fg:           var(--ink-1000);
  --fg-muted:     var(--ink-700);
  --fg-subtle:    var(--slate-700);
  --fg-faint:     var(--slate-500);
  --fg-on-accent: var(--ink-1000);

  --border:        #e3e6eb;
  --border-strong: #cfd4dc;
  --border-faint:  rgba(0,0,0,0.05);

  --shadow-sm: 0 1px 2px rgba(15,20,30,0.06);
  --shadow-md: 0 6px 20px -8px rgba(15,20,30,0.12);
  --shadow-lg: 0 24px 60px -20px rgba(15,20,30,0.18);
}

/* ================ SEMANTIC TYPE ROLES ================
   Use the .class form anywhere; the var() form is for composing inline. */

.eyebrow,
[data-type="eyebrow"] {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--fg-subtle);
}

.display,
[data-type="display"] {
  font-family: var(--font-display);
  font-size: clamp(3rem, 6vw, var(--fs-84));
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.h1, [data-type="h1"] {
  font-family: var(--font-display);
  font-size: var(--fs-60);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.h2, [data-type="h2"] {
  font-family: var(--font-display);
  font-size: var(--fs-44);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg);
}

.h3, [data-type="h3"] {
  font-family: var(--font-display);
  font-size: var(--fs-32);
  font-weight: 500;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.h4, [data-type="h4"] {
  font-family: var(--font-sans);
  font-size: var(--fs-24);
  font-weight: 600;
  line-height: var(--lh-snug);
  letter-spacing: var(--tracking-snug);
  color: var(--fg);
}

.h5, [data-type="h5"] {
  font-family: var(--font-sans);
  font-size: var(--fs-20);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--fg);
}

.lead, [data-type="lead"] {
  font-family: var(--font-sans);
  font-size: var(--fs-18);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.body, [data-type="body"], p {
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: var(--lh-relaxed);
  color: var(--fg-muted);
}

.body-sm, [data-type="body-sm"] {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: var(--lh-normal);
  color: var(--fg-muted);
}

.label, [data-type="label"] {
  font-family: var(--font-sans);
  font-size: var(--fs-13);
  font-weight: 500;
  line-height: var(--lh-normal);
  color: var(--fg);
}

.caption, [data-type="caption"] {
  font-family: var(--font-sans);
  font-size: var(--fs-12);
  font-weight: 400;
  line-height: var(--lh-normal);
  color: var(--fg-subtle);
}

.code, [data-type="code"], code, kbd {
  font-family: var(--font-mono);
  font-size: 0.92em;
  letter-spacing: var(--tracking-mono);
  color: var(--signal-300);
}

.mono-label, [data-type="mono-label"] {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: 500;
  letter-spacing: var(--tracking-mono);
  color: var(--fg-subtle);
}

/* ================ BASE ================ */
html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  font-size: var(--fs-16);
  line-height: var(--lh-relaxed);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--selection); color: var(--fg); }

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }

hr { border: 0; border-top: 1px solid var(--border); }