/* Mesheract design tokens: the one source of truth for colour, type, space,
 * radii, borders, effects and motion on Mesheract pages.
 *
 * Extracted from the look that shipped (index_mesheract.html, site.css,
 * program_mesheract.html); values are unchanged. Docs and live reference:
 * docs/MESHERACT_DESIGN_SYSTEM.md and /admin/mesheract/design-system.
 *
 * A few tokens are workshop knobs (/mesheract-workshop, static/mesheract/
 * layout.json): --radius, --scrim, --vignette, --glass and --arrow are
 * overwritten at load by static/mesheract/site.js. Build on them; never
 * hard-code their values.
 *
 * Load order on a page: tokens.css, site.css, arch.css, shell.css.
 * index_mesheract.html still carries an inline :root of its own (later in
 * the cascade, so it wins where they overlap). */
:root {
    /* colour */
    --night: #0a0d18;                       /* page background */
    --ink: #0d1020;                         /* deepest panel ink */
    --cream: #f3e6cf;                       /* text, outline buttons */
    --cream-dim: #c9bda8;                   /* secondary text */
    --gold: #e9c27a;                        /* eyebrows, prices, hover, links in prose */
    --purple: #9323c1;                      /* brand: hover glow, flags */
    --purple-hi: #c56cf0;                   /* active, selected, "go" */
    --purple-down: #7a1aab;                 /* pressed */
    --danger: #ff9a8a;                      /* form errors */
    --line: rgba(243, 230, 207, .22);       /* every hairline */
    --line-strong: rgba(243, 230, 207, .32);
    --card: rgba(10, 13, 24, .74);          /* glass panel over the sky */
    --field: rgba(8, 10, 20, .6);           /* input background */
    --chip-bg: rgba(8, 10, 20, .55);
    --menu-bg: rgba(6, 8, 16, .96);         /* phone menu drop-down */
    --hover-wash: rgba(243, 230, 207, .04); /* list-row hover */
    --purple-wash: rgba(147, 35, 193, .28); /* "go" button, selected chip */
    --sky-top: #0b1026; --sky-mid: #2a2340; --sky-bottom: #3a2a3a;

    /* type: one family, all caps (body), sentence case for long prose */
    --font: 'IBM Plex Mono', ui-monospace, monospace;
    --fs-root: 15px;
    --fs-micro: .62rem;    /* tags, flags */
    --fs-xs: .68rem;       /* nav, chips */
    --fs-label: .74rem;    /* .label, .link, eyebrows */
    --fs-sm: .82rem;       /* buttons, card body */
    --fs-body: .92rem;     /* lede, prose */
    --fs-md: 1rem;
    --fs-lg: 1.35rem;      /* list-row titles */
    --fs-price: 2.2rem;    /* big numbers */
    --fs-h2: clamp(1.6rem, 3vw, 2.4rem);
    --fs-h1: clamp(2.2rem, 4.6vw, 3.6rem);
    --lh: 1.6; --lh-tight: 1.08; --lh-head: 1.12;
    --track-label: .2em;   /* labels, nav, links */
    --track-btn: .18em;
    --track-chip: .16em;
    --track-brand: .32em;
    --track-head: -.02em;  /* h1, h2 */
    --track-prose: .01em;
    --weight-strong: 500;

    /* space */
    --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px;
    --sp-7: 28px; --sp-8: 40px; --sp-9: 56px; --sp-10: 72px;
    --wrap: 1120px;        /* content width */
    --gutter: 24px;        /* 20px on phones */
    --sec-pad: 56px;       /* 40px on phones */
    --tap: 44px;           /* minimum touch target */
    --btn-h: 56px;

    /* radii + frames */
    --radius: 2px;                              /* workshop knob */
    --radius-card: calc(var(--radius) + 6px);   /* panels */
    --radius-pill: 99px;                        /* chips, tags, flags */
    --radius-arch: 999px;                       /* arch card crowns */
    --bd: 1px solid var(--line);
    --bd-strong: 1px solid var(--cream);

    /* effects */
    --blur-card: 6px; --blur-btn: 12px; --blur-menu: 14px;
    --glow: 0 0 0 1px var(--purple), 0 0 18px rgba(147, 35, 193, .45);
    --glow-soft: 0 0 24px rgba(147, 35, 193, .3);
    --text-shadow: 0 1px 12px rgba(0, 0, 0, .65);

    /* workshop knobs (site.js) */
    --scrim: .45; --vignette: .5; --glass: .55; --arrow: 1.6;

    /* motion */
    --dur-fast: .15s; --dur: .18s; --dur-slow: .6s; --ease: ease;
}
@media (max-width: 600px) {
    :root { --gutter: 20px; --sec-pad: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    :root { --dur-fast: 0s; --dur: 0s; --dur-slow: 0s; }
}