/* ============================================================
   yveldi.dev — Colors & Type
   A clean-developer system: monospace wordmark/labels + a warm
   grotesk for everything else. Raspberry-pink primary (#D6336C).
   Supports light + dark via prefers-color-scheme, with a manual
   override using [data-theme="light"|"dark"] on <html>.

   Fonts are loaded via <link> tags in the page <head> (with
   preconnect), not @import — that avoids a render-blocking
   request chain. Only the weights actually used are requested.
   ============================================================ */

:root {
  /* ---------- Raw brand palette (mode-independent) ---------- */
  --pink-50:  #FFF0F5;
  --pink-100: #FFE0EC;
  --pink-200: #FFC2D9;
  --pink-300: #FF99BD;
  --pink-400: #F76798;
  --pink-500: #E8417B;
  --pink-600: #D6336C; /* primary brand */
  --pink-700: #B22557;
  --pink-800: #8F1D46;
  --pink-900: #6E1838;
  --pink-950: #420A1F;

  /* Neutral ramp (very slightly cool) */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAFAFA;
  --neutral-100: #F4F4F5;
  --neutral-150: #ECECEE;
  --neutral-200: #E4E4E7;
  --neutral-300: #D4D4D8;
  --neutral-400: #A1A1AA;
  --neutral-500: #71717A;
  --neutral-600: #52525B;
  --neutral-700: #3F3F46;
  --neutral-800: #27272A;
  --neutral-850: #1C1C1F;
  --neutral-900: #161618;
  --neutral-950: #0C0C0E;

  /* Status hues */
  --green-500:  #1CA672;
  --green-400:  #2BD49E;
  --amber-500:  #D98A0B;
  --amber-400:  #F2B23E;
  --red-500:    #DC3D43;
  --red-400:    #F26A6F;
  --blue-500:   #2F6FED;
  --blue-400:   #5B94FF;

  /* ---------- Type families ---------- */
  --font-sans: 'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale (1.250 major-third-ish, tuned) ---------- */
  --text-2xs: 0.6875rem; /* 11px — micro labels */
  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.875rem;  /* 14px */
  --text-base:1rem;      /* 16px */
  --text-lg:  1.125rem;  /* 18px */
  --text-xl:  1.375rem;  /* 22px */
  --text-2xl: 1.75rem;   /* 28px */
  --text-3xl: 2.25rem;   /* 36px */
  --text-4xl: 3rem;      /* 48px */
  --text-5xl: 4rem;      /* 64px */
  --text-6xl: 5.5rem;    /* 88px */

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

  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-label: 0.08em; /* mono eyebrows/labels */

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 0.25rem;  /* 4 */
  --space-2: 0.5rem;   /* 8 */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4rem;     /* 64 */
  --space-9: 6rem;     /* 96 */
  --space-10: 8rem;    /* 128 */

  /* ---------- Radii ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-xl: 20px;
  --radius-pill: 999px;

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 320ms;
}

/* ================= LIGHT (default) ================= */
:root,
:root[data-theme="light"] {
  color-scheme: light;

  --bg:        var(--neutral-0);
  --bg-subtle: var(--neutral-50);
  --surface:   var(--neutral-0);
  --surface-2: var(--neutral-100);
  --surface-3: var(--neutral-150);
  --elevated:  var(--neutral-0);

  --fg1: var(--neutral-900);   /* primary text */
  --fg2: var(--neutral-600);   /* secondary */
  --fg3: var(--neutral-400);   /* muted / placeholder */
  --fg-on-accent: #FFFFFF;

  --border:        var(--neutral-200);
  --border-strong: var(--neutral-300);

  --accent:        var(--pink-600);
  --accent-hover:  var(--pink-700);
  --accent-press:  var(--pink-800);
  --accent-soft:   var(--pink-50);
  --accent-soft-2: var(--pink-100);
  --accent-fg:     var(--pink-700); /* accent text on light bg */
  --ring:          color-mix(in srgb, var(--pink-600) 38%, transparent);

  --success: var(--green-500);
  --warning: var(--amber-500);
  --danger:  var(--red-500);
  --info:    var(--blue-500);

  --shadow-xs: 0 1px 2px rgba(16, 16, 20, 0.06);
  --shadow-sm: 0 1px 3px rgba(16, 16, 20, 0.08), 0 1px 2px rgba(16, 16, 20, 0.04);
  --shadow-md: 0 4px 12px rgba(16, 16, 20, 0.08), 0 2px 4px rgba(16, 16, 20, 0.05);
  --shadow-lg: 0 12px 32px rgba(16, 16, 20, 0.12), 0 4px 8px rgba(16, 16, 20, 0.06);
  --shadow-accent: 0 6px 20px color-mix(in srgb, var(--pink-600) 28%, transparent);
}

/* ================= DARK ================= */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --bg:        var(--neutral-950);
    --bg-subtle: var(--neutral-900);
    --surface:   var(--neutral-900);
    --surface-2: var(--neutral-850);
    --surface-3: var(--neutral-800);
    --elevated:  var(--neutral-850);

    --fg1: var(--neutral-50);
    --fg2: var(--neutral-400);
    --fg3: var(--neutral-500);
    --fg-on-accent: #FFFFFF;

    --border:        var(--neutral-800);
    --border-strong: var(--neutral-700);

    --accent:        var(--pink-500);
    --accent-hover:  var(--pink-400);
    --accent-press:  var(--pink-300);
    --accent-soft:   color-mix(in srgb, var(--pink-500) 16%, var(--neutral-900));
    --accent-soft-2: color-mix(in srgb, var(--pink-500) 26%, var(--neutral-900));
    --accent-fg:     var(--pink-300);
    --ring:          color-mix(in srgb, var(--pink-500) 45%, transparent);

    --success: var(--green-400);
    --warning: var(--amber-400);
    --danger:  var(--red-400);
    --info:    var(--blue-400);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.45);
    --shadow-accent: 0 6px 24px color-mix(in srgb, var(--pink-500) 40%, transparent);
  }
}

/* Manual dark override (mirrors the media query block) */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg:        var(--neutral-950);
  --bg-subtle: var(--neutral-900);
  --surface:   var(--neutral-900);
  --surface-2: var(--neutral-850);
  --surface-3: var(--neutral-800);
  --elevated:  var(--neutral-850);

  --fg1: var(--neutral-50);
  --fg2: var(--neutral-400);
  --fg3: var(--neutral-500);
  --fg-on-accent: #FFFFFF;

  --border:        var(--neutral-800);
  --border-strong: var(--neutral-700);

  --accent:        var(--pink-500);
  --accent-hover:  var(--pink-400);
  --accent-press:  var(--pink-300);
  --accent-soft:   color-mix(in srgb, var(--pink-500) 16%, var(--neutral-900));
  --accent-soft-2: color-mix(in srgb, var(--pink-500) 26%, var(--neutral-900));
  --accent-fg:     var(--pink-300);
  --ring:          color-mix(in srgb, var(--pink-500) 45%, transparent);

  --success: var(--green-400);
  --warning: var(--amber-400);
  --danger:  var(--red-400);
  --info:    var(--blue-400);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.5), 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.55), 0 2px 4px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.45);
  --shadow-accent: 0 6px 24px color-mix(in srgb, var(--pink-500) 40%, transparent);
}

/* ============================================================
   Semantic type styles — apply directly or copy the rules.
   ============================================================ */

.wordmark {
  font-family: var(--font-mono);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--fg1);
}
.wordmark .dot { color: var(--accent); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-2xs);
  font-weight: 600;
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--accent-fg);
}

h1, .h1 {
  font-family: var(--font-sans);
  font-size: var(--text-5xl);
  font-weight: 800;
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
h2, .h2 {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--fg1);
}
h3, .h3 {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: 700;
  line-height: var(--leading-snug);
  letter-spacing: -0.01em;
  color: var(--fg1);
}
h4, .h4 {
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: 600;
  line-height: var(--leading-snug);
  color: var(--fg1);
}

p, .body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 400;
  line-height: var(--leading-relaxed);
  color: var(--fg2);
}
.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--fg2);
}
.small {
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  color: var(--fg2);
}
.caption {
  font-size: var(--text-xs);
  color: var(--fg3);
}

code, .code, kbd, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
}
.code-block {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--space-4);
  color: var(--fg1);
}

a, .link {
  color: var(--accent-fg);
  text-decoration: none;
}
a:hover, .link:hover { text-decoration: underline; text-underline-offset: 3px; }