/* ============================================================================ 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; --bar-h: 56px; --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; } }