/* ============================================================================ AXD Intelligence — base design tokens (v1.2) The BASE layer of the BASE → BRAND → MODE cascade (DESIGN-RULEBOOK.md §11). Usage: -> dark (identity default) -> light -> client skin file layered after this one Components consume semantic tokens ONLY. No hex literals in components. ========================================================================== */ :root { color-scheme: dark; /* -- type ---------------------------------------------------------------- */ --font-sans: "Figtree", -apple-system, "SF Pro Text", "Inter", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; --text-display: 28px; --weight-display: 300; --tracking-display: -0.01em; --text-section: 16px; --weight-section: 500; --text-body: 14px; --weight-body: 400; --leading-body: 1.55; --text-meta: 12.5px; --text-eyebrow: 11px; --weight-eyebrow: 500; --tracking-eyebrow: 0.12em; --text-th: 10.5px; --tracking-th: 0.12em; --text-button: 13px; --weight-button: 500; --tracking-button: 0.01em; --text-mono: 11.5px; /* -- shape (multiply by --radius-scale; client skins may override scale) -- */ --radius-scale: 1; --radius-chip: calc(8px * var(--radius-scale)); --radius-control: calc(10px * var(--radius-scale)); --radius-card: calc(16px * var(--radius-scale)); --radius-modal: calc(20px * var(--radius-scale)); --radius-full: 9999px; /* dots and round indicators only; never buttons */ /* Curvature continuity is G2 (see @supports block below). */ /* -- space (4px grid; raw ramp feeds the semantic tokens below) ----------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* -- the spacing contract (DESIGN-RULEBOOK.md §5) -------------------------- Gaps between items. Micro tokens (<=12px) are invariant on all screens. */ --gap-icon: 8px; /* icon <-> its label */ --gap-inline: 12px; /* adjacent inline controls, button/chip rows */ --stack-heading: 12px; /* heading -> its content */ --gap-item: 16px; /* list/grid siblings */ --gap-field: 20px; /* between form fields */ --gap-group: 32px; /* between groups inside a section */ --gap-section: 64px; /* between page sections */ --pad-page: 24px; /* page gutter */ /* Insets: content to its own shape's edge. Rule: inset >= radius when the container radius is 16px or more ("the inset beats the radius"). */ --inset-badge-x: 8px; --inset-badge-y: 3px; --inset-input-x: 12px; --inset-button-x: 16px; --inset-button-x-compact: 12px; --inset-card: 20px; --inset-well: 16px; --inset-modal: 24px; /* Hover clearance (rulebook §5 invariant 7): spacing is measured between painted hover/focus extents, not layout boxes. */ --gap-interactive-min: 12px; /* floor between interactive siblings */ --hover-inset: 4px; /* row/menu hover tiles inset, never edge-to-edge */ /* -- sizing ---------------------------------------------------------------- */ --control-h: 36px; /* 44px on touch via media query below */ --control-h-compact: 28px; --row-h: 48px; --row-h-dense: 40px; --row-h-list: 56px; /* 72, up from 56. The lockup renders 44px tall, which left only 6px above it in a 57px bar — measured on the live site. Against the browser's own chrome directly above, 6px reads as the mark touching the top of the window. 72 gives it 14px of air on each side. */ --bar-h: 72px; --sidebar-w: 240px; --rail-w: 64px; --content-max: 1200px; --content-max-wide: 1600px; --measure: 720px; --hairline: 1px; /* -- motion ---------------------------------------------------------------- */ --ease-state: cubic-bezier(.4, 0, .2, 1); --ease-spatial: cubic-bezier(.2, .8, .2, 1); --dur-state: 140ms; --dur-enter: 200ms; --dur-overlay: 240ms; /* -- color · dark (identity default) --------------------------------------- */ --color-canvas: #000000; --color-surface: #0A0A0A; --color-surface2: #111111; --color-control: #171717; --color-hover: #1C1C1C; /* Overlay tier: floating surfaces (modals, popovers, dropdowns, sheets, toasts). Shadows are invisible on true black, so overlays are guaranteed visibility by tone + a linestrong hairline (+ scrim for modals). */ --color-overlay: #1C1C1C; --color-overlay-hover: #262626; --color-line: rgba(255, 255, 255, .08); --color-linestrong: rgba(255, 255, 255, .14); --color-ink: #F2F2F2; --color-muted: #A3A3A3; --color-faint: #8A8A8A; /* solved: >=4.5:1 as small text up to surface2 */ --color-primary: #FFFFFF; --color-onprimary: #000000; --color-scrim: rgba(0, 0, 0, .6); --color-focus: #F2F2F2; /* status (dark set: solved for 6.5:1 on #141414; clears more on the true-black ladder) */ --color-success: #7FA287; --color-warning: #AE9674; --color-danger: #BC8F8B; --color-info: #839CBC; /* badge recipe helpers */ --status-fill-alpha: 14%; --status-border-alpha: 35%; --shadow-overlay: none; /* dark theme: depth is tone, never shadow */ } :root[data-theme="light"] { color-scheme: light; --color-canvas: #F4F4F4; --color-surface: #FFFFFF; --color-surface2: #FAFAFA; --color-control: #ECECEC; --color-hover: #E6E6E6; --color-overlay: #FFFFFF; /* + --shadow-overlay on light */ --color-overlay-hover: #E6E6E6; --color-line: rgba(15, 15, 15, .10); --color-linestrong: rgba(15, 15, 15, .18); --color-ink: #141414; --color-muted: #5F5F5F; --color-faint: #6F6F6F; /* solved: >=4.5:1 as small text down to canvas */ --color-primary: #0F0F0F; --color-onprimary: #FFFFFF; --color-scrim: rgba(0, 0, 0, .45); --color-focus: #141414; /* status (light set: solved for >=4.5:1 on white) */ --color-success: #5D7E65; --color-warning: #8A7352; --color-danger: #976C68; --color-info: #617897; /* the one permitted shadow tier: overlays on light only */ --shadow-overlay: 0 8px 32px rgba(15, 15, 15, .12); } /* touch: taller controls, no sub-44px targets */ @media (pointer: coarse) { :root { --control-h: 44px; } } /* phones: forms must not trigger iOS zoom; macro spacing compresses exactly one ramp step (rulebook §5 invariant 2) — micro tokens never change */ @media (max-width: 768px) { :root { --text-body-form: 16px; --text-display: 24px; --gap-item: 12px; --gap-field: 16px; --gap-group: 24px; --gap-section: 40px; --pad-page: 16px; --inset-card: 16px; --inset-well: 12px; --inset-modal: 20px; } } /* G2 continuity, ONE curve character (v1.2): every corner in the system is superellipse(1.5) — chosen 2026-08-03 from a corrected, rendered A/B/C/D bake-off (s = 1 / 1.5 / 1.75 / 2, Gemini-judged): a true G2 sweep that stays soft from badge (r8) to card (r16); s=1 is the abrupt G1 round, s=2 (the squircle keyword) goes flat-sided on small controls. GOTCHA: the CSS superellipse() parameter is the LOG2 of the exponent — round = superellipse(1) (k=2 ellipse), squircle = superellipse(2) (k=4). Progressive enhancement; fallback is the same radii as G1 arcs. Never mix exponents. Zero-specificity so components can override. RULE: any radius-full indicator (dots, switch thumbs) declares corner-shape: round — superellipse distorts circles. */ @supports (corner-shape: superellipse(1.5)) { :where(*, *::before, *::after) { corner-shape: superellipse(1.5); } } @media (prefers-reduced-motion: reduce) { :root { --dur-state: 1ms; --dur-enter: 1ms; --dur-overlay: 1ms; } }