/* ============================================================
   THINKING INSIDE THE BOX — DESIGN TOKENS
   Palette: Considered Authority — near-black navy on cool paper,
   deep teal accent used at roughly 1-2% of page surface.
   Type: Newsreader (editorial serif, optical sizes) + IBM Plex Sans (UI).

   Material 3 is used here as a lean CSS layer, per the Hummingbird playbook:
   the role names and the state-layer / elevation / typescale concepts,
   hand-written as custom properties. No framework import, no generated theme
   JSON, no runtime.
   ============================================================ */

:root {
  /* ---------- Core palette ---------- */
  --ink:          #0E1B2C; /* near-black navy. Primary text and marks. Never #000. */
  --paper:        #F2F4F7; /* cool off-white. The canvas. Never #FFF. */
  --accent:       #0B5E5A; /* deep teal. 6.9:1 on paper — safe as text. */
  --accent-hover: #094B47;
  --accent-soft:  #E2EDEB; /* tinted teal surface — chips, callouts */
  --support:      #C4CCD6; /* cool grey. Decorative only. */
  --slate:        #4A5A6E; /* 6.4:1 on paper — meta, captions */

  /* ---------- Neutral ramp ---------- */
  --paper-2:     #E8ECF1; /* card surface, alt section */
  --paper-3:     #DDE3EA; /* hover surface */
  --rule:        #D5DCE4; /* decorative hairline */
  --rule-strong: #B6BFCB; /* table borders, footer edge */
  --outline:     #7C8798; /* 3.3:1 — the one derived value. Input and chip
                             borders need 3:1 and --rule-strong is 1.7:1. */
  --ink-2:       #233246; /* 12.9:1 — long-form body */
  --ink-3:       #38465B; /* tertiary */
  --error:       #8C2F22;

  /* ============================================================
     MATERIAL 3 — colour roles
     ============================================================ */
  --md-sys-color-primary:                var(--accent);
  --md-sys-color-on-primary:             var(--paper);
  --md-sys-color-primary-container:      var(--accent-soft);
  --md-sys-color-on-primary-container:   var(--accent);
  --md-sys-color-secondary:              var(--slate);
  --md-sys-color-on-secondary:           var(--paper);
  --md-sys-color-tertiary:               var(--support);

  --md-sys-color-surface:                var(--paper);
  --md-sys-color-surface-container-low:  var(--paper-2);
  --md-sys-color-surface-container:      var(--paper-2);
  --md-sys-color-surface-container-high: var(--paper-3);
  --md-sys-color-on-surface:             var(--ink);
  --md-sys-color-on-surface-variant:     var(--slate);

  --md-sys-color-inverse-surface:        var(--ink);
  --md-sys-color-inverse-on-surface:     var(--paper);
  --md-sys-color-inverse-primary:        #8FD0CC;

  --md-sys-color-outline:                var(--outline);
  --md-sys-color-outline-variant:        var(--rule);
  --md-sys-color-error:                  var(--error);
  --md-sys-color-on-error:               var(--paper);

  /* ============================================================
     MATERIAL 3 — shape
     Square corners throughout. The scale is kept by name so the vocabulary
     matches the spec; every step resolves to 0.
     ============================================================ */
  --md-sys-shape-corner-none:        0;
  --md-sys-shape-corner-extra-small: 0;
  --md-sys-shape-corner-small:       0;
  --md-sys-shape-corner-medium:      0;
  --md-sys-shape-corner-large:       0;
  --md-sys-shape-corner-full:        0;

  /* ---------- M3 state layers ---------- */
  --md-sys-state-hover-opacity:   0.06;
  --md-sys-state-focus-opacity:   0.10;
  --md-sys-state-pressed-opacity: 0.12;

  /* ---------- M3 elevation. Editorial work sits flat. ---------- */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 0 rgba(14,27,44,0.04), 0 1px 2px rgba(14,27,44,0.06);
  --md-sys-elevation-2: 0 2px 4px rgba(14,27,44,0.06), 0 8px 24px rgba(14,27,44,0.08);
  --md-sys-elevation-3: 0 12px 40px rgba(14,27,44,0.18);

  /* ---------- M3 motion ---------- */
  --md-sys-motion-easing-standard:   cubic-bezier(0.2, 0.6, 0.2, 1);
  --md-sys-motion-easing-emphasized: cubic-bezier(0.16, 1, 0.3, 1);
  --md-sys-motion-duration-short:    120ms;
  --md-sys-motion-duration-medium:   200ms;

  /* ============================================================
     TYPE
     Newsreader carries display AND body — this is a serif-led editorial
     site, not a sans one. Its optical-size axis is used: opsz 72 on hero
     and title, 36 on section heads, default on body.
     ============================================================ */
  --font-serif: 'Newsreader', 'Iowan Old Style', 'Source Serif Pro', Charter, Georgia, 'Times New Roman', serif;
  --font-sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:  ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-hero:    clamp(2.5rem, 4.6vw, 4rem);
  --fs-display: clamp(2.25rem, 4vw, 3.25rem);
  --fs-h1:      clamp(1.875rem, 3vw, 2.5rem);
  --fs-h2:      1.625rem;
  --fs-h3:      1.375rem;
  --fs-h4:      1.0625rem;
  --fs-lede:    1.25rem;
  --fs-body:    1.0625rem;
  --fs-ui:      0.875rem;
  --fs-meta:    0.8125rem;
  --fs-eyebrow: 0.6875rem;

  --lh-display: 1.06;
  --lh-heading: 1.18;
  --lh-body:    1.65;
  --lh-ui:      1.45;

  --tracking-tight: -0.022em;
  --tracking-snug:  -0.015em;
  --tracking-wide:  0.10em;
  --tracking-xwide: 0.20em;

  /* ---------- Spacing, 4px base ---------- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 40px; --s-8: 56px;
  --s-9: 64px; --s-10: 80px; --s-11: 96px; --s-12: 128px;

  /* ---------- Measure and containers ---------- */
  --measure:        64ch;
  --container:      1180px;
  --container-narrow: 760px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --md-sys-motion-duration-short: 1ms; --md-sys-motion-duration-medium: 1ms; }
}