/* =========================================================
   ScaleMedia — Foundations
   Colors and typography tokens. Import this file once.
   ========================================================= */

@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 100; font-display: swap; src: url("fonts/JetBrainsMono-Thin.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 100; font-display: swap; src: url("fonts/JetBrainsMono-ThinItalic.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/JetBrainsMono-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/JetBrainsMono-Light.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/JetBrainsMono-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/JetBrainsMono-Regular.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/JetBrainsMono-Italic.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/JetBrainsMono-Medium.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/JetBrainsMono-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/JetBrainsMono-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/JetBrainsMono-Bold.ttf") format("truetype"); }
@font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/JetBrainsMono-ExtraBold.ttf") format("truetype"); }

/* Inter Tight — local brand fonts */
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 100; font-display: swap; src: url("fonts/InterTight-Thin.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: italic; font-weight: 100; font-display: swap; src: url("fonts/InterTight-ThinItalic.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 200; font-display: swap; src: url("fonts/InterTight-ExtraLight.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: italic; font-weight: 200; font-display: swap; src: url("fonts/InterTight-ExtraLightItalic.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/InterTight-Light.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: italic; font-weight: 300; font-display: swap; src: url("fonts/InterTight-LightItalic.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/InterTight-Regular.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: italic; font-weight: 400; font-display: swap; src: url("fonts/InterTight-Italic.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/InterTight-Medium.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: italic; font-weight: 500; font-display: swap; src: url("fonts/InterTight-MediumItalic.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 600; font-display: swap; src: url("fonts/InterTight-SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: italic; font-weight: 600; font-display: swap; src: url("fonts/InterTight-SemiBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/InterTight-Bold.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: italic; font-weight: 700; font-display: swap; src: url("fonts/InterTight-BoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/InterTight-ExtraBold.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: italic; font-weight: 800; font-display: swap; src: url("fonts/InterTight-ExtraBoldItalic.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/InterTight-Black.ttf") format("truetype"); }
@font-face { font-family: "Inter Tight"; font-style: italic; font-weight: 900; font-display: swap; src: url("fonts/InterTight-BlackItalic.ttf") format("truetype"); }

:root {
  /* ---------- Brand colors (raw) ---------- */
  --ink:        #0E0E10;   /* oklch(0.18 0 0)        primary text / dark surface */
  --coral:      #E89060;   /* oklch(0.70 0.15 35)    brand accent */
  --cream:      #F4EFE6;   /* surface base */
  --sand:       #E8DFCD;   /* secondary surface */
  --paper:      #FAFAF7;   /* lightest surface */

  /* Tonal coral, kept inside the same hue family */
  --coral-50:   oklch(0.96 0.025 35);
  --coral-100:  oklch(0.92 0.05  35);
  --coral-200:  oklch(0.84 0.09  35);
  --coral-400:  oklch(0.76 0.13  35);
  --coral-500:  #E89060;
  --coral-600:  oklch(0.62 0.15  35);
  --coral-700:  oklch(0.50 0.13  35);

  /* Tonal ink (warm-neutral grays derived from cream/ink) */
  --ink-900:    #0E0E10;
  --ink-700:    oklch(0.30 0.005 60);
  --ink-500:    oklch(0.50 0.005 60);
  --ink-400:    oklch(0.62 0.005 60);
  --ink-300:    oklch(0.78 0.008 60);
  --ink-200:    oklch(0.88 0.010 60);
  --ink-100:    oklch(0.94 0.010 60);

  /* ---------- Semantic surfaces ---------- */
  --bg:           var(--cream);          /* default page surface */
  --bg-secondary: var(--sand);
  --bg-elevated:  var(--paper);
  --bg-inverse:   var(--ink);

  /* ---------- Semantic foreground ---------- */
  --fg:        var(--ink-900);   /* primary text */
  --fg-muted:  var(--ink-700);   /* body secondary */
  --fg-soft:   var(--ink-500);   /* captions, meta */
  --fg-faint:  var(--ink-400);   /* dividers-as-text, very low emphasis */
  --fg-on-dark: var(--cream);
  --fg-on-coral: var(--ink-900);

  /* ---------- Borders / rules ---------- */
  --rule:       oklch(0.85 0.010 60);   /* hairline on cream */
  --rule-strong:oklch(0.70 0.010 60);
  --rule-on-dark: oklch(0.30 0.005 60);

  /* ---------- Accent ---------- */
  --accent:        var(--coral);
  --accent-hover:  var(--coral-600);
  --accent-press:  var(--coral-700);
  --underline:     var(--coral);          /* the brand underline */

  /* ---------- Type families ---------- */
  --font-display: "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-body:    "Inter Tight", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* ---------- Type weights ---------- */
  --w-thin: 200;
  --w-regular: 400;
  --w-medium: 500;
  --w-bold: 700;

  /* ---------- Type tracking ---------- */
  --track-display: -0.05em;   /* -5% on Inter Tight */
  --track-body:    -0.01em;
  --track-mono:    0.24em;    /* +24% body / +32% eyebrow on JetBrains Mono */
  --track-mono-eyebrow: 0.32em;

  /* ---------- Type scale (1.25 modular, anchored at 16) ---------- */
  --fs-12: 0.75rem;
  --fs-13: 0.8125rem;
  --fs-14: 0.875rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-32: 2rem;
  --fs-40: 2.5rem;
  --fs-56: 3.5rem;
  --fs-72: 4.5rem;
  --fs-96: 6rem;

  /* ---------- Spacing (4px base) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-8: 48px;
  --space-10: 64px;
  --space-12: 96px;
  --space-14: 128px;
  --space-16: 192px;

  /* ---------- Radii ---------- */
  --radius-none: 0;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---------- Shadows (soft, warm, never gray) ---------- */
  --shadow-xs: 0 1px 2px rgba(14, 14, 16, 0.04);
  --shadow-sm: 0 2px 6px rgba(14, 14, 16, 0.06);
  --shadow-md: 0 8px 20px rgba(14, 14, 16, 0.08);
  --shadow-lg: 0 18px 40px rgba(14, 14, 16, 0.10);

  /* ---------- Motion ---------- */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 420ms;

  /* ---------- Layout ---------- */
  --max-w-prose: 68ch;
  --max-w-container: 1280px;
  --grid-gutter: 24px;
}

/* =========================================================
   Base + semantic element styles
   ========================================================= */

html, body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: var(--w-regular);
  font-size: var(--fs-16);
  line-height: 1.55;
  letter-spacing: var(--track-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* --- Display + headings --- */
.display-xl, h1.display, .h-display {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: clamp(3rem, 7vw, var(--fs-96));
  line-height: 0.96;
  letter-spacing: var(--track-display);
}

h1, .h1 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: clamp(2.25rem, 4.5vw, var(--fs-72));
  line-height: 1.02;
  letter-spacing: var(--track-display);
  margin: 0 0 var(--space-5);
}

h2, .h2 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: clamp(1.75rem, 3vw, var(--fs-40));
  line-height: 1.08;
  letter-spacing: var(--track-display);
  margin: 0 0 var(--space-4);
}

h3, .h3 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--fs-24);
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 var(--space-3);
}

h4, .h4 {
  font-family: var(--font-display);
  font-weight: var(--w-medium);
  font-size: var(--fs-18);
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}

/* --- Body --- */
p, .body {
  font-size: var(--fs-16);
  line-height: 1.6;
  color: var(--fg-muted);
  max-width: var(--max-w-prose);
  margin: 0 0 var(--space-4);
}

.lead {
  font-size: var(--fs-20);
  line-height: 1.45;
  color: var(--fg);
  letter-spacing: -0.015em;
}

small, .small {
  font-size: var(--fs-13);
  color: var(--fg-soft);
}

/* --- Mono / labels (the signature caption style) --- */
.mono, code, kbd, samp {
  font-family: var(--font-mono);
  font-size: var(--fs-12);
  font-weight: var(--w-regular);
}

.eyebrow, .caption, .label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--w-regular);
  letter-spacing: var(--track-mono-eyebrow);
  text-transform: uppercase;
  color: var(--fg-soft);
}

/* --- Links --- */
a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid var(--coral);
  padding-bottom: 1px;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
a:hover { color: var(--coral-700); border-color: var(--coral-700); }

/* --- The brand underline accent --- */
.underline-coral {
  background-image: linear-gradient(var(--coral), var(--coral));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 4px;
  padding-bottom: 6px;
}

/* --- Rules / dividers --- */
hr, .rule {
  border: 0;
  border-top: 1px solid var(--rule);
  margin: var(--space-6) 0;
}

/* --- Selection --- */
::selection { background: var(--coral); color: var(--ink-900); }