/* leopinero.com — tokens.css
   Every design value lives here. site.css reads only these properties.
   Light ("Paper") on :root; dark ("Night") under prefers-color-scheme and [data-theme="dark"]. */

/* ---- Fonts: 4 self-hosted woff2 files, SIL OFL 1.1, Latin subset ---- */
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/source-serif-4-400.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/source-serif-4-400-italic.woff2") format("woff2"); }
@font-face { font-family: "Source Serif 4"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("../fonts/source-serif-4-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("../fonts/ibm-plex-mono-400.woff2") format("woff2"); }

:root {
  /* Font families */
  --font-text: "Source Serif 4", "Iowan Old Style", Georgia, serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Weights (only these three ship) */
  --weight-regular: 400;
  --weight-strong: 600;

  /* Type scale — phone values; desktop overrides below */
  --size-meta: 0.75rem;      /* 12px  mono labels, dates, file sizes */
  --size-small: 0.875rem;    /* 14px  sidenotes, captions, footer */
  --size-body: 1.0625rem;    /* 17px  body text */
  --size-h3: 1.1875rem;      /* 19px */
  --size-h2: 1.375rem;       /* 22px */
  --size-h1: 1.75rem;        /* 28px  page titles */
  --size-name: 2rem;         /* 32px  name on the home page */
  --size-code: 0.875em;      /* relative to surrounding text */

  --leading-body: 1.6;
  --leading-tight: 1.2;
  --leading-small: 1.45;
  --tracking-meta: 0.06em;   /* mono labels are set in caps */

  /* Spacing — 4px base */
  --space-1: 0.25rem;  /* 4  */
  --space-2: 0.5rem;   /* 8  */
  --space-3: 0.75rem;  /* 12 */
  --space-4: 1rem;     /* 16 */
  --space-5: 1.5rem;   /* 24 */
  --space-6: 2rem;     /* 32 */
  --space-7: 3rem;     /* 48 */
  --space-8: 4.5rem;   /* 72 */

  /* Layout */
  --measure: 36rem;          /* text column, ~68 characters at desktop body size */
  --margin-col: 15rem;       /* sidenote / photo column on wide screens */
  --margin-gap: 2.5rem;      /* gap between text column and margin column */
  --page-pad: 1rem;          /* side gutter on phones (16px at 360px wide) */
  --col-label: 8.5rem;       /* link-list label column (home) */
  --col-date: 6.5rem;        /* documents: date column */
  --col-doc-meta: 10rem;     /* documents: format + size column (wide only) */
  --photo-max: 20rem;        /* home photo on phones and tablets */
  --figure-min: 40rem;       /* .fig-scroll drawings never shrink below this */

  /* Breakpoints — documentation only: CSS can't read custom properties inside @media.
     site.css hardcodes the same values. Change both together. */
  --bp-desktop: 40em;        /* 640px: desktop type sizes */
  --bp-wide: 60em;           /* 960px: margin column + sidenotes appear */

  /* Radius — almost square */
  --radius-1: 2px;           /* code blocks, focus ring */

  /* Rules */
  --rule-width: 1px;

  /* Colour — Paper (light) */
  --color-bg: #FAFAF9;           /* page */
  --color-bg-alt: #EFF0F0;       /* code blocks, inline code, table header */
  --color-text: #16181B;         /* body text: 17.0:1 on bg */
  --color-text-muted: #545A61;   /* descriptions, captions: 6.7:1 on bg */
  --color-text-faint: #666C73;   /* dates, sizes, mono meta: 5.1:1 on bg */
  --color-rule: #D5D8DB;         /* hairlines (decorative, no contrast requirement) */
  --color-link-line: #8C939A;    /* resting underline under links */
  --color-accent: #B23A00;       /* the one saturated colour: hover underline, focus, current page. 5.8:1 on bg */
  --color-focus: var(--color-accent);
  --color-selection: #F3D9CC;

  color-scheme: light;
}

/* ---- Desktop sizes ---- */
@media (min-width: 40em) {
  :root {
    --size-body: 1.125rem;   /* 18px */
    --size-small: 0.9375rem; /* 15px */
    --size-h3: 1.25rem;      /* 20px */
    --size-h2: 1.5rem;       /* 24px */
    --size-h1: 2.125rem;     /* 34px */
    --size-name: 2.5rem;     /* 40px */
    --page-pad: 2rem;
  }
}

/* ---- Night (dark): follows the OS unless the reader picked light ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #0F1012;
    --color-bg-alt: #181A1D;
    --color-text: #E3E5E7;         /* 15.1:1 */
    --color-text-muted: #A0A7AE;   /* 7.8:1 */
    --color-text-faint: #878E95;   /* 5.7:1 */
    --color-rule: #2D3136;
    --color-link-line: #6B737B;
    --color-accent: #FF7A3D;       /* 7.4:1 */
    --color-selection: #4A2A1C;
    color-scheme: dark;
  }
}
/* Night, chosen with the toggle. Same values as above. */
:root[data-theme="dark"] {
  --color-bg: #0F1012;
  --color-bg-alt: #181A1D;
  --color-text: #E3E5E7;
  --color-text-muted: #A0A7AE;
  --color-text-faint: #878E95;
  --color-rule: #2D3136;
  --color-link-line: #6B737B;
  --color-accent: #FF7A3D;
  --color-selection: #4A2A1C;
  color-scheme: dark;
}