/* ============================================================
   Dan Sanderson — design tokens (bundled)
   Source: Dan-Sanderson-design-system/design/tokens/*
   Concatenated at build for a single request. Edit the
   partials in tokens/ and re-bundle; do not hand-edit below.
   ============================================================ */

/* ---------- tokens/colors.css ---------- */
/* ============================================================
   Colors — Dan Sanderson Design System
   ------------------------------------------------------------
   Signature: a single, confident red (#C6080C) carried over
   from the original brand, set against warm near-black ink and
   a warm off-white paper. Neutrals are warm-gray so they sit
   comfortably beside the red rather than fighting it.
   ============================================================ */

:root {
  /* ---- Brand red (the one true accent) ---- */
  --red-50:  #FCEBEC;
  --red-100: #F7CCCD;
  --red-200: #EF9A9C;
  --red-300: #E5595C;
  --red-400: #D81F24;
  --red-500: #C6080C;   /* brand primary — the historic site red */
  --red-600: #A30609;   /* hover / pressed */
  --red-700: #7E0507;
  --red-800: #5A0405;

  /* ---- Warm neutral ink + paper ramp ---- */
  --neutral-0:   #FFFFFF;   /* card surface */
  --neutral-50:  #FBFAF8;   /* paper / page background */
  --neutral-100: #F4F2EF;
  --neutral-200: #E7E3DE;   /* hairline borders, dividers */
  --neutral-300: #D4CFC8;
  --neutral-400: #A8A199;   /* disabled text, placeholders */
  --neutral-500: #7C766E;   /* muted / secondary text */
  --neutral-600: #57524C;
  --neutral-700: #3A3733;
  --neutral-800: #252320;
  --neutral-900: #1B1A18;   /* ink — primary text, footer */

  /* ---- Semantic status (used sparingly in UI) ---- */
  --green-500:  #1F8A4D;
  --green-50:   #E7F4EC;
  --amber-500:  #C77700;
  --amber-50:   #FaF1E0;
  --blue-500:   #2563B0;
  --blue-50:    #E8F0Fa;

  /* ---- Tech-context accents (for badges / logos only) ---- */
  --aws-orange:    #FF9900;
  --aws-squid-ink: #232F3E;
  --magento-orange:#EE672F;

  /* ============================================================
     SEMANTIC ALIASES — prefer these in components
     ============================================================ */

  /* Brand */
  --brand:          var(--red-500);
  --brand-hover:    var(--red-600);
  --brand-pressed:  var(--red-700);
  --brand-tint:     var(--red-50);

  /* Surfaces */
  --surface-page:   var(--neutral-50);
  --surface-card:   var(--neutral-0);
  --surface-sunken: var(--neutral-100);
  --surface-ink:    var(--neutral-900);   /* dark sections / footer */
  --surface-brand:  var(--red-500);       /* red blocks / header */

  /* Text */
  --text-strong:    var(--neutral-900);
  --text-body:      var(--neutral-800);
  --text-muted:     var(--neutral-500);
  --text-faint:     var(--neutral-400);
  --text-on-brand:  var(--neutral-0);
  --text-on-ink:    var(--neutral-50);
  --text-link:      var(--red-600);
  --text-link-hover:var(--red-700);

  /* Lines */
  --border-hairline:var(--neutral-200);
  --border-strong:  var(--neutral-300);
  --border-brand:   var(--red-500);
  --border-ink:     var(--neutral-900);

  /* Focus */
  --focus-ring:     var(--red-400);
}

/* ---------- tokens/typography.css ---------- */
/* ============================================================
   Typography — Dan Sanderson Design System
   ------------------------------------------------------------
   Type pairing:
     Schibsted Grotesk — display & headings (modern editorial grotesk,
                         clean rounded D, confident at large sizes)
     Hanken Grotesk    — body & UI (warm, highly legible grotesque)
     JetBrains Mono    — code, kbd, eyebrow labels
   Scale is a ~1.25 major-third, tuned for an editorial blog.
   ============================================================ */

:root {
  /* ---- Families ---- */
  --font-display: 'Schibsted Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Hanken Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'SFMono-Regular', ui-monospace, monospace;

  /* ---- Weights ---- */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-black:    800;

  /* ---- Type scale (px @ 16px root) ---- */
  --text-2xs:  11px;
  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-md:   18px;
  --text-lg:   20px;
  --text-xl:   24px;
  --text-2xl:  30px;
  --text-3xl:  38px;
  --text-4xl:  48px;
  --text-5xl:  62px;
  --text-6xl:  80px;

  /* ---- Line heights ---- */
  --leading-none:    1;
  --leading-tight:   1.12;
  --leading-snug:    1.28;
  --leading-normal:  1.55;
  --leading-relaxed: 1.7;

  /* ---- Letter spacing ---- */
  --tracking-tight:  -0.02em;
  --tracking-snug:   -0.01em;
  --tracking-normal: 0;
  --tracking-wide:   0.04em;
  --tracking-eyebrow:0.14em;   /* mono eyebrow labels, uppercase */

  /* ---- Semantic roles ---- */
  --display-font:  var(--font-display);
  --display-weight:var(--weight-bold);
  --heading-font:  var(--font-display);
  --body-font:     var(--font-body);
  --eyebrow-font:  var(--font-mono);
}

/* ---------- tokens/spacing.css ---------- */
/* ============================================================
   Spacing & Layout — Dan Sanderson Design System
   ------------------------------------------------------------
   4px base grid. Generous editorial rhythm.
   ============================================================ */

:root {
  --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;
  --space-32:  128px;

  /* ---- Layout widths ---- */
  --measure-prose: 68ch;     /* comfortable reading column */
  --container-sm:  640px;
  --container-md:  860px;
  --container-lg:  1080px;
  --container-xl:  1280px;
  --gutter:        24px;

  /* ---- Component sizing ---- */
  --control-h-sm: 34px;
  --control-h-md: 42px;
  --control-h-lg: 52px;
}

/* ---------- tokens/effects.css ---------- */
/* ============================================================
   Effects — radii, borders, shadows, motion
   ------------------------------------------------------------
   SIGNATURE MOTIF: the "hard offset shadow". The legacy site
   used `box-shadow: 2px 2px #c6080c` on card hover — a crisp,
   un-blurred block shadow. We systematise it: cards and buttons
   lift into a hard red (or ink) offset shadow + small translate.
   No soft glows, no purple gradients. Edges stay confident.
   ============================================================ */

:root {
  /* ---- Corner radii (restrained — this brand is squarish) ---- */
  --radius-0:   0;
  --radius-sm:  4px;
  --radius-md:  6px;
  --radius-lg:  10px;
  --radius-xl:  16px;
  --radius-pill:999px;

  /* ---- Border widths ---- */
  --border-thin:   1px;
  --border-medium: 2px;   /* the classic 2px brand card border */
  --border-thick:  3px;

  /* ---- Soft shadows (used lightly — elevation, menus) ---- */
  --shadow-xs: 0 1px 2px rgba(27, 26, 24, 0.06);
  --shadow-sm: 0 2px 6px rgba(27, 26, 24, 0.08);
  --shadow-md: 0 8px 24px rgba(27, 26, 24, 0.10);
  --shadow-lg: 0 18px 48px rgba(27, 26, 24, 0.14);

  /* ---- SIGNATURE hard offset shadows ---- */
  --shadow-hard-red:  4px 4px 0 0 var(--red-500);
  --shadow-hard-red-lg: 6px 6px 0 0 var(--red-500);
  --shadow-hard-ink:  4px 4px 0 0 var(--neutral-900);
  --shadow-hard-press: 2px 2px 0 0 var(--red-500);

  /* ---- Focus ring ---- */
  --ring-focus: 0 0 0 3px var(--red-100), 0 0 0 1px var(--red-500);

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);   /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --ease-in:       cubic-bezier(0.4, 0, 1, 1);    /* @kind other */
  --duration-fast: 120ms;                         /* @kind other */
  --duration-base: 200ms;                         /* @kind other */
  --duration-slow: 320ms;                         /* @kind other */
}

/* ---------- tokens/base.css ---------- */
/* ============================================================
   Base — element defaults bound to tokens
   ------------------------------------------------------------
   Opinionated but light reset + brand typography defaults so any
   page that links styles.css inherits the Dan Sanderson voice.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--text-strong);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 0.5em;
  text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-xl); }
h4 { font-size: var(--text-lg); }

p { margin: 0 0 1em; text-wrap: pretty; }

a {
  color: var(--text-link);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: color var(--duration-fast) var(--ease-standard);
}
a:hover { color: var(--text-link-hover); text-decoration: underline; }

small { font-size: var(--text-sm); }

code, kbd, samp, pre {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

code {
  background: var(--surface-sunken);
  border: var(--border-thin) solid var(--border-hairline);
  border-radius: var(--radius-sm);
  padding: 0.12em 0.38em;
  color: var(--neutral-800);
}

pre {
  background: var(--neutral-900);
  color: var(--neutral-50);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  overflow-x: auto;
  line-height: var(--leading-snug);
}
pre code { background: none; border: 0; padding: 0; color: inherit; }

hr {
  border: 0;
  border-top: var(--border-thin) solid var(--border-hairline);
  margin: var(--space-8) 0;
}

::selection { background: var(--red-200); color: var(--neutral-900); }

img { max-width: 100%; display: block; }

/* ---- Brand utility: sans eyebrow label ---- */
.ds-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--brand);
}