/* PhysicsHub design tokens — the single source for colour, type, spacing,
 * radius, depth and motion (docs/PHYSICSHUB_INTERFACE_DESIGN_SYSTEM.md §5).
 *
 * Tokens apply to pages that opt in with html[data-ph-system="v1"]. Personal
 * accent themes (data-theme) recolour product chrome only; Unit topic colours
 * stay in unit-theme-tokens.css and official exam surfaces never inherit them.
 * Add new values here instead of hard-coding colours or font sizes in page CSS.
 */
html[data-ph-system="v1"] {
    --ph-bg: #f3f6f4;
    --ph-surface: #fff;
    --ph-surface-subtle: #f7faf8;
    --ph-surface-raised: rgba(255, 255, 255, .86);
    --ph-ink: #132b27;
    --ph-ink-secondary: #536b66;
    --ph-ink-tertiary: #82918d;
    --ph-line: rgba(24, 76, 69, .12);
    --ph-line-strong: rgba(24, 76, 69, .2);
    --ph-chrome-accent: #0f766e;
    --ph-chrome-accent-hover: #0b625c;
    --ph-chrome-accent-soft: #e8f6f3;
    --ph-positive: #15805f;
    --ph-warning: #b76b13;
    --ph-danger: #c34444;
    --ph-info: #3b6fb6;
    --ph-hero: #071816;
    --ph-chrome: rgba(247, 250, 248, .86);
    --ph-focus-ring: rgba(15, 118, 110, .13);
    --ph-accent-halo: rgba(80, 178, 160, .13);
    --ph-hero-halo: rgba(72, 205, 181, .23);
    --ph-hero-accent: #67d7c3;
    --ph-brand-mark-filter: none;
    --ph-font-ui: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Segoe UI", sans-serif;
    --ph-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "PingFang SC", "Segoe UI", sans-serif;
    --ph-space-1: 4px;
    --ph-space-2: 8px;
    --ph-space-3: 12px;
    --ph-space-4: 16px;
    --ph-space-5: 24px;
    --ph-space-6: 32px;
    --ph-radius-control: 10px;
    --ph-radius-card: 16px;
    --ph-radius-panel: 22px;
    --ph-radius-hero: 28px;
    --ph-radius-pill: 999px;
    --ph-shadow-control: 0 1px 2px rgba(14, 43, 38, .06);
    --ph-shadow-card: 0 12px 32px rgba(14, 43, 38, .07);
    --ph-shadow-overlay: 0 24px 70px rgba(7, 29, 25, .18);
    --ph-motion-fast: 140ms;
    --ph-motion-panel: 220ms;
    --ph-motion-ease: cubic-bezier(.2, .8, .2, 1);
    --ph-type-shift: 0px;
    --ph-density-control-height: 40px;
    --ph-density-card-padding: 20px;
    --ph-density-panel-gap: 18px;
    /* Opt-in workspace geometry. Reading and official document widths stay local. */
    --ph-layout-gutter: clamp(32px, 2.5vw, 96px);
    --ph-layout-gap: clamp(24px, 1.75vw, 48px);
    --ph-layout-inline-size: calc(100% - 2 * var(--ph-layout-gutter));
}

html[data-ph-system="v1"][data-theme="ocean"] {
    --ph-bg: #f3f6fb;
    --ph-surface-subtle: #f6f9fd;
    --ph-ink: #14243a;
    --ph-ink-secondary: #52657d;
    --ph-ink-tertiary: #8492a5;
    --ph-line: rgba(29, 78, 140, .13);
    --ph-line-strong: rgba(29, 78, 140, .22);
    --ph-chrome-accent: #2563eb;
    --ph-chrome-accent-hover: #1d4ed8;
    --ph-chrome-accent-soft: #eaf2ff;
    --ph-hero: #071426;
    --ph-chrome: rgba(247, 249, 253, .88);
    --ph-focus-ring: rgba(37, 99, 235, .13);
    --ph-accent-halo: rgba(71, 132, 238, .14);
    --ph-hero-halo: rgba(69, 127, 238, .25);
    --ph-hero-accent: #7fb1ff;
    --ph-brand-mark-filter: hue-rotate(55deg) saturate(1.28) brightness(1.02);
}

html[data-ph-system="v1"][data-theme="rose"] {
    --ph-bg: #f8f4f5;
    --ph-surface-subtle: #fbf7f8;
    --ph-ink: #321f28;
    --ph-ink-secondary: #735967;
    --ph-ink-tertiary: #9c8791;
    --ph-line: rgba(110, 44, 68, .13);
    --ph-line-strong: rgba(110, 44, 68, .22);
    --ph-chrome-accent: #b94d72;
    --ph-chrome-accent-hover: #9e3d60;
    --ph-chrome-accent-soft: #faeaf0;
    --ph-hero: #241017;
    --ph-chrome: rgba(252, 248, 249, .88);
    --ph-focus-ring: rgba(185, 77, 114, .13);
    --ph-accent-halo: rgba(211, 93, 134, .13);
    --ph-hero-halo: rgba(215, 92, 135, .23);
    --ph-hero-accent: #f59cbc;
    --ph-brand-mark-filter: hue-rotate(165deg) saturate(.9) brightness(1.04);
}

html[data-ph-system="v1"][data-theme="iris"] {
    --ph-bg: #f5f4fa;
    --ph-surface-subtle: #f8f7fc;
    --ph-ink: #25223c;
    --ph-ink-secondary: #625e7b;
    --ph-ink-tertiary: #908ca4;
    --ph-line: rgba(77, 64, 137, .13);
    --ph-line-strong: rgba(77, 64, 137, .22);
    --ph-chrome-accent: #6757c8;
    --ph-chrome-accent-hover: #5546ad;
    --ph-chrome-accent-soft: #efedff;
    --ph-hero: #151128;
    --ph-chrome: rgba(249, 248, 253, .88);
    --ph-focus-ring: rgba(103, 87, 200, .13);
    --ph-accent-halo: rgba(123, 104, 214, .14);
    --ph-hero-halo: rgba(127, 108, 222, .24);
    --ph-hero-accent: #afa3ff;
    --ph-brand-mark-filter: hue-rotate(82deg) saturate(.92) brightness(1.02);
}

/* Chemistry owns a separate set of product accents. These selectors are
 * deliberately subject-scoped: a theme choice in Chemistry can never recolour
 * Physics, and shared Builder components continue to consume the same semantic
 * chrome tokens. Scientific status colours and document surfaces stay fixed. */
html[data-ph-system="v1"][data-subject-id="chemistry"][data-theme="copper"] {
    --ph-bg: #faf5f1;
    --ph-surface-subtle: #fdf8f4;
    --ph-ink: #33231d;
    --ph-ink-secondary: #755d52;
    --ph-ink-tertiary: #9a877e;
    --ph-line: rgba(132, 69, 38, .13);
    --ph-line-strong: rgba(132, 69, 38, .23);
    --ph-chrome-accent: #a84f2a;
    --ph-chrome-accent-hover: #873d20;
    --ph-chrome-accent-soft: #faeade;
    --ph-hero: #25130d;
    --ph-chrome: rgba(253, 249, 246, .88);
    --ph-focus-ring: rgba(168, 79, 42, .14);
    --ph-accent-halo: rgba(202, 111, 70, .14);
    --ph-hero-halo: rgba(218, 120, 75, .24);
    --ph-hero-accent: #f1a27d;
    --ph-brand-mark-filter: hue-rotate(255deg) saturate(1.18) brightness(1.02);
}

html[data-ph-system="v1"][data-subject-id="chemistry"][data-theme="cobalt"] {
    --ph-bg: #f3f5fa;
    --ph-surface-subtle: #f7f8fc;
    --ph-ink: #19263d;
    --ph-ink-secondary: #596984;
    --ph-ink-tertiary: #8994a8;
    --ph-line: rgba(42, 72, 133, .13);
    --ph-line-strong: rgba(42, 72, 133, .23);
    --ph-chrome-accent: #3156a3;
    --ph-chrome-accent-hover: #274584;
    --ph-chrome-accent-soft: #e9effb;
    --ph-hero: #0d172d;
    --ph-chrome: rgba(248, 249, 253, .88);
    --ph-focus-ring: rgba(49, 86, 163, .14);
    --ph-accent-halo: rgba(77, 112, 185, .14);
    --ph-hero-halo: rgba(78, 116, 198, .24);
    --ph-hero-accent: #91ace8;
    --ph-brand-mark-filter: hue-rotate(58deg) saturate(1.02) brightness(.98);
}

html[data-ph-system="v1"][data-subject-id="chemistry"][data-theme="flame"] {
    --ph-bg: #faf3f5;
    --ph-surface-subtle: #fcf7f8;
    --ph-ink: #351e25;
    --ph-ink-secondary: #765661;
    --ph-ink-tertiary: #9d858d;
    --ph-line: rgba(132, 49, 70, .13);
    --ph-line-strong: rgba(132, 49, 70, .23);
    --ph-chrome-accent: #a23f54;
    --ph-chrome-accent-hover: #843142;
    --ph-chrome-accent-soft: #fae8ed;
    --ph-hero: #281016;
    --ph-chrome: rgba(253, 248, 249, .88);
    --ph-focus-ring: rgba(162, 63, 84, .14);
    --ph-accent-halo: rgba(195, 81, 105, .14);
    --ph-hero-halo: rgba(207, 82, 109, .23);
    --ph-hero-accent: #ee94a8;
    --ph-brand-mark-filter: hue-rotate(176deg) saturate(.98) brightness(1.01);
}

html[data-ph-system="v1"][data-text-size="small"] { --ph-type-shift: -1px; }
html[data-ph-system="v1"][data-text-size="large"] { --ph-type-shift: 2px; }
html[data-ph-system="v1"][data-ui-density="workspace"] {
    --ph-density-control-height: 36px;
    --ph-density-card-padding: 16px;
    --ph-density-panel-gap: 14px;
}

/* Additions for V4.10 (2026-10-20): the remaining documented scale steps.
 * New names only; existing page CSS is unaffected until it opts in. */
html[data-ph-system="v1"] {
    --ph-space-7: 48px;
    --ph-font-document: Arial, "Helvetica Neue", sans-serif;
    --ph-font-math: "STIX Two Math", "Times New Roman", serif;
    /* Type scale (§5.2): metadata, control label, interface body, reading
     * body, card title, section title, page title. */
    --ph-text-meta: 12px;
    --ph-text-label: 13px;
    --ph-text-ui: 14px;
    --ph-text-body: 16px;
    --ph-text-card-title: 18px;
    --ph-text-section: 28px;
    --ph-text-page: 40px;
}

/* V5 motion and touch language (2026-10-20, first used by the shared header).
 * New names only: nothing changes until a component opts in. Declared on :root
 * so pages without data-ph-system (Home, Units) can use the same values;
 * consumers still pass a fallback because those pages may not load this file.
 * Reduced motion: consumers drop transforms and use --ph-duration-instant. */
:root {
    /* Gentle spring (about 4% overshoot) for things that slide into place. */
    --ph-ease-spring: linear(0, 0.0418, 0.1431, 0.2744, 0.4146, 0.5496, 0.6708, 0.7737, 0.857, 0.9213, 0.9684, 1.0009, 1.0216, 1.0331, 1.0379, 1.038, 1.0351, 1.0305, 1.0252, 1.0199, 1.0149, 1.0106, 1.007, 1.0042, 1);
    /* Smooth deceleration without overshoot (fades, page changes). */
    --ph-ease-out-soft: cubic-bezier(.32, .72, 0, 1);
    --ph-duration-instant: 1ms;
    --ph-duration-press: 110ms;
    --ph-duration-release: 240ms;
    --ph-duration-slide: 420ms;
    --ph-duration-page: 280ms;
    /* Press feedback: the control shrinks slightly and darkens. */
    --ph-press-scale: .96;
    --ph-hover-tint: rgba(0, 0, 0, .045);
    --ph-press-tint: rgba(0, 0, 0, .085);
    /* Light chrome: calm translucent bar with a hairline. */
    --ph-font-system: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang SC", "Helvetica Neue", "Segoe UI", system-ui, sans-serif;
    --ph-chrome-surface: rgba(251, 252, 252, .82);
    --ph-chrome-filter: saturate(180%) blur(20px);
    --ph-hairline: rgba(0, 0, 0, .08);
    --ph-thumb-surface: #fff;
    --ph-thumb-shadow: 0 0 0 .5px rgba(0, 0, 0, .04), 0 1px 2px rgba(0, 0, 0, .08), 0 2px 8px rgba(0, 0, 0, .06);
    --ph-track-surface: rgba(118, 118, 128, .1);
}

/* ===== V5.1 appearance (Ethan 2026-10-25) =====================================
 * Appearance (light / dark / auto) only changes brightness: every colour token
 * has a light and a dark value. display-preferences.js sets
 * html[data-appearance="dark"] only on pages that declare html[data-dark-ready];
 * every other page stays light, so a page that is not tuned yet can never show
 * white cards with light text. Dark is warm graphite, not black. Plan and
 * contrast checks: .codex-tmp/v51-site-theme/方案.md §3, §4, §5.
 *
 * Paper: question content, official figures, mark schemes and preview pages
 * sit on paper. Light: white. Dark: a slightly dimmed warm white for working
 * views; the preview sheet stays true white (--ph-paper-sheet). Print is
 * always white because these rules are screen-only by construction (print
 * stylesheets set their own colours). */
:root {
    --ph-paper: #ffffff;
    --ph-paper-sheet: #ffffff;
    --ph-paper-ink: #1f1e1c;
    --ph-paper-ink-secondary: #5f5e58;
    --ph-paper-line: #e8e5dc;
    --ph-paper-shadow: none;
    --ph-chrome-accent-ink: #ffffff;
}
/* Dark values, paper rules and the print fallback live in appearance-dark.css (loaded only when dark). */
/* The page ground: overscroll and the space below a short page show the page colour, not white.
 * Home paints its own skin. */
@media screen { html:not([data-skin]) { background: var(--ph-bg); } }
/* A short cross-fade when the appearance changes while the page is open. */
:root.ph-appearance-switching, :root.ph-appearance-switching * {
    transition: background-color 280ms ease, color 280ms ease, border-color 280ms ease, fill 280ms ease, stroke 280ms ease !important;
}