/**
 * plugpress.co — design tokens. The ONLY file allowed to contain raw hex.
 *
 * v2 EXPERIMENT (2026-07-27, Fahim: "just experiment, direct change"):
 * cool neutrals — pure white + #f5f5f5 grays (heyclicky's palette) instead of
 * the warm paper, a tuned brand blue, and a CC0 blue-sky wallpaper (sky.jpg)
 * on every canvas instead of the paintings (override in pp_wallpaper_style).
 * Every changed token keeps its v1 value in a trailing comment — revert by
 * restoring those + deleting the helper override.
 *
 * v5 "WP desktop" base: white windows floating on canvas wallpapers, one
 * electric blue accent. Heyclicky leads the personality, cursor restrains it.
 * Per-product accents are injected inline (style="--accent: …") from
 * inc/data/products.php and appear only on that product's card + page.
 * Never two accents on one screen.
 */

:root {
	color-scheme: light;              /* light-only theme: keeps UA form controls + scrollbars honest */
	interpolate-size: allow-keywords; /* lets <details> height animate to auto where supported */

	/* base — v2: cool neutral, white + #f5f5f5 grays (heyclicky) */
	--bg:          #ffffff;  /* page background: the desk        (v1: #faf9f7) */
	--surface:     #ffffff;  /* window / card surface */
	--surface-alt: #f5f5f5;  /* window title bars, chips, wells  (v1: #f4f3ef) */
	--ink:         #171717;  /* neutral near-black text          (v1: #1c1b18) */
	--ink-soft:    #6f6f6f;  /* secondary text                   (v1: #6d6a63) */
	--line:        #e5e5e5;  /* hairlines, chrome borders        (v1: #e7e5de) */
	--line-strong: #d4d4d4;  /* hover borders, dotted separators (v1: #cfccc2) */
	/* PlugPress brand blue, in two tokens on purpose. --brand-blue is the fixed
	   value and never moves. --blue is the CTA/link SLOT, which a product may
	   repoint at its own accent (see .pp-accent-ui in base.css). Anything that
	   must stay PlugPress blue regardless — .accent-reset, the shared /pricing/
	   page — reads --brand-blue, which is also what keeps the two from forming a
	   var() cycle when a product takes the slot over. */
	--brand-blue:  #2563eb;  /* v2 brand blue — sky-native, AA on white (5.2:1). logo.svg/icon.svg/favicon.png recolored to match 2026-07-27 (v1: #2A49E5) */
	--blue:        var(--brand-blue);
	--blue-hover:  #1d4ed8;  /*                                  (v1: #1E37C9) */
	--on-accent:   #ffffff;  /* text on blue / accent fills */

	/* section bands + full-bleed blue band gradient */
	--band:        #f5f5f5;  /* alternating cool gray band       (v1: #f3f1ec) */
	--blue-deep-a: #2563eb;  /*                                  (v1: #2A49E5) */
	--blue-deep-b: #1e40af;  /*                                  (v1: #1B2FA8) */

	/* highlighter — founder-note <mark> + sticky-note prop ONLY */
	--marker:      #ffe86b;
	--marker-soft: #fff3bf;

	/* product-page header — wp-admin's own admin-bar palette, verbatim
	   (home = the desktop's mac menu bar; product page = inside wp-admin).
	   Contrast pre-vetted by core: ink 12.5:1, muted 7.4:1 on bg. */
	--adminbar-bg:         #1d2327;
	--adminbar-bg-hover:   #2c3338;
	--adminbar-ink:        #f0f0f1;
	--adminbar-muted:      #c3c4c7;
	--adminbar-link-hover: #72aee6;

	/* macOS's own traffic-light colors + Claude's brand coral. These are DATA
	   (real-world UI/brand hues, same rationale as the crawler brand hexes in
	   mock-scene.php), never decoration. The lights were CLI-only until
	   2026-08-25 (Fahim: "3 dot make real color of mac") — every window on the
	   site wears them now, which is the point: a mac window has coloured
	   lights, and grey ones were the one detail giving the mocks away. */
	--mac-red:      #ff5f57;
	--mac-yellow:   #febc2e;
	--mac-green:    #28c840;
	--claude-coral: #d97757;

	/* reserved — AI features only (Saddle agent, AI labels). Never decorative */
	--ai-purple: #7C3AED;

	/* per-page accent; defaults to blue, overridden inline per product */
	--accent: var(--blue);

	/* type */
	--font-display: 'Bricolage Grotesque', system-ui, sans-serif;  /* wordmark + headings */
	--font-sans:    'Instrument Sans', system-ui, sans-serif;
	--font-mono:    'Space Mono', monospace;  /* the artifact voice: real data only */
	--font-hand:    'Caveat', cursive;        /* founder signature + sticky note only */

	/* type scale — the ONLY sizes; no raw font-size literals outside this file
	   (exception: the footer ghost wordmark clamp, documented at point of use) */
	--text-display: clamp(4rem, 10vw, 7.5rem);      /* hero wordmark */
	--text-h1:      clamp(2.75rem, 5.5vw, 4.25rem); /* every page hero h1 (home scale adopted site-wide) */
	--text-h2:      clamp(1.875rem, 3.5vw, 2.75rem);
	--text-h3:      1.375rem;
	--text-lg:      1.125rem;   /* emphasized body: hero sub floor, was-price, icons */
	--text-btn-hero: 1.25rem;   /* hero CTA labels — 20px/500 (Fahim, 2026-07-28) */
	--text-body:    1.0625rem;
	/* article scale — the sizes above were drawn for marketing heroes (h1 tops
	   out at 68px, and h2 44px drops straight to a fixed 22px h3). In a post
	   that reads as a cliff, and h5/h6 had no rule at all, so they landed on UA
	   defaults BELOW body size. Steps here are 1.5 / 1.33 / 1.2 / 1.18, and
	   every level stays at or above body. Same reasoning as .legal-body. */
	--text-article-h1: clamp(2.25rem, 4vw, 3rem);
	--text-article-h2: clamp(1.625rem, 2.5vw, 2rem);
	--text-article-h3: 1.5rem;
	--text-article-h4: 1.25rem;
	--text-article-h5: 1.125rem;  /* matches article body; the display face and
	                                 600 weight carry the distinction */
	--text-article-h6: 1rem;      /* an uppercase label, so it reads as a label
	                                 rather than as smaller prose */
	--text-article-lede: 1.25rem; /* the opening paragraph — one rung above the
	                                 18px article body. --text-lg and --text-h3
	                                 had nothing between them, so the lede rule
	                                 was re-declaring body size and changing
	                                 nothing but colour. */
	--text-small:   0.9375rem;
	--text-mono:    0.8125rem;  /* mono captions, chips, buttons-small */
	--text-label:   0.75rem;    /* mono labels: eyebrow, clock, frame bars, props */
	--text-micro:   0.71rem;    /* scene-mock data rows only */

	/* shape — window/canvas radii measured off the references (2026-07-26):
	   cursor.com hero panel 4px / app window 10px, heyclicky panels 4px.
	   The old 24/14 read soft and toy-like next to them ("too much border
	   radius" — Fahim). */
	--r-window: 10px;  /* admin-frame windows + icon tiles */
	--r-card:   16px;  /* cards, panels */
	--r-inner:  8px;   /* buttons, chips, wells */
	--r-canvas: 4px;   /* canvas panels */
	/* elevation — every window is lit from above: 1px inset top highlight,
	   then ink-tinted contact / ambient / drop layers (never plain black).
	   v2: shadow ink went neutral 23/23/23 (v1: warm 28/27/24).
	   v3 (Fahim, 2026-07-30): drop layers halved again — the big soft drops
	   under the mock windows read as template/AI-generated gloss. Windows
	   now sit close to the paper: contact shadow + a short ambient, no
	   long throw. */
	--shadow-window:
		inset 0 1px 0 rgb(255 255 255 / 0.7),
		0 1px 2px rgb(23 23 23 / 0.05),
		0 4px 10px -4px rgb(23 23 23 / 0.05);
	--shadow-float:
		inset 0 1px 0 rgb(255 255 255 / 0.7),
		0 1px 2px rgb(23 23 23 / 0.07),
		0 6px 14px -8px rgb(23 23 23 / 0.08);
	--shadow-lift: /* hover elevation step — kept a touch above rest weight */
		0 4px 10px -4px rgb(23 23 23 / 0.08),
		0 10px 22px -12px rgb(23 23 23 / 0.10);

	/* one easing voice for settles + reveals */
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

	/* desktop window tilts */
	--tilt-1: -2.2deg;
	--tilt-2: 1.6deg;
	--tilt-3: -1.2deg;

	/* rhythm */
	--container:        1080px;
	--container-narrow: 720px;
	--container-wide:   1240px;  /* desktop hero stage */
	/* archive shell — wide enough for the three-up post grid. Widening
	   --container-narrow instead would move 14 other call sites (pages, legal,
	   founder, FAQ). Single posts use the two shells below. */
	--container-article: 1180px;
	/* 42rem at the 18px article body measures ~80 characters in Instrument Sans.
	   Measured, not assumed: the face averages 0.44em per character, so the
	   usual "half an em" rule under-counts it badly (46rem read as 93). */
	--measure-article:   42rem;
	/* single-post shells (2026-08-17, when the contents rail went). Two widths,
	   both centred: the prose shell holds the hero text and the footer, the
	   media shell holds the article body and the featured image. blog.css
	   centres a --measure-article track inside the media shell, so the two
	   content boxes share a centre AND a width — which makes their left and
	   right edges identical without a single media query.
	   Derived, not literal: --space-6 is exactly .container's max gutter, so
	   --container-post resolves to a 672px content box. Change the measure and
	   the hero follows it instead of silently desyncing. */
	--article-breakout:    7rem;  /* extra room per side for media: 896 vs 672
	                                 prose = 1.33x, the article scale's own step */
	--container-post:      calc(var(--measure-article) + 2 * var(--space-6));
	--container-post-wide: calc(var(--container-post) + 2 * var(--article-breakout));
	/* changelog stream — a meta rail plus a reading column. The rail holds the
	   product, version and date; what is left after it and the gutter lands
	   close to the article measure, so a release reads like a short post. */
	--changelog-rail:      9.5rem;
	--container-changelog: 65rem;
	--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-section: clamp(4rem, 9vw, 6.5rem);
	--space-hero:    clamp(3rem, 6vh, 4.5rem);  /* hero breathing room — the ONE formula (intro top, stage gap, product hero) */

	/* derived surfaces */
	--tint: #f5f5f5;  /* subtle wash for placeholder slots (v1: #f4f3ef) */
	/* NOTE: no --accent-tint token — var() inside a :root custom property freezes
	   against :root's --accent; accent mixes must be computed at point of use. */
}