/* The system's tokens, in the package's tokens layer so a page's own CSS can still adjust one.
   Values are @elements/ui scale steps wherever one fits; the few that are not (the display and
   page-title clamps, the reading size) are named here once.

   Ink and rules are one family for every brand: jmurphy.studio's warm neutrals. A brand sets only
   its paper, accent and band (brands.css). The blocks key on attributes rather than :root alone,
   so a section with its own data-theme (the /__design specimen) takes that mode's values. */
@layer reset, tokens, base, components, templates, utilities, overrides;

@layer tokens {
  :root {
    /* TYPE: the serif reads and titles, the sans runs the interface. */
    --font-serif: 'Source Serif 4 Variable', 'Source Serif 4 Fallback', Georgia, serif;
    --font-sans: 'Inter Variable', 'Inter Fallback', system-ui, sans-serif;
    --font-body: var(--font-serif);
    --font-heading: var(--font-serif);
    --font-ui: var(--font-sans);
    --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

    --weight-body: var(--weight-regular);
    --weight-heading: var(--weight-semibold);
    --weight-ui: var(--weight-medium);
    --weight-strong: var(--weight-semibold);
    --tracking-heading: -0.005em;
    --tracking-ui: var(--tracking-normal);

    /* One scale for every site. Display is for a hero title only; a page title is h1. */
    --text-display: clamp(2.75rem, 2rem + 3vw, 4rem);
    --text-h1: clamp(2.25rem, 1.9rem + 1.5vw, 2.75rem);
    --text-h2: var(--text-xl);
    --text-h3: var(--text-lg);
    --text-h4: var(--text-md);
    --text-title: var(--text-lg);
    --text-lede: var(--text-lg);
    --text-body: var(--text-md);
    --text-reading: 1.1875rem;
    --text-ui: var(--text-sm);
    --text-ui-sm: var(--text-xs);
    --text-ui-lg: 0.9375rem;
    --text-caption: var(--text-sm);
    --text-label: var(--text-sm);
    --text-kicker: var(--text-xs);

    --leading-display: 1.1;
    --leading-h1: 1.15;
    --leading-heading: 1.3;
    --leading-lede: var(--leading-body);
    --leading-reading: 1.7;

    /* THE FRAME: one gutter for header, main and footer; a wide frame for marketing and shop
       pages, a text frame for reading sites, and a measure for prose inside the wide frame. */
    --site-gutter: var(--space-6);
    --site-wide: 72rem;
    --site-text: 42rem;
    --site-measure: 40rem;
    /* The wide frame's inset from the window's edge, for a full-width section whose content
       must line up with the header: the gutter, or more once the window is wider than the
       frame. It is a padding, so its percentage is of the section's width. */
    --site-inset: max(var(--site-gutter), (100% - var(--site-wide)) / 2);
    --page-space: var(--space-12);
    --section-space: var(--space-20);
    --stack-sm: var(--space-4);
    --stack-md: var(--space-6);
    --stack-lg: var(--space-10);

    /* SHAPE: 3px on controls, square surfaces, no shadows on the page. */
    --radius-control: 3px;
    --radius-surface: 0px;
    --radius-overlay: 3px;
    --radius-dialog: 3px;
    --radius-tag: 0px;
    --radius-item: 0px;

    --control-height: 2.75rem;
    --control-height-sm: 2.25rem;
    --control-height-lg: 3.25rem;
    --control-bg: var(--bg-elevated);
    --control-border: var(--rule-strong);
    --control-shadow: none;
    --surface-shadow: none;

    /* One focus ring for everything: 2px of the focus color, 3px off the edge. */
    --focus-ring-width: 2px;
    --focus-ring-offset: 3px;
    --focus-ring-inner: var(--bg);
    --focus-ring-color: var(--focus);

    --link: var(--ink);
    --focus: var(--accent);
    --band: var(--ink);
    --band-ink: var(--bg);
  }

  @media (max-width: 980px) {
    :root {
      --site-gutter: var(--space-5);
    }
  }

  @media (max-width: 640px) {
    :root {
      --site-gutter: var(--space-4);
      --page-space: var(--space-10);
      --section-space: var(--space-14);
    }
  }

  :root,
  [data-theme='light'] {
    color-scheme: light;

    --bg: #fcfbf8;
    --bg-soft: #f6f4ee;
    --bg-muted: #efece4;
    --bg-panel: var(--bg-soft);
    --bg-elevated: #fffefb;
    --ink: #1b1a17;
    --ink-soft: #3a3833;
    --ink-dim: #696459;
    --ink-faint: #9b968a;
    --rule: #e2ded3;
    --rule-soft: #ece9e1;
    --rule-strong: #c9c4b6;
    --mark-bg: oklch(0.93 0.09 92);
    --overlay-shadow: 0 10px 30px -12px rgb(40 30 20 / 0.28);

    /* Dark logos on paper are lightened to the ink at night. */
    --logo-filter: none;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme='light']) {
      color-scheme: dark;

      --bg: #161513;
      --bg-soft: #1d1c19;
      --bg-muted: #26241f;
      --bg-panel: var(--bg-soft);
      --bg-elevated: #1d1c19;
      --ink: #ece8de;
      --ink-soft: #d2ccbe;
      --ink-dim: #a39d8f;
      --ink-faint: #757066;
      --rule: #34312b;
      --rule-soft: #282621;
      --rule-strong: #4a463e;
      --mark-bg: oklch(0.45 0.08 85);
      --overlay-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.6);
      --logo-filter: brightness(0) invert(0.88);

      /* The editorial theme restates these in its dark block; the system's values win back. */
      --link: var(--ink);
      --focus: var(--accent);
      --focus-ring-color: var(--focus);
      --focus-ring-inner: var(--bg);
      --control-border: var(--rule-strong);
    }
  }

  [data-theme='dark'] {
    color-scheme: dark;

    --bg: #161513;
    --bg-soft: #1d1c19;
    --bg-muted: #26241f;
    --bg-panel: var(--bg-soft);
    --bg-elevated: #1d1c19;
    --ink: #ece8de;
    --ink-soft: #d2ccbe;
    --ink-dim: #a39d8f;
    --ink-faint: #757066;
    --rule: #34312b;
    --rule-soft: #282621;
    --rule-strong: #4a463e;
    --mark-bg: oklch(0.45 0.08 85);
    --overlay-shadow: 0 10px 30px -12px rgb(0 0 0 / 0.6);
    --logo-filter: brightness(0) invert(0.88);
    --link: var(--ink);
    --focus: var(--accent);
    --focus-ring-color: var(--focus);
    --focus-ring-inner: var(--bg);
    --control-border: var(--rule-strong);
  }
}