/* PStyle design tokens — single source of truth for the visual language.
   Luxury minimalism: monochrome base + one accent (#1842B6), generous whitespace,
   sharp edges, hairline rules, serif display + grotesque text. */

:root {
  /* ---- Color ---- */
  --ink: #111111;          /* primary text / near-black */
  --white: #ffffff;
  --warm-grey: #f2f2f0;    /* section backgrounds — deepened from #f5f5f3 (2026-08-12):
                              at 2% delta from white the "pause" between sections was
                              not perceivable and the page read as one long white run. */
  --anthracite: #1e1e1e;   /* dark sections */
  --anthracite-deep: #141416; /* footer — one step deeper so a dark CTA band above it
                                 does not merge into the footer (tone already used by
                                 the Innovation Lab image band). */
  --accent: #1842b6;       /* THE accent — use sparingly */
  --accent-hover: #12369a; /* darker accent for hover */
  --accent-tint: #eaeff9;  /* faint accent wash */
  --accent-on-dark: #8ba6f0; /* accent as TEXT on anthracite. --accent itself is
                                1.9:1 on #1e1e1e and fails AA; this is 7.0:1.
                                Accent as a BACKGROUND (buttons, dots, hairlines)
                                keeps --accent unchanged. */

  --line: rgba(17, 17, 17, 0.12);      /* hairline on light */
  --line-strong: rgba(17, 17, 17, 0.24);
  --line-invert: rgba(255, 255, 255, 0.16); /* hairline on dark */
  --line-strong-invert: rgba(255, 255, 255, 0.28); /* --line-strong counterpart on dark */
  --muted: #6b6b68;        /* secondary text on light */

  /* ---- Text on a dark ground ----
     White at a fixed set of alphas. These are the ONLY white-alpha values any
     `color:` declaration may use; the ramp exists because the same four or five
     steps were being restated across home.css, pages.css and projects.css and
     had already drifted apart by 2-6% in places. Named by alpha so a change is
     unambiguous. --muted-invert keeps its name (it is referenced by the
     .ps-surface--dark token re-scoping) and is simply the 66% step.

     NOT in this ramp, and deliberately still written literally at the point of
     use: compositing recipes — the hero and image scrims, the film grain, the
     technical-grid hairlines, the accent washes and the mask ramps. Those are
     not palette entries; they are per-effect mixes, and tokenising them would
     imply they can be swapped for one another, which they cannot. */
  --on-dark-90: rgba(255, 255, 255, 0.9);
  --on-dark-82: rgba(255, 255, 255, 0.82);
  --on-dark-78: rgba(255, 255, 255, 0.78);
  --on-dark-72: rgba(255, 255, 255, 0.72);
  --on-dark-66: rgba(255, 255, 255, 0.66);
  --on-dark-60: rgba(255, 255, 255, 0.6);
  --on-dark-40: rgba(255, 255, 255, 0.4);
  --on-dark-14: rgba(255, 255, 255, 0.14); /* placeholder watermark glyph */

  --muted-invert: var(--on-dark-66);
  --surface-elevated-dark: #262628; /* cards / media placeholders inside a dark section */
  --surface-recessed-dark: #171717; /* media panel that should sit BELOW the dark
                                       ground rather than above it (Smart Apron
                                       product tiles) — deliberately darker than
                                       --anthracite, unlike --surface-elevated-dark */

  /* Dark gradient stops. These are the lighter ends of the two hand-built dark
     gradients; they are not interchangeable with --anthracite and each other
     (they differ by ~4%), so they are named for the surface they belong to
     rather than folded into one value. The darker end of both is
     --anthracite-deep. */
  --hero-ground-hi: #2a2a2f;   /* top of the hero placeholder gradient */
  --lab-ground-hi: #232327;    /* top of the Innovation Lab hero gradient */

  /* Duotone placeholder fallbacks. pstyle_the_thumbnail() sets --ps-ph-c1/-c2
     inline per post for gentle variety; these are the values used when it does
     not. */
  --ph-dark-from: #1a1a1c;
  --ph-dark-to: #2a2a2e;

  /* ---- Semantic surfaces ----
     The four section grounds of the page rhythm. Sections pick one via the
     .ps-surface--white / --muted / --dark utilities in main.css; nothing should
     paint a section background by hand any more. */
  --surface-1: var(--white);           /* W  */
  --surface-2: var(--warm-grey);       /* M  */
  --surface-3: var(--anthracite);      /* D  */
  --surface-4: var(--anthracite-deep); /* D+ (footer) */

  /* ---- Type families ---- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body: "Inter", "Helvetica Neue", Arial, "Segoe UI", system-ui, sans-serif;

  /* ---- Text-size controls (Customizer → Typography) ----
     --ps-scale multiplies ALL type; --ps-heading-scale is an EXTRA multiplier on
     display/heading steps only. Both default to 1 so the scale renders identically
     to the hand-tuned clamp() values below until a user changes them. Overridden
     at runtime via wp_add_inline_style() on the tokens handle. */
  --ps-scale: 1;
  --ps-heading-scale: 1;

  /* ---- Fluid type scale (min 360px .. max 1440px) ---- */
  /* Body steps scale with --ps-scale. */
  --step--1: calc(clamp(0.78rem, 0.75rem + 0.15vw, 0.86rem) * var(--ps-scale));   /* small / captions */
  --step-0:  calc(clamp(1rem, 0.96rem + 0.2vw, 1.125rem) * var(--ps-scale));       /* body */
  --step-1:  calc(clamp(1.2rem, 1.1rem + 0.5vw, 1.5rem) * var(--ps-scale));        /* lead */
  /* Heading/display steps scale with --ps-scale AND --ps-heading-scale. */
  --step-2:  calc(clamp(1.6rem, 1.35rem + 1.2vw, 2.4rem) * var(--ps-scale) * var(--ps-heading-scale));   /* h3 */
  --step-3:  calc(clamp(2.1rem, 1.7rem + 2vw, 3.4rem) * var(--ps-scale) * var(--ps-heading-scale));       /* h2 */
  --step-4:  calc(clamp(2.8rem, 2rem + 3.6vw, 5rem) * var(--ps-scale) * var(--ps-heading-scale));         /* h1 */
  --step-5:  calc(clamp(3.4rem, 2.2rem + 6vw, 7rem) * var(--ps-scale) * var(--ps-heading-scale));         /* hero display */

  /* ---- Weights ---- */
  --w-reg: 400;
  --w-med: 500;
  --w-semi: 600;
  --w-bold: 700;

  /* ---- Spacing scale (8pt-ish, generous) ---- */
  --sp-1: 0.5rem;
  --sp-2: 1rem;
  --sp-3: 1.5rem;
  --sp-4: 2rem;
  --sp-5: 3rem;
  --sp-6: 4rem;
  --sp-7: 6rem;
  --sp-8: 8rem;
  --sp-9: 11rem;
  --section-y: clamp(4rem, 3rem + 6vw, 9rem);   /* vertical rhythm between sections */

  /* ---- Layout ---- */
  --container: 1280px;
  --container-wide: 1480px;
  --container-narrow: 820px;
  --gutter: clamp(1.25rem, 0.8rem + 2.4vw, 3rem);

  /* ---- Detail ---- */
  --radius: 0px;           /* sharp corners = luxury */
  --radius-sm: 2px;
  --shadow-soft: 0 24px 60px -30px rgba(17, 17, 17, 0.28);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur: 0.5s;
  --dur-fast: 0.25s;

  /* ---- Misc ---- */
  --topbar-h: 40px;
  --header-h: 76px;
  --letter-wide: 0.18em;   /* uppercase nav / eyebrow tracking */
  --letter-mid: 0.08em;
}