/*
 * Design tokens.
 *
 * One accent, a warm neutral surface, a charcoal ink. Everything downstream
 * references these custom properties so the whole system retunes from here.
 * Swiss/engineering-notebook restraint: a small, deliberate scale.
 */

:root {
  /* ---- Color: warm off-white surface, charcoal ink, single accent ---- */
  --color-bg:            #faf9f6; /* warm off-white */
  --color-bg-subtle:     #f2f0ea; /* cards, code, table stripes */
  --color-bg-inset:      #ece9e1;
  --color-border:        #e0ddd3;
  --color-border-strong: #cbc7ba;

  --color-ink:           #1b1b1a; /* primary text */
  --color-ink-soft:      #44423d; /* secondary text */
  --color-ink-muted:     #6b6860; /* meta, captions */

  --color-accent:        #a8462a; /* burnt rust / terracotta */
  --color-accent-strong: #8a3920; /* hover/active — meets AA on the surface */
  --color-accent-wash:   #f6ebe6; /* tinted backgrounds, badges */

  --color-focus:         #1d6fb8; /* focus ring — distinct from accent */

  /* Component tokens that flip with the theme (see dark overrides below). */
  --cta-bg:    #1b1b1a;  /* standout contact band */
  --cta-text:  #faf9f6;
  --on-accent: #ffffff;  /* text on an accent fill */
  --code-bg:   #f4f2ec;  /* code blocks stay light so Pygments stays legible */
  --code-ink:  #1b1b1a;

  /* ---- Typography ---- */
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", "SF Mono",
               "Menlo", "Consolas", monospace;

  --text-xs:   0.78rem;
  --text-sm:   0.875rem;
  --text-base: 1.0625rem;                         /* ~17px, comfortable reading */
  --text-lg:   1.1875rem;
  --text-xl:   clamp(1.35rem, 1.1rem + 1.1vw, 1.6rem);
  --text-2xl:  clamp(1.7rem, 1.3rem + 1.8vw, 2.2rem);
  --text-3xl:  clamp(2.2rem, 1.6rem + 2.8vw, 3.1rem);
  --text-hero: clamp(2.6rem, 1.8rem + 3.6vw, 4rem);

  --leading-tight:  1.18;
  --leading-snug:   1.35;
  --leading-normal: 1.65;          /* body copy */

  --tracking-tight: -0.015em;
  --tracking-wide:  0.04em;

  --weight-normal:   400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  /* ---- Spacing scale (8px base, with a couple of half-steps) ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* ---- Layout ---- */
  --measure:        66ch;   /* ideal reading width */
  --container:      72rem;  /* wide content (grids) */
  --container-text: 44rem;  /* prose column */

  /* ---- Borders & radii ---- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --border-hairline: 1px solid var(--color-border);

  /* ---- Shadows (restrained; mostly hairlines do the work) ---- */
  --shadow-sm: 0 1px 2px rgba(27, 27, 26, 0.06);
  --shadow-md: 0 2px 8px rgba(27, 27, 26, 0.08);

  /* ---- Motion ---- */
  --transition: 120ms ease;

  color-scheme: light;
}

/* ---- Dark theme ----
   Two entry points share one set of values:
   1. the OS prefers dark AND the user hasn't forced light, or
   2. the user explicitly chose dark via the toggle ([data-theme="dark"]).
   Only colour tokens flip; spacing/type/etc. are unchanged. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg:            #171614; /* warm near-black */
    --color-bg-subtle:     #201e1b;
    --color-bg-inset:      #2a2723;
    --color-border:        #322e29;
    --color-border-strong: #4a443c;

    --color-ink:           #ece9e3;
    --color-ink-soft:      #c4bdb2;
    --color-ink-muted:     #908a7e;

    --color-accent:        #d9714e; /* lifted for contrast on dark */
    --color-accent-strong: #e88a63;
    --color-accent-wash:   #2c1f1a;

    --color-focus:         #5aa8e6;

    --cta-bg:    #211e1a;  /* raised panel on the dark page */
    --cta-text:  #ece9e3;
    --on-accent: #1b1b1a;  /* dark text reads better on the lifted accent */

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg:            #171614;
  --color-bg-subtle:     #201e1b;
  --color-bg-inset:      #2a2723;
  --color-border:        #322e29;
  --color-border-strong: #4a443c;

  --color-ink:           #ece9e3;
  --color-ink-soft:      #c4bdb2;
  --color-ink-muted:     #908a7e;

  --color-accent:        #d9714e;
  --color-accent-strong: #e88a63;
  --color-accent-wash:   #2c1f1a;

  --color-focus:         #5aa8e6;

  --cta-bg:    #211e1a;
  --cta-text:  #ece9e3;
  --on-accent: #1b1b1a;

  color-scheme: dark;
}