@layer tokens, base, layout, components, utilities;

/* ==========================================================================
   Minnowsoft — design tokens
   --------------------------------------------------------------------------
   The layer order declared on line 1 fixes precedence regardless of the
   order in which the stylesheets are loaded:
     tokens < base < layout < components < utilities

   Two tiers (see DESIGN.md §5):
     1. Primitives — named by value; consumed only inside this file.
     2. Semantic   — named by role; the only tokens other layers may use.

   Every hex, pixel and millisecond on the site lives here (COL-1, TYP-1,
   TYP-2, STR-6, STR-7, MOT-2, GOV-4). A missing value is added as a token,
   never written as a literal elsewhere.

   Media queries: two breakpoints only, 48em and 64em, mobile-first; the
   one-statement page currently needs neither. The only other queries are
   (hover: hover), (pointer: coarse) and (prefers-reduced-motion: reduce).
   ========================================================================== */

@layer tokens {
  :root {
    /* ---- Tier 1: primitives (named by value) --------------------------- */

    /* Light: warm paper, warm ink, old gold. */
    --paper-50:  #fbf8f2;
    --paper-100: #f5f0e6;
    --sand-300:  #d6cdbd;
    --ink-900:   #221e19;
    --ink-600:   #5d554a;
    --gold-700:  #7c5c1c;

    /* Dark: warm near-black, bone, metallic gold. Never clinical white. */
    --night-900: #141210;
    --night-800: #1d1a16;
    --night-600: #3b362f;
    --bone-100:  #ebe4d6;
    --bone-400:  #a89f90;
    --gold-300:  #d4b25a;

    /* ---- Tier 2: semantic (named by role) ------------------------------ */

    /* Colour roles, light scheme first as the plain fallback. Contrast on
       the canvas, light / dark (WCAG 2.2, 1.4.3 and 1.4.11):
         text        14.6:1 / 14.8:1   (AAA)
         text-muted   6.5:1 /  7.1:1   (AA)
         accent       5.4:1 /  9.2:1   (AA as text; the underline and ring
                                        clear 3:1 with room to spare)
       The accent marks only where the reader can act: link underlines, the
       current section, hover, focus (COL-7). It never fills a surface and
       never colours a heading. */
    --color-canvas:      var(--paper-100);
    --color-surface:     var(--paper-50);
    --color-rule:        var(--sand-300);
    --color-text:        var(--ink-900);
    --color-text-muted:  var(--ink-600);
    --color-accent:      var(--gold-700);
    --color-focus:       var(--color-accent);

    /* Type roles. Prose is the company speaking; UI is the interface. */
    --font-prose: "EB Garamond", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
    --font-ui:    "Source Sans 3", "Segoe UI", "Helvetica Neue", Arial, sans-serif;

    /* Sizes in rem; fluid where a size has to breathe with the viewport.
       Body sits at 18–20px, which is the middle of Butterick's 15–25. */
    --text-display:  clamp(2.625rem, 1.75rem + 3.4vw, 4.5rem);
    --text-h2:       clamp(1.75rem, 1.45rem + 1.1vw, 2.25rem);
    --text-h3:       1.5rem;
    --text-lede:     clamp(1.25rem, 1.1rem + 0.55vw, 1.5rem);
    --text-body:     clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);
    --text-caption:  1.0625rem;
    --text-wordmark: 1.375rem;
    --text-ui-lg:    1.0625rem;
    --text-ui:       0.9375rem;
    --text-ui-sm:    0.875rem;

    --leading-display: 1.05;
    --leading-heading: 1.2;
    --leading-lede:    1.45;
    --leading-body:    1.55;
    --leading-ui:      1.4;

    --measure: 62ch;

    /* Space scale (STR-6). Section rhythm and the page gutter are fluid. */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 6rem;
    --space-section: clamp(4.5rem, 3rem + 5vw, 8rem);
    --gutter: clamp(1.25rem, 0.75rem + 2.5vw, 2.5rem);

    /* Size */
    --size-header:   4rem;
    --container-max: 70rem;

    /* Geometry (STR-2): square panels, a 2px ceiling on the one control. */
    --radius-panel:   0;
    --radius-control: 2px;

    /* Motion (MOT-2): one duration, one easing that never overshoots.
       The only things that transition are colours. */
    --duration-fast: 120ms;
    --ease-standard: cubic-bezier(0.2, 0, 0, 1);

    /* Layers (STR-7) */
    --z-header: 10;
    --z-skip:   30;

    /* Touch (LAY-3, A11Y-4): the 24px floor everywhere, 44px for fingers.
       Consumed as max(<desktop size>, var(--tap-target-min)). */
    --tap-target-min: 24px;
  }

  /* The page follows the reader's colour preference with no script and no
     flash. Browsers without light-dark() keep the plain light tokens above. */
  @supports (color: light-dark(#000, #fff)) {
    :root {
      color-scheme: light dark;

      --color-canvas:      light-dark(var(--paper-100), var(--night-900));
      --color-surface:     light-dark(var(--paper-50),  var(--night-800));
      --color-rule:        light-dark(var(--sand-300),  var(--night-600));
      --color-text:        light-dark(var(--ink-900),   var(--bone-100));
      --color-text-muted:  light-dark(var(--ink-600),   var(--bone-400));
      --color-accent:      light-dark(var(--gold-700),  var(--gold-300));
    }
  }

  @media (pointer: coarse) {
    :root {
      --tap-target-min: 44px;
    }
  }

  /* Reduced motion (MOT-3): the one transition duration collapses to zero.
     Smooth anchor scrolling is switched off alongside it in 02-base.css. */
  @media (prefers-reduced-motion: reduce) {
    :root {
      --duration-fast: 0ms;
    }
  }
}