/* ============================================================
   EXPERIATIS — Design Foundations
   Cloud DevOps · Architecture · Precision · Calibration
   Dark-mode-first. Green + blue, deep and controlled.
   ============================================================ */

/* ---- Webfonts (Google Fonts CDN) -------------------------- */
/* Display: Space Grotesk · Body: Hanken Grotesk · Mono: IBM Plex Mono */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  /* ============ COLOR — RAW PALETTE ============ */
  /* Canvas: deep, cool, near-black with a faint blue undertone */
  --ink-950: oklch(0.145 0.012 240); /* deepest — page void              */
  --ink-900: oklch(0.175 0.013 238); /* base canvas                      */
  --ink-850: oklch(0.205 0.014 236); /* raised surface                   */
  --ink-800: oklch(0.245 0.016 234); /* card / panel                     */
  --ink-750: oklch(0.29 0.018 232); /* hover surface / input            */
  --ink-700: oklch(0.345 0.02 230); /* strong border / divider          */
  --ink-600: oklch(0.43 0.022 228); /* faint text / disabled            */

  --line-500: oklch(0.3 0.018 232); /* hairline border (default)        */
  --line-400: oklch(0.255 0.016 234); /* whisper border / inner grid      */

  /* Foreground text */
  --paper-100: oklch(0.962 0.005 230); /* primary text                     */
  --paper-300: oklch(0.77 0.012 232); /* secondary text                   */
  --paper-500: oklch(0.595 0.015 232); /* muted / captions                 */
  --paper-700: oklch(0.47 0.016 232); /* faint / placeholder              */

  /* Signal Green — calibrated, premium, never neon */
  --green-300: oklch(0.855 0.135 159);
  --green-400: oklch(0.795 0.15 158);
  --green-500: oklch(0.73 0.152 157); /* PRIMARY signal green            */
  --green-600: oklch(0.62 0.135 157);
  --green-700: oklch(0.5 0.11 157);

  /* Cloud Blue — deep azure, controlled */
  --blue-300: oklch(0.8 0.105 244);
  --blue-400: oklch(0.73 0.125 245);
  --blue-500: oklch(0.66 0.135 246); /* PRIMARY cloud blue              */
  --blue-600: oklch(0.56 0.13 248);
  --blue-700: oklch(0.46 0.115 250);

  /* Status — muted, technical */
  --amber-500: oklch(0.8 0.135 78); /* warning / attention             */
  --red-500: oklch(0.66 0.165 22); /* error / critical                */
  --teal-500: oklch(0.76 0.11 195); /* info / bridge hue (blue↔green)  */

  /* Glows — used sparingly, always low alpha */
  --glow-green: oklch(0.73 0.152 157 / 0.22);
  --glow-blue: oklch(0.66 0.135 246 / 0.22);

  /* ============ COLOR — SEMANTIC ============ */
  --bg-void: var(--ink-950);
  --bg-base: var(--ink-900);
  --bg-raised: var(--ink-850);
  --bg-card: var(--ink-800);
  --bg-input: var(--ink-750);
  --bg-hover: var(--ink-750);

  --fg: var(--paper-100);
  --fg-muted: var(--paper-300);
  --fg-subtle: var(--paper-500);
  --fg-faint: var(--paper-700);

  --border: var(--line-500);
  --border-faint: var(--line-400);
  --border-strong: var(--ink-700);

  --accent: var(--green-500); /* primary brand accent        */
  --accent-hover: var(--green-400);
  --accent-2: var(--blue-500); /* secondary brand accent      */
  --accent-2-hover: var(--blue-400);
  --on-accent: var(--ink-950); /* text on solid accent        */

  --focus-ring: var(--blue-400);

  /* Signal gradient — the core brand gradient (blue → teal → green) */
  --signal-gradient: linear-gradient(
    90deg,
    var(--blue-500) 0%,
    var(--teal-500) 50%,
    var(--green-500) 100%
  );

  /* ============ TYPE — FAMILIES ============ */
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', monospace;

  /* ============ TYPE — SCALE ============ */
  /* Tuned for technical density + premium air */
  --text-xs: 12px;
  --lh-xs: 16px;
  --text-sm: 14px;
  --lh-sm: 20px;
  --text-base: 16px;
  --lh-base: 26px;
  --text-md: 18px;
  --lh-md: 28px;
  --text-lg: 22px;
  --lh-lg: 30px;
  --text-xl: 28px;
  --lh-xl: 34px;
  --text-2xl: 38px;
  --lh-2xl: 44px;
  --text-3xl: 52px;
  --lh-3xl: 56px;
  --text-4xl: 72px;
  --lh-4xl: 74px;

  /* Weights */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Tracking */
  --track-tight: -0.02em;
  --track-normal: 0;
  --track-label: 0.14em; /* mono micro-labels — calibration ticks      */
  --track-wide: 0.04em;

  /* ============ SPACING (4px base) ============ */
  --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 ============ */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px; /* default control radius                              */
  --r-lg: 14px; /* cards / panels                                      */
  --r-xl: 20px;
  --r-pill: 999px;

  /* ============ BORDERS ============ */
  --bw: 1px;

  /* ============ SHADOWS / ELEVATION ============ */
  /* Dark mode → elevation reads via lighter surface + hairline + faint shadow */
  --shadow-inset-top: inset 0 1px 0 oklch(1 0 0 / 0.04); /* top highlight  */

  /* ============ MOTION ============ */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 130ms;
  --dur-base: 200ms;
  --dur-slow: 360ms;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES — opt-in via .ds-prose or utilities
   ============================================================ */

.ds-h1 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--text-4xl);
  line-height: var(--lh-4xl);
  letter-spacing: var(--track-tight);
  color: var(--fg);
  text-wrap: balance;
}
.ds-h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-3xl);
  line-height: var(--lh-3xl);
  letter-spacing: var(--track-tight);
  color: var(--fg);
  text-wrap: balance;
}
.ds-h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-semibold);
  font-size: var(--text-2xl);
  line-height: var(--lh-2xl);
  letter-spacing: var(--track-tight);
  color: var(--fg);
}
.ds-h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-xl);
  line-height: var(--lh-xl);
  letter-spacing: var(--track-tight);
  color: var(--fg);
}
.ds-lead {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-md);
  line-height: var(--lh-md);
  color: var(--fg-muted);
}
.ds-body {
  font-family: var(--font-body);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--lh-base);
  color: var(--fg-muted);
}
.ds-small {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: var(--lh-sm);
  color: var(--fg-subtle);
}
/* Mono micro-label — the calibration "tick" label. Core motif. */
.ds-label {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  font-size: var(--text-xs);
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  color: var(--fg-subtle);
}
.ds-mono {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--fg-muted);
  font-feature-settings: 'ss01' on;
}
.ds-code {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  color: var(--green-300);
  background: var(--ink-950);
  border: var(--bw) solid var(--border-faint);
  border-radius: var(--r-sm);
  padding: 0.12em 0.45em;
}

/* Gradient text — reserve for single accent words, never paragraphs */
.ds-gradient-text {
  background: var(--signal-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}