/* gilchrist concept page: token pack. Maps The Gilchrist Collection's public design tokens
 * (see notes/design-tokens.md) onto the contract in tokens.contract.css.
 * Load order: tokens.contract.css, THIS FILE, components.css, portfolio.css, page.css.
 * Components and parts use SEMANTIC tokens only; primitives (--gl-*) are for this file,
 * zw-cta.css and zx-dark.css.
 *
 * Gold rule: #B28A56 (--gl-gold) is 3.15:1 on white and 2.80:1 on cream, so it is for borders,
 * rules, icons and decoration only. Gold that carries text on a light ground is #7A5C2E
 * (6.18:1 on white, 5.48:1 on cream) and is what --color-accent holds.
 * Muted text #6B6B6B: 5.33:1 on white, 4.73:1 on cream.
 * Fonts: EB Garamond (display) and Figtree (body), loaded by the Google Fonts link in the skeleton. */

:root {
  /* primitives */
  --gl-ink:        #090909;   /* 19.9:1 on white, 17.7:1 on cream */
  --gl-ink-soft:   #292626;
  --gl-muted:      #6B6B6B;   /* 5.33:1 on white, 4.73:1 on cream */
  --gl-white:      #FFFFFF;
  --gl-cream:      #F4F1EB;   /* section bands, footer */
  --gl-cream-soft: #FAF8F1;
  --gl-line:       #D8D3C8;   /* hairlines (decorative, not text) */
  --gl-stone:      #C2BBA7;
  --gl-gold:       #B28A56;   /* borders, icons, rules, decoration only on light grounds */
  --gl-gold-text:  #7A5C2E;   /* text-safe gold on light grounds */
  --gl-gold-deep:  #5E4522;   /* hover on light: 8.6:1 on white */
  --gl-good:       #0A6E4F;
  --gl-alert:      #B3261E;

  /* fonts */
  --font-display: "EB Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* spacing */
  --spacing-xs:  4px;
  --spacing-sm:  8px;
  --spacing-md:  16px;
  --spacing-lg:  24px;
  --spacing-xl:  32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  --spacing-4xl: 88px;

  /* radius: square, editorial */
  --radius-sm:   0;
  --radius-md:   0;
  --radius-lg:   0;
  --radius-pill: 0;

  /* shadows: none on the live site */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;

  /* layout */
  --maxw:   1140px;
  --gutter: 28px;

  /* type ramp */
  --type-display: clamp(42px, 5.8vw, 68px);
  --type-h1:      clamp(32px, 4vw, 48px);
  --type-h2:      clamp(26px, 2.8vw, 34px);
  --type-h3:      22px;
  --type-lead:    clamp(18px, 1.5vw, 20px);
  --type-body:    16px;
  --type-caption: 13px;
  --type-eyebrow: 13px;

  /* semantic map */
  --color-fg:            var(--gl-ink);
  --color-fg-muted:      var(--gl-muted);
  --color-bg:            var(--gl-white);
  --color-bg-surface:    var(--gl-cream);
  --color-border:        var(--gl-line);
  --color-border-strong: var(--gl-ink);
  --color-white:         var(--gl-white);

  --color-accent:           var(--gl-gold-text);
  --color-accent-hover:     var(--gl-gold-deep);
  --color-accent-active:    var(--gl-gold-deep);
  --color-accent-fg:        var(--gl-white);       /* 6.18:1 on the accent fill */
  --color-accent-secondary: var(--gl-gold-text);   /* link colour on light grounds */
  --color-gold-line:        var(--gl-gold);        /* decoration only: underline, progress, rules, icons */

  /* inverse: emphasis fill (pressed, selected) is ink with a white label */
  --color-bg-inverse:           var(--gl-ink);
  --color-fg-on-inverse:        var(--gl-cream);
  --color-fg-on-inverse-strong: var(--gl-white);
  --color-fg-on-inverse-muted:  color-mix(in srgb, var(--color-fg-on-inverse) 62%, transparent);
  --color-fg-on-inverse-soft:   color-mix(in srgb, var(--color-fg-on-inverse) 84%, transparent);
  --color-inverse-line:         color-mix(in srgb, var(--color-fg-on-inverse) 14%, transparent);
  --color-inverse-wash:         color-mix(in srgb, var(--color-fg-on-inverse) 7%,  transparent);
  --color-on-dark-border:       color-mix(in srgb, var(--gl-white) 50%, transparent);

  /* status colours used by dot-plus-word markers */
  --t-good:  var(--gl-good);
  --t-alert: var(--gl-alert);
}

/* A cream band: the section ground is cream and the surfaces on it (cards, panels) are white.
   On white sections, surfaces are cream. Dark mode re-binds the same two variables in zx-dark.css. */
.band {
  --color-bg: var(--gl-cream);
  --color-bg-surface: var(--gl-white);
  background: var(--color-bg);
}

/* the footer is a cream band on the live site, not a dark one */
.site-footer {
  --color-bg-inverse:           var(--gl-cream);
  --color-fg-on-inverse:        var(--gl-ink);
  --color-fg-on-inverse-strong: #000000;
  --color-fg-on-inverse-muted:  var(--gl-muted);
  --color-fg-on-inverse-soft:   var(--gl-ink-soft);
  --color-inverse-line:         var(--gl-line);
  border-top: 1px solid var(--gl-line);
}

/* control voice: Figtree, small tracked caps like the live nav, square, outlined */
html { font-weight: 400; }
p, .body, .lead { font-weight: 400; }
h1, h2, h3, h4, .display, .h1, .h2, .h3 { font-weight: 400; letter-spacing: 0; }
.btn { font-family: var(--font-body); font-size: 14px; font-weight: 500; letter-spacing: 0.08em; padding: 14px 24px; min-height: 44px; }
.btn.btn-primary { background: transparent; color: var(--color-fg); border: 1px solid var(--gl-ink); }
.btn.btn-primary:hover, .btn.btn-primary:active { background: var(--gl-ink); color: var(--gl-white); }
span.hl::after { background: var(--gl-gold); }
:root ::selection { background: var(--gl-cream); color: var(--gl-ink); }