/* ============================================
   Design tokens

   Every colour, type size and radius the site uses should come from here.

   Each colour is a light-dark() pair, so the site follows the reader's
   light or dark preference with no per-element overrides. The dark half is
   the astrophotography palette: astrophotography posts force
   color-scheme: dark (astrophotography.css), and starfield.css paints the
   night sky behind any page that is dark.
   ============================================ */

:root {
  color-scheme: light dark;

  /* Colour */
  --color-background: light-dark(oklch(0.995 0.01 106), oklch(0.057 0.025 268));
  --color-surface: light-dark(oklch(0.98 0.008 106), oklch(0.1 0.035 268));       /* footer, quiet panels */
  --color-field: light-dark(oklch(1 0 0), oklch(0.1 0.035 268));                  /* form fields */
  --color-headline: light-dark(oklch(0.36 0.09 246), oklch(0.94 0.02 255));       /* titles, article text */
  --color-paragraph: light-dark(oklch(0.5 0.03 252), oklch(0.8 0.03 255));        /* secondary copy */
  --color-muted: light-dark(oklch(0.53 0.02 252), oklch(0.68 0.04 255));          /* dates, meta; 4.5:1 */
  --color-link: light-dark(oklch(0.46 0.16 246), oklch(0.76 0.13 213));
  --color-nav: light-dark(oklch(0.28 0.07 255), oklch(0.86 0.03 255));            /* navbar and footer links */
  --color-on-strong: light-dark(oklch(1 0 0), oklch(0.12 0.03 268));              /* text on headline-filled buttons */
  --color-hover-wash: light-dark(oklch(0.95 0.02 255 / 0.5), oklch(1 0 0 / 0.07));
  --color-rule: light-dark(oklch(0.9 0.01 106), oklch(1 0 0 / 0.12));
  --color-rule-soft: light-dark(oklch(0.93 0.008 106), oklch(1 0 0 / 0.08));
  --color-field-border: light-dark(oklch(0.88 0.01 106), oklch(1 0 0 / 0.18));
  --color-field-border-hover: light-dark(oklch(0.8 0.02 250), oklch(1 0 0 / 0.32));
  --color-focus-wash: light-dark(oklch(0.46 0.16 246 / 0.25), oklch(0.76 0.13 213 / 0.35));
  --color-inline-code: light-dark(oklch(0.95 0.01 106), oklch(1 0 0 / 0.08));
  --color-error: light-dark(oklch(0.52 0.15 22), oklch(0.74 0.14 22));
  --color-error-wash: light-dark(oklch(0.98 0.02 20 / 0.96), oklch(0.22 0.06 20 / 0.96));
  --color-warm: light-dark(oklch(0.46 0.13 44), oklch(0.78 0.12 60));             /* recipes */
  --color-warm-wash: light-dark(oklch(0.95 0.035 62), oklch(0.3 0.06 50));
  --color-error-rule: light-dark(oklch(0.6 0.2 20 / 0.2), oklch(0.74 0.14 22 / 0.3));
  --color-tip: light-dark(oklch(0.6 0.12 160), oklch(0.72 0.12 160));   /* "tip" callouts */

  /* Code blocks are dark in both schemes, a shade deeper at night. */
  --color-code-bg: light-dark(oklch(0.2 0.02 250), oklch(0.09 0.035 268));
  --color-code-header: light-dark(oklch(0.24 0.025 250), oklch(0.12 0.04 270));
  --color-code-rule: light-dark(oklch(0.46 0.04 250 / 0.35), oklch(1 0 0 / 0.12));
  --color-code-text: oklch(0.95 0.01 106);
  --color-code-muted: oklch(0.79 0.07 245);
  --color-code-hover: oklch(1 0 0 / 0.08);
  --color-code-scrollbar: oklch(0.52 0.05 246 / 0.55);

  /* Shadows */
  --shadow-soft: 0 10px 22px oklch(0 0 0 / 0.05);
  --shadow-raised: 0 10px 30px oklch(0 0 0 / 0.16);
  --shadow-float: 0 20px 45px oklch(0.19 0.02 245 / 0.14);
  --shadow-sheet: 0 24px 64px oklch(0 0 0 / 0.08), 0 3px 12px oklch(0 0 0 / 0.04);

  /* Type */
  --font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono: ui-monospace, 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace;
  --font-serif: 'Georgia', 'Times New Roman', serif;
  --font-display-editorial: 'Cormorant Garamond', 'Georgia', serif;

  --text-2xs: 0.75rem;    /* code block labels, tooltips */
  --text-xs: 0.8125rem;   /* meta, captions, hints */
  --text-code: 0.875rem;  /* code blocks */
  --text-sm: 0.9375rem;   /* UI: links, buttons, labels */
  --text-base: 1rem;      /* form fields */
  --text-md: 1.0625rem;   /* body copy */
  --text-lg: clamp(1.05rem, 1.4vw, 1.2rem);           /* intros */
  --text-section: clamp(1.75rem, 2.6vw, 2.25rem);     /* section headings */
  --text-title: clamp(2.75rem, 6vw, 4.5rem);          /* page titles */

  /* Space: an 8px-based scale */
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;

  /* Breakpoints. Media queries can't read custom properties, so these are
     written out where used; keep to these three:
       40rem  phone        (max-width: 40rem)
       52rem  tablet       (max-width: 52rem) / (min-width: 52rem)
       80rem  wide screen  (min-width: 80rem), room in the margins */

  /* Layout */
  --page-width: 64rem;
  --page-gutter: max(1.25rem, 5vw);
  --measure: 42rem;   /* comfortable line length for article text */

  /* Shape */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-pill: 999px;

  /* Motion */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 200ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Keyboard focus ring */
  --focus-ring-width: 2px;
  --focus-ring-offset: 3px;

  /* Navbar */
  --navbar-height: 4rem;
  --navbar-blur: 16px;
}

/* The theme toggle (theme.js) records an explicit choice as data-theme on
   <html>; without one, the reader's system preference decides. */
:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

/* Paper is light: printing a dark page wastes ink and loses the stars. */
@media print {
  :root,
  :root[data-theme] {
    color-scheme: light;
  }
}

/* Base Styles */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-optical-sizing: auto;
  font-weight: 300;
  background-color: var(--color-background);
  color: var(--color-paragraph);
}