/* =========================================================================
   Haevek Design System — colors_and_type.css
   Drop-in stylesheet for any Haevek-branded artifact.
   Tokens cover: color, type (incl. Google Font import), spacing, radii,
   shadows, easings, durations, and semantic typography (h1-h6, p, code).
   ========================================================================= */

/* --- Webfont substitutions (flagged in README) ----------------------------
   Real font files would replace these @import URLs. */
@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Space+Grotesk:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap');

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

  /* Brand gradient — sampled from the Haevek wordmark, left → right */
  --brand-purple-700: #5A14C9;          /* deep, used for hover/pressed states of purple */
  --brand-purple:     #7922F0;          /* gradient start */
  --brand-magenta:    #AB3893;          /* gradient midpoint */
  --brand-coral:      #E1512E;          /* gradient ¾ */
  --brand-orange:     #F75B04;          /* gradient end */
  --brand-orange-700: #C44600;          /* deep, used for hover/pressed states of orange */

  /* The signature gradient, in the canonical direction */
  --brand-gradient: linear-gradient(
    90deg,
    var(--brand-purple)  0%,
    var(--brand-magenta) 50%,
    var(--brand-orange) 100%
  );
  --brand-gradient-soft: linear-gradient(
    90deg,
    rgba(121, 34, 240, 0.10)  0%,
    rgba(171, 56, 147, 0.08) 50%,
    rgba(247, 91, 4, 0.10) 100%
  );

  /* Ink — the deep blackcurrant ground that the gradient sits on */
  --ink-1000: #050208;     /* darkest, used in shadows and behind hero photos */
  --ink-900:  #0B0613;     /* canonical "Haevek dark" surface */
  --ink-800:  #14092A;     /* sidebar / panel bg */
  --ink-700:  #1F1438;     /* card on dark */
  --ink-600:  #2C2147;     /* hover on dark */
  --ink-500:  #3D3257;     /* divider on dark */

  /* Plum — warm purple-tinted neutrals (light theme) */
  --plum-50:  #F8F6FB;     /* page bg */
  --plum-100: #F1ECF6;     /* subtle surface */
  --plum-150: #E8E1EE;     /* hover on white */
  --plum-200: #DCD3E5;     /* hairline divider */
  --plum-300: #B7AAC4;     /* placeholder / disabled */
  --plum-400: #8A7C9A;     /* tertiary text */
  --plum-500: #5C4F6E;     /* secondary text */
  --plum-600: #3F3450;     /* primary text on white (alt) */
  --plum-700: #2A2138;     /* near-black w/ purple cast */
  --plum-800: #1A1320;     /* default body text on white */
  --plum-900: #0F0917;     /* near-pure black w/ purple cast */

  /* Cool greys for the product UI's chart/code areas (kept restrained) */
  --slate-50:  #F5F6F8;
  --slate-100: #ECEDF1;
  --slate-200: #D8DAE2;
  --slate-300: #B0B3C0;
  --slate-400: #797D8E;
  --slate-500: #50546A;
  --slate-600: #353849;
  --slate-700: #232532;
  --slate-800: #161823;
  --slate-900: #0C0D14;

  /* Semantic — restrained, slightly desaturated to coexist w/ the gradient */
  --success-500: #1E9E6A;     --success-50:  #E5F6EE;
  --warning-500: #C68A1A;     --warning-50:  #FBF2DE;
  --danger-500:  #D6453A;     --danger-50:   #FBE6E4;
  --info-500:    #2E6FD6;     --info-50:     #E2ECFB;

  /* =====================================================================
     COLOR — semantic (light theme is default)
     ===================================================================== */

  --bg-canvas:        #FFFFFF;
  --bg-surface:       var(--plum-50);
  --bg-subtle:        var(--plum-100);
  --bg-hover:         var(--plum-150);
  --bg-ink:           var(--ink-900);    /* the brand-dark surface */
  --bg-ink-hover:     var(--ink-700);

  --fg-1:             var(--plum-800);   /* default body */
  --fg-2:             var(--plum-500);   /* secondary */
  --fg-3:             var(--plum-400);   /* tertiary / metadata */
  --fg-disabled:      var(--plum-300);
  --fg-on-ink:        #F5F1FB;           /* primary text on dark */
  --fg-on-ink-2:      #B5A9C9;           /* secondary text on dark */
  --fg-on-ink-3:      #7A6E92;           /* tertiary text on dark */
  --fg-on-brand:      #FFFFFF;           /* text on brand gradient surfaces */

  --border-subtle:    var(--plum-200);
  --border-strong:    var(--plum-300);
  --border-on-ink:    var(--ink-500);

  --accent:           var(--brand-purple);
  --accent-hover:     var(--brand-purple-700);
  --accent-on:        #FFFFFF;

  /* Focus ring — purple at low alpha, never gradient (a11y needs solid) */
  --focus-ring: 0 0 0 3px rgba(121, 34, 240, 0.35);

  /* =====================================================================
     TYPOGRAPHY — primitives
     ===================================================================== */

  --font-display: 'Michroma', 'Eurostile', 'Bank Gothic', system-ui, sans-serif;
  --font-heading: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Menlo', 'Consolas', monospace;

  /* Type scale — modular, 1.200 ratio, anchored to 16px body */
  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  13px;
  --fs-md:  14px;     /* dense product UI body */
  --fs-base:16px;     /* default body */
  --fs-lg:  18px;
  --fs-xl:  22px;
  --fs-2xl: 28px;
  --fs-3xl: 36px;
  --fs-4xl: 48px;
  --fs-5xl: 64px;
  --fs-6xl: 88px;     /* hero display */

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.5;
  --lh-loose:   1.7;

  --tracking-display: 0.04em;   /* the wordmark itself is wide-tracked */
  --tracking-eyebrow: 0.16em;   /* SMALL-CAPS labels in diagrams */
  --tracking-tight:   -0.01em;
  --tracking-normal:  0;

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

  /* =====================================================================
     SPACING — 4px base
     ===================================================================== */
  --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;

  /* =====================================================================
     RADII
     ===================================================================== */
  --radius-xs:   4px;
  --radius-sm:   6px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
  --radius-2xl: 28px;
  --radius-pill: 9999px;

  /* =====================================================================
     SHADOWS — neutral, restrained
     ===================================================================== */
  --shadow-xs: 0 1px 2px rgba(15, 9, 23, 0.06);
  --shadow-sm: 0 2px 4px rgba(15, 9, 23, 0.06), 0 1px 2px rgba(15, 9, 23, 0.04);
  --shadow-md: 0 8px 24px rgba(15, 9, 23, 0.10), 0 2px 6px rgba(15, 9, 23, 0.06);
  --shadow-lg: 0 24px 64px rgba(15, 9, 23, 0.18), 0 8px 16px rgba(15, 9, 23, 0.08);
  --shadow-inset-divider: inset 0 -1px 0 var(--border-subtle);

  /* =====================================================================
     EASINGS & DURATIONS
     ===================================================================== */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-in-out:    cubic-bezier(0.4, 0, 0.2, 1);
  --ease-linear:    linear;

  --dur-micro:    120ms;   /* hover, press color shifts */
  --dur-standard: 180ms;   /* dropdowns, panel reveals */
  --dur-large:    280ms;   /* route changes, modals */

  /* =====================================================================
     LAYOUT
     ===================================================================== */
  --width-content: 1120px;
  --width-prose:    72ch;
  --sidebar-width: 220px;
  --activitybar-width: 48px;
  --slide-w: 1280px;
  --slide-h:  720px;
}

/* =========================================================================
   DARK SURFACE OVERRIDE
   Apply to any element to flip token semantics for the brand-dark surface.
   ========================================================================= */
.on-ink, .surface-ink {
  --bg-canvas:    var(--ink-900);
  --bg-surface:   var(--ink-800);
  --bg-subtle:    var(--ink-700);
  --bg-hover:     var(--ink-600);

  --fg-1:         var(--fg-on-ink);
  --fg-2:         var(--fg-on-ink-2);
  --fg-3:         var(--fg-on-ink-3);
  --fg-disabled:  var(--ink-500);

  --border-subtle: var(--ink-500);
  --border-strong: var(--ink-500);

  background: var(--bg-canvas);
  color: var(--fg-1);
}

/* =========================================================================
   SEMANTIC TYPOGRAPHY
   Apply directly via element selectors or via .ds-* utility classes.
   ========================================================================= */

body, .ds-body {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-canvas);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .ds-h1 {
  font-family: var(--font-heading);
  font-size: var(--fs-4xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-bold);
  margin: 0 0 var(--space-4);
  color: var(--fg-1);
  text-wrap: balance;
}

h2, .ds-h2 {
  font-family: var(--font-heading);
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-3);
  color: var(--fg-1);
  text-wrap: balance;
}

h3, .ds-h3 {
  font-family: var(--font-heading);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-3);
  color: var(--fg-1);
}

h4, .ds-h4 {
  font-family: var(--font-heading);
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--space-2);
  color: var(--fg-1);
}

h5, .ds-h5 {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

h6, .ds-h6 {
  font-family: var(--font-body);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  font-weight: var(--fw-semibold);
  color: var(--fg-1);
}

p, .ds-p {
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  margin: 0 0 var(--space-4);
  text-wrap: pretty;
}

small, .ds-small {
  font-size: var(--fs-sm);
  color: var(--fg-2);
}

code, kbd, samp, .ds-code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-subtle);
  padding: 0.1em 0.35em;
  border-radius: var(--radius-xs);
  color: var(--fg-1);
}

pre, .ds-pre {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  background: var(--ink-900);
  color: var(--fg-on-ink);
  padding: var(--space-4);
  border-radius: var(--radius-md);
  overflow: auto;
}

/* The signature display treatment — wide, all-caps, brand-gradient-painted */
.ds-display {
  font-family: var(--font-display);
  font-size: var(--fs-5xl);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-transform: uppercase;
  font-weight: var(--fw-regular);
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-wrap: balance;
}

/* SMALL-CAPS section labels — used in architecture diagrams + slide eyebrows */
.ds-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

/* Numerals & metric — for the big "57×", "95%", "$464K" moments */
.ds-metric {
  font-family: var(--font-heading);
  font-size: var(--fs-6xl);
  line-height: 0.95;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--fg-1);
}

.ds-metric-gradient {
  font-family: var(--font-heading);
  font-size: var(--fs-6xl);
  line-height: 0.95;
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}