/* ============================================================================ TIER 3 — SEMANTIC Source: design-system/DESIGN.md §4.3 (colour), §5.2–5.3 (type), §6 (space, radius, border), §7 (shape), §8 (elevation) THIS IS THE ONLY TIER COMPONENT CODE MAY REFERENCE. Light/Dark is expressed with light-dark(), so every colour token has exactly ONE definition and two modes — no forked rule blocks anywhere in the app. See CLAUDE.md non-negotiable #5. The mode is driven by `color-scheme`, set at the bottom of this file from [data-theme]. ========================================================================== */ :root { /* --- Semantic/Space --------------------------------------------------- */ --space-none: var(--dimension-scale-0); --space-px: var(--dimension-scale-1); /* off-grid by design: focus offsets and 1px insets only */ --space-3xs: var(--dimension-scale-2); --space-2xs: var(--dimension-scale-4); --space-xs: var(--dimension-scale-8); --space-sm: var(--dimension-scale-12); --space-md: var(--dimension-scale-16); --space-lg: var(--dimension-scale-24); --space-xl: var(--dimension-scale-32); --space-2xl: var(--dimension-scale-40); --space-3xl: var(--dimension-scale-48); --space-4xl: var(--dimension-scale-64); --space-5xl: var(--dimension-scale-80); --space-6xl: var(--dimension-scale-96); /* --- Semantic/Radius -------------------------------------------------- */ --radius-none: var(--dimension-scale-0); --radius-xs: var(--dimension-scale-2); --radius-sm: var(--dimension-scale-4); --radius-md: var(--dimension-scale-8); --radius-lg: var(--dimension-scale-12); --radius-xl: var(--dimension-scale-16); --radius-2xl: var(--dimension-scale-24); --radius-full: var(--dimension-scale-full); /* --- Semantic/Border -------------------------------------------------- */ --border-width-none: var(--dimension-scale-0); --border-width-thin: var(--dimension-scale-1); --border-width-thick: var(--dimension-scale-2); --border-width-heavy: var(--dimension-scale-4); /* --- Semantic/Shape — aliases the Brand tier -------------------------- */ --shape-radius-button: var(--brand-shape-radius-button); --shape-radius-input: var(--brand-shape-radius-input); --shape-radius-card: var(--brand-shape-radius-card); --shape-radius-modal: var(--brand-shape-radius-modal); --shape-radius-menu: var(--brand-shape-radius-menu); --shape-radius-chip: var(--brand-shape-radius-chip); --shape-radius-tooltip: var(--brand-shape-radius-tooltip); --shape-radius-avatar: var(--brand-shape-radius-avatar); --shape-border-default: var(--brand-shape-border-default); --shape-border-emphasis: var(--brand-shape-border-emphasis); --shape-focus-width: var(--brand-shape-focus-width); --shape-focus-offset: var(--brand-shape-focus-offset); /* --- Semantic/Typography ---------------------------------------------- */ /* Families. Web = Roboto for both roles; the PLATFORM switch is at the bottom of this file. These are two of only three variables a brand needs to change to adopt its own typeface. */ --font-family-display: var(--type-scale-family-roboto); --font-family-text: var(--type-scale-family-roboto); --font-weight-regular: var(--type-scale-weight-regular); --font-weight-medium: var(--type-scale-weight-medium); --font-weight-bold: var(--type-scale-weight-bold); --font-letter-spacing-default: var(--type-scale-letter-spacing-none); --font-letter-spacing-heading: var(--type-scale-letter-spacing-tight); /* TODO(tokens): `letter-spacing/wide` exists as a PRIMITIVE with a documented purpose — DESIGN.md §5.1, "intended for uppercase micro-labels" — but the semantic tier never exposes it, so no component can legally reach it. Exposed here so component code still references only a --font-* name. Remove once Semantic/Typography carries it. */ --font-letter-spacing-wide: var(--type-scale-letter-spacing-wide); /* Line heights are the UNITLESS RATIOS from DESIGN.md §5.3 — Figma binds px, but CSS should use ratios so the step survives a font-size override. Prose track = size + 8. UI track (label/*) = size + 4. */ --font-heading-xl-size: var(--type-scale-size-30); --font-heading-xl-line-height: 1.27; --font-heading-lg-size: var(--type-scale-size-24); --font-heading-lg-line-height: 1.33; --font-heading-md-size: var(--type-scale-size-20); --font-heading-md-line-height: 1.4; --font-heading-sm-size: var(--type-scale-size-16); --font-heading-sm-line-height: 1.5; --font-heading-xs-size: var(--type-scale-size-12); --font-heading-xs-line-height: 1.67; --font-body-lg-size: var(--type-scale-size-16); --font-body-lg-line-height: 1.5; --font-body-md-size: var(--type-scale-size-14); --font-body-md-line-height: 1.57; --font-body-sm-size: var(--type-scale-size-12); --font-body-sm-line-height: 1.67; --font-body-xs-size: var(--type-scale-size-10); --font-body-xs-line-height: 1.8; --font-label-lg-size: var(--type-scale-size-16); --font-label-lg-line-height: 1.25; --font-label-md-size: var(--type-scale-size-14); --font-label-md-line-height: 1.29; --font-label-sm-size: var(--type-scale-size-12); --font-label-sm-line-height: 1.33; --font-label-xs-size: var(--type-scale-size-10); --font-label-xs-line-height: 1.4; /* --- Semantic/Color — surfaces ---------------------------------------- */ --color-surface-page: light-dark(var(--palette-neutral-100), var(--palette-neutral-1000)); --color-surface-raised: light-dark(var(--palette-neutral-100), var(--palette-neutral-950)); --color-surface-sunken: light-dark(var(--palette-neutral-300), var(--palette-neutral-1100)); --color-surface-overlay: light-dark(var(--palette-neutral-100), var(--palette-neutral-950)); --color-surface-scrim: var(--palette-base-scrim); /* already 45% — never stack more opacity */ /* --- APP-LOCAL STOPGAP — not a DS token ------------------------------ TODO(tokens): there is NO semantic token for ink sitting on an image or artwork surface. The greeting artwork stays light-on-dark in BOTH themes, so `content/inverse` (which flips) is wrong, and `on-solid/brand` would repeat Menu §7 F4 — using a brand-pairing token off a brand solid. Aliased here, at the token tier, so component code still references only a semantic name. Delete this the moment the DS ships `content/on-media`. */ --color-content-on-artwork: var(--palette-base-white); /* TODO(tokens): nor is there a token for the SURFACE a video letterboxes against. The video detail page (video.css) needs one behind the player, and it stays black in both themes for the same reason the ink above stays white: it is the frame around artwork, not a UI layer that themes. `surface/sunken` would be a light grey band beside the picture in Light. Delete this the moment the DS ships `surface/media`. */ --color-surface-media: var(--palette-neutral-1300); /* TODO(tokens): and none for a surface read by a CAMERA rather than a person. A QR code has to stay dark-on-light in both themes or it stops scanning, so this pair deliberately does not follow the mode — which is why it cannot be `surface/raised` + `content/headline`. Used only by the QR modal in video.css. Delete if the DS ever scopes a token to this. */ --color-surface-scannable: var(--palette-base-white); --color-content-scannable: var(--palette-neutral-1300); /* --- Semantic/Color — content ---------------------------------------- */ --color-content-headline: light-dark(var(--palette-neutral-1200), var(--palette-neutral-200)); --color-content-primary: light-dark(var(--palette-neutral-800), var(--palette-neutral-450)); --color-content-secondary: light-dark(var(--palette-neutral-700), var(--palette-neutral-600)); --color-content-placeholder: light-dark(var(--palette-neutral-600), var(--palette-neutral-700)); --color-content-disabled: light-dark(var(--palette-neutral-600), var(--palette-neutral-750)); --color-content-inverse: light-dark(var(--palette-base-white), var(--palette-neutral-1000)); /* --- Semantic/Color — borders & indicator ---------------------------- */ --color-border-default: light-dark(var(--palette-neutral-500), var(--palette-neutral-900)); --color-border-strong: light-dark(var(--palette-neutral-600), var(--palette-neutral-750)); --color-border-focus: light-dark(var(--brand-focus-light), var(--brand-focus-dark)); --color-indicator-brand: light-dark(var(--brand-indicator-light), var(--brand-indicator-dark)); /* --- Semantic/Color — brand ------------------------------------------ */ --color-solid-brand-default: light-dark(var(--brand-solid-default-light), var(--brand-solid-default-dark)); --color-solid-brand-hover: light-dark(var(--brand-solid-hover-light), var(--brand-solid-hover-dark)); --color-solid-brand-pressed: light-dark(var(--brand-solid-pressed-light), var(--brand-solid-pressed-dark)); --color-on-solid-brand: light-dark(var(--brand-on-solid-light), var(--brand-on-solid-dark)); --color-soft-brand-default: light-dark(var(--brand-soft-default-light), var(--brand-soft-default-dark)); --color-soft-brand-hover: light-dark(var(--brand-soft-hover-light), var(--brand-soft-hover-dark)); --color-soft-brand-pressed: light-dark(var(--brand-soft-pressed-light), var(--brand-soft-pressed-dark)); --color-on-soft-brand: light-dark(var(--brand-on-soft-light), var(--brand-on-soft-dark)); --color-border-brand-default: light-dark(var(--brand-border-light), var(--brand-border-dark)); --color-border-brand-hover: light-dark(var(--brand-solid-hover-light), var(--brand-solid-hover-dark)); --color-content-brand: light-dark(var(--brand-content-light), var(--brand-content-dark)); /* --- Semantic/Color — neutral ---------------------------------------- */ --color-solid-neutral-default: light-dark(var(--palette-neutral-800), var(--palette-neutral-450)); --color-solid-neutral-hover: light-dark(var(--palette-neutral-900), var(--palette-neutral-500)); --color-solid-neutral-pressed: light-dark(var(--palette-neutral-1000), var(--palette-neutral-600)); --color-on-solid-neutral: light-dark(var(--palette-base-white), var(--palette-neutral-1000)); --color-soft-neutral-default: light-dark(var(--palette-neutral-300), var(--palette-neutral-950)); --color-soft-neutral-hover: light-dark(var(--palette-neutral-400), var(--palette-neutral-900)); --color-soft-neutral-pressed: light-dark(var(--palette-neutral-500), var(--palette-neutral-800)); --color-soft-neutral-strong: light-dark(var(--palette-neutral-600), var(--palette-neutral-750)); --color-on-soft-neutral: light-dark(var(--palette-neutral-800), var(--palette-neutral-450)); /* --- Semantic/Color — danger ----------------------------------------- */ --color-solid-danger-default: light-dark(var(--palette-red-700), var(--palette-red-500)); --color-solid-danger-hover: light-dark(var(--palette-red-600), var(--palette-red-400)); /* [I] Dark solid pressed is not enumerated in the DESIGN.md §4.1 step-role table; one step darker than Dark default follows the brand pattern. */ --color-solid-danger-pressed: light-dark(var(--palette-red-800), var(--palette-red-600)); /* Black in Dark: Ant red has no stop that clears 4.5:1 with white on a dark surface. */ --color-on-solid-danger: light-dark(var(--palette-base-white), var(--palette-neutral-1300)); --color-soft-danger-default: light-dark(var(--palette-red-100), var(--palette-red-1000)); --color-soft-danger-hover: light-dark(var(--palette-red-200), var(--palette-red-900)); --color-soft-danger-pressed: light-dark(var(--palette-red-300), var(--palette-red-800)); --color-on-soft-danger: light-dark(var(--palette-red-800), var(--palette-red-300)); --color-border-danger-default: light-dark(var(--palette-red-600), var(--palette-red-500)); --color-border-danger-hover: light-dark(var(--palette-red-700), var(--palette-red-400)); --color-content-danger: light-dark(var(--palette-red-700), var(--palette-red-400)); /* --- Semantic/Color — warning ---------------------------------------- */ --color-solid-warning-default: light-dark(var(--palette-gold-600), var(--palette-gold-500)); --color-solid-warning-hover: light-dark(var(--palette-gold-500), var(--palette-gold-400)); /* [I] Dark solid pressed is not enumerated in the DESIGN.md §4.1 step-role table; one step darker than Dark default follows the brand pattern. */ --color-solid-warning-pressed: light-dark(var(--palette-gold-800), var(--palette-gold-600)); /* Black in BOTH modes: white on gold is 1.9:1 and never passes. */ --color-on-solid-warning: var(--palette-neutral-1300); --color-soft-warning-default: light-dark(var(--palette-gold-100), var(--palette-gold-1000)); --color-soft-warning-hover: light-dark(var(--palette-gold-200), var(--palette-gold-900)); --color-soft-warning-pressed: light-dark(var(--palette-gold-300), var(--palette-gold-800)); --color-on-soft-warning: light-dark(var(--palette-gold-900), var(--palette-gold-300)); --color-border-warning-default: light-dark(var(--palette-gold-600), var(--palette-gold-500)); --color-border-warning-hover: light-dark(var(--palette-gold-700), var(--palette-gold-400)); --color-content-warning: light-dark(var(--palette-gold-900), var(--palette-gold-400)); /* --- Semantic/Color — success ---------------------------------------- */ --color-solid-success-default: light-dark(var(--palette-green-800), var(--palette-green-500)); --color-solid-success-hover: light-dark(var(--palette-green-600), var(--palette-green-400)); /* [I] Dark solid pressed is not enumerated in the DESIGN.md §4.1 step-role table; one step darker than Dark default follows the brand pattern. */ --color-solid-success-pressed: light-dark(var(--palette-green-800), var(--palette-green-600)); --color-on-solid-success: light-dark(var(--palette-base-white), var(--palette-neutral-1300)); --color-soft-success-default: light-dark(var(--palette-green-100), var(--palette-green-1000)); --color-soft-success-hover: light-dark(var(--palette-green-200), var(--palette-green-900)); --color-soft-success-pressed: light-dark(var(--palette-green-300), var(--palette-green-800)); --color-on-soft-success: light-dark(var(--palette-green-900), var(--palette-green-300)); --color-border-success-default: light-dark(var(--palette-green-600), var(--palette-green-500)); --color-border-success-hover: light-dark(var(--palette-green-700), var(--palette-green-400)); --color-content-success: light-dark(var(--palette-green-800), var(--palette-green-400)); /* --- Semantic/Color — info ------------------------------------------- */ --color-solid-info-default: light-dark(var(--palette-blue-700), var(--palette-blue-500)); --color-solid-info-hover: light-dark(var(--palette-blue-600), var(--palette-blue-400)); /* [I] Dark solid pressed is not enumerated in the DESIGN.md §4.1 step-role table; one step darker than Dark default follows the brand pattern. */ --color-solid-info-pressed: light-dark(var(--palette-blue-800), var(--palette-blue-600)); --color-on-solid-info: light-dark(var(--palette-base-white), var(--palette-neutral-1300)); --color-soft-info-default: light-dark(var(--palette-blue-100), var(--palette-blue-1000)); --color-soft-info-hover: light-dark(var(--palette-blue-200), var(--palette-blue-900)); --color-soft-info-pressed: light-dark(var(--palette-blue-300), var(--palette-blue-800)); --color-on-soft-info: light-dark(var(--palette-blue-800), var(--palette-blue-300)); --color-border-info-default: light-dark(var(--palette-blue-600), var(--palette-blue-500)); --color-border-info-hover: light-dark(var(--palette-blue-700), var(--palette-blue-400)); --color-content-info: light-dark(var(--palette-blue-700), var(--palette-blue-400)); /* --- Semantic/Color — disabled & shadow ------------------------------ */ --color-solid-disabled: light-dark(var(--palette-neutral-300), var(--palette-neutral-950)); --color-on-solid-disabled: light-dark(var(--palette-neutral-600), var(--palette-neutral-750)); --color-border-disabled: light-dark(var(--palette-neutral-400), var(--palette-neutral-900)); --color-shadow-key: light-dark(var(--palette-base-alpha-black-16), var(--palette-base-alpha-black-40)); --color-shadow-ambient: light-dark(var(--palette-base-alpha-black-8), var(--palette-base-alpha-black-24)); /* --- Elevation composites — DESIGN.md §8.1 --------------------------- Ambient layer first (diffuse, grounds the surface), then key (directional, carries the light direction). Documented as unconsumed by any component; consuming them here is deliberate. */ --elevation-raised: 0 var(--elevation-shadow-1) var(--elevation-shadow-3) 0 var(--color-shadow-ambient), 0 var(--elevation-shadow-1) var(--elevation-shadow-2) 0 var(--color-shadow-key); --elevation-overlay: 0 var(--elevation-shadow-1) var(--elevation-shadow-6) 0 var(--color-shadow-ambient), 0 var(--elevation-shadow-2) var(--elevation-shadow-4) 0 var(--color-shadow-key); --elevation-sticky: 0 var(--elevation-shadow-2) var(--elevation-shadow-12) 0 var(--color-shadow-ambient), 0 var(--elevation-shadow-4) var(--elevation-shadow-8) 0 var(--color-shadow-key); --elevation-modal: 0 var(--elevation-shadow-4) var(--elevation-shadow-24) 0 var(--color-shadow-ambient), 0 var(--elevation-shadow-8) var(--elevation-shadow-16) 0 var(--color-shadow-key); --elevation-popover: 0 var(--elevation-shadow-8) var(--elevation-shadow-40) 0 var(--color-shadow-ambient), 0 var(--elevation-shadow-12) var(--elevation-shadow-24) 0 var(--color-shadow-key); } /* ============================================================================ THE THREE SWITCHES Brand lives in tokens.brand.css. Theme and Platform resolve here. All three are independent — any combination must render without forking. ========================================================================== */ /* THEME. `color-scheme` is what light-dark() reads, so setting it is the whole theme switch. It also aligns native scrollbars and form controls. */ :root { color-scheme: light dark; /* default: follow the OS */ } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* PLATFORM. Only the two family variables and the heading px pairs differ. Web is the default above; iOS/Android override here. Note: on iOS/Android the heading px pairs differ from Web, so the ratios are recomputed rather than reused — DESIGN.md §5.3. */ :root[data-platform="ios"] { --font-family-display: var(--type-scale-family-sf-display); --font-family-text: var(--type-scale-family-sf-text); --font-heading-xl-size: var(--type-scale-size-24); --font-heading-xl-line-height: 1.33; --font-heading-lg-size: var(--type-scale-size-20); --font-heading-lg-line-height: 1.4; --font-heading-md-size: var(--type-scale-size-18); --font-heading-md-line-height: 1.44; --font-heading-xs-size: var(--type-scale-size-14); --font-heading-xs-line-height: 1.57; } :root[data-platform="android"] { --font-heading-xl-size: var(--type-scale-size-24); --font-heading-xl-line-height: 1.33; --font-heading-lg-size: var(--type-scale-size-20); --font-heading-lg-line-height: 1.4; --font-heading-md-size: var(--type-scale-size-18); --font-heading-md-line-height: 1.44; --font-heading-xs-size: var(--type-scale-size-14); --font-heading-xs-line-height: 1.57; }