/* MoonBoots Consultancy, design tokens (LIGHT direction, calibrated to the brand surface) */
:root {
  /* Paper / surface ramp, warm off-white, the LinkedIn banner surface */
  --paper-50:  #FFFFFF;
  --paper-100: #FBFAF6;   /* primary surface */
  --paper-200: #F5F3EC;   /* secondary surface, soft cream */
  --paper-300: #ECEAE1;   /* card hairline edge */
  --paper-400: #DEDBCF;

  /* Ink ramp, navy is the typographic colour (Anthropic register, executed lightly) */
  --ink-1000: #050810;
  --ink-900:  #0B1226;    /* primary ink */
  --ink-800:  #16223D;
  --ink-700:  #243353;
  --ink-600:  #36456B;
  --ink-500:  #51618A;
  --ink-400:  #7E8AA8;    /* secondary ink */
  --ink-300:  #A7B0C5;    /* tertiary ink */
  --ink-200:  #C9CFDD;    /* quaternary, near-disabled */

  /* Hairlines, low-contrast cool greys, never pure black */
  --hairline:        rgba(11, 18, 38, 0.08);
  --hairline-strong: rgba(11, 18, 38, 0.16);
  --hairline-mono:   rgba(11, 18, 38, 0.06);

  /* Brand blue, used sparingly (links, photon ring on diagrams, a single accent) */
  --blue-700: #1E3FA8;
  --blue-600: #2553D9;    /* link colour */
  --blue-500: #4F7BFF;
  --blue-300: #B7C7FF;
  --blue-50:  #EEF3FF;

  /* Accents, recalibrated for LIGHT surfaces.
     On dark, ember was #E07A4A. On light, that same hue reads as orange juice.
     Pull saturation down, push value down. One precise moment per page. */
  --ember-700: #8E3F1E;   /* deep, body-text-safe ember */
  --ember-600: #B85428;   /* primary ember on light */
  --ember-500: #C45F35;   /* slightly lighter, for hover/focus */
  /* Default headline full-stop accent, locked warm amber.
     Overridable at runtime via the Tweaks panel (--stop-accent). */
  --stop-accent: #E07A4A;
  --ember-200: #F2D9C7;   /* tinted background ember (for refused diagram pills) */
  --ember-50:  #FAEFE6;

  /* Considered red, bounded AI "refused" treatment. Darker on light. */
  --refuse-700: #8B2D2D;
  --refuse-600: #A93B3B;
  --refuse-500: #C44A4A;
  --refuse-200: #ECC9C9;
  --refuse-50:  #F7E8E8;

  /* Surface tokens (semantic) */
  --bg:           var(--paper-100);
  --bg-elev-1:    #ffffff;
  --bg-elev-2:    var(--paper-200);
  --bg-elev-3:    #ffffff;

  /* Type colour (semantic) */
  --t-ink-1: var(--ink-900);    /* primary text + display */
  --t-ink-2: var(--ink-600);    /* secondary text */
  --t-ink-3: var(--ink-500);    /* tertiary, eyebrows, meta */
  --t-ink-4: var(--ink-400);    /* quiet meta */

  /* Type system */
  --font-display: "Fraunces", "Tobias", Georgia, serif;
  --font-body: "Geist", "Söhne", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Geist Mono", "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Type scale */
  --t-display-xl: clamp(64px, 7.4vw, 142px);
  --t-display-l:  clamp(48px, 5.2vw, 96px);
  --t-display-m:  clamp(36px, 3.6vw, 64px);
  --t-h1:  clamp(32px, 3vw, 52px);
  --t-h2:  clamp(26px, 2.2vw, 38px);
  --t-h3:  20px;
  --t-body-l: 18px;
  --t-body: 16px;
  --t-small: 14px;
  --t-eyebrow: 12px;

  /* Spacing, 8pt rhythm */
  --s-1: 4px;  --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px; --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 96px; --s-10: 128px; --s-11: 192px;

  /* Radii */
  --r-1: 4px; --r-2: 8px; --r-3: 14px; --r-4: 22px; --r-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --t-fast: 180ms;
  --t-med: 360ms;
  --t-slow: 720ms;

  /* Legacy aliases (kept temporarily so any unconverted styles don't crash visually).
     New code should use --t-ink-1/2/3/4, --bg, --bg-elev-*, --hairline, etc. */
  --ink-1: var(--t-ink-1);
  --ink-2: var(--t-ink-2);
  --ink-3: var(--t-ink-3);
  --ink-4: var(--t-ink-4);
  --accent-warm: var(--ember-600);
  --navy-900: var(--ink-900);
  --navy-800: var(--ink-800);
  --navy-700: var(--ink-700);
  --navy-1000: var(--ink-1000);
  --slate-50:  var(--paper-100);
  --slate-100: var(--paper-200);
  --slate-200: var(--paper-300);
  --slate-300: var(--ink-300);
  --slate-400: var(--ink-400);
  --slate-500: var(--ink-500);
  --slate-600: var(--ink-600);
  --slate-700: var(--ink-700);
  --slate-800: var(--ink-800);
  --ember-400: var(--ember-500);
  --ember-300: var(--ember-200);
  --refuse-400: var(--refuse-500);
  --blue-400: var(--blue-500);
}

* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--t-ink-1);
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: 1.55;
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }

/* Display + body type */
.display-xl, .display-l, .display-m, h1, h2 {
  font-family: var(--font-display);
  font-weight: 350;
  letter-spacing: -0.025em;
  line-height: 1.02;
  text-wrap: balance;
  color: var(--t-ink-1);
}
.display-xl { font-size: var(--t-display-xl); letter-spacing: -0.035em; font-weight: 300; }
.display-l  { font-size: var(--t-display-l); }
.display-m  { font-size: var(--t-display-m); }
h1 { font-size: var(--t-h1); margin: 0; }
h2 { font-size: var(--t-h2); margin: 0; line-height: 1.1; }
h3 { font-family: var(--font-body); font-weight: 500; font-size: var(--t-h3); margin: 0; letter-spacing: -0.01em; color: var(--t-ink-1); }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--t-ink-3);
  font-weight: 400;
}

.lede { color: var(--t-ink-2); font-size: var(--t-body-l); line-height: 1.55; max-width: 56ch; text-wrap: pretty; }
.muted { color: var(--t-ink-3); }
.italic-serif { font-family: var(--font-display); font-style: italic; font-weight: 350; }

.hairline { border-top: 1px solid var(--hairline); }

.container { max-width: 1320px; margin: 0 auto; padding: 0 48px; }
@media (max-width: 720px) { .container { padding: 0 24px; } }

::selection { background: var(--ember-200); color: var(--ink-900); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}