/* ========================================================================== Phoenix Core — prototype token layer Values traced to Figma: 𝗗𝗦𝗠 Phoenix Core Design System 2.0 (WIP) file ibZPdgO4uv3qIxbF9uxM1d -------------------------------------------------------------------------- These are PROTOTYPE tokens, not the published DS. Where a value came from a named Figma variable the source name is in a trailing comment; anything without one is a prototype-local decision and a candidate for tokenising. Traced 2026-07-22 from three component sets: ❖ Button Generic 665:3122 ❖ Icon Wrapper 10748:22040 ❖ Badges 665:4789 ========================================================================== */ :root { /* ---- Content ------------------------------------------------------ */ --content-default: #0b0f19; /* content/neutral/default */ --content-strong: #323c4d; /* content/neutral/strong */ --content-medium: #5b6780; /* content/neutral/medium */ --content-on-colour: #ffffff; /* content/on-colour/on-info */ /* Semantic content ramp. These are the DS names — `error` not `critical`, `info` not `routine`. Severity aliases below map onto them. */ --content-info: #0468c8; /* content/info/emphasis */ --content-error: #b91c1c; /* content/error/emphasis */ --content-success: #15803d; /* content/success/emphasis */ --content-warning: #92400e; /* content/warning/emphasis */ /* ---- Background / surface ----------------------------------------- */ --surface: #ffffff; --bg-neutral-muted: #f6f7f9; /* background/neutral/muted */ --bg-app: #eef1f5; --bg-info-emphasis: #0468c8; /* background/info/emphasis */ /* ---- Tints --------------------------------------------------------- Two strengths per hue, and the DS uses them for different jobs: `soft` (~16%) fills a badge, `subtle` (~8%) fills an icon wrapper. Kept as 8-digit hex to match the Figma values exactly. */ --tint-neutral-soft: #0c225214; /* tints/neutral/soft */ --tint-info-soft: #1e90ff29; /* tints/info/soft */ --tint-info-subtle: #1e90ff14; /* tints/info/subtle */ --tint-error-soft: #dc262629; /* tints/error/soft */ --tint-error-subtle: #dc262614; /* tints/error/subtle */ --tint-success-soft: #22c55e29; /* tints/success/soft */ --tint-warning-soft: #ffb30029; /* tints/warning/soft */ --tint-neutral-muted: rgba(11, 34, 83, .04); /* prototype-local */ /* ---- Border -------------------------------------------------------- */ --border-neutral-strong: #5b6780; /* border/neutral/strong */ --border-subtle: #e2e8f0; --border-strong: #cdd6e0; --border-thin: 1px; /* border/thin */ --border-medium: 1.5px; /* border-density/medium */ --border-thick: 2px; /* border-density/thick */ /* ---- Radius -------------------------------------------------------- */ --radius-xs: 4px; /* radius-density/xs */ --radius-sm: 6px; --radius-md: 8px; --radius-lg: 10px; --radius-xl: 14px; --radius-pill: 999px; /* radius/pill */ /* ---- Spacing ------------------------------------------------------- */ --space-sm: 4px; /* size-spacing/sm */ --space-md: 6px; /* prototype-local (no DS step here) */ --space-lg: 8px; /* size-spacing/lg */ --space-2xl: 12px; /* size-spacing/2xl */ --space-4xl: 16px; /* size-spacing/4xl */ --space-5xl: 20px; /* prototype-local */ --space-6xl: 24px; /* size-spacing/6xl */ --page-margin: 32px; /* page/page-margin */ /* ---- Icon sizes ----------------------------------------------------- */ --icon-2xl: 12px; /* icon-size-density/2xl */ --icon-4xl: 16px; /* icon-size-density/4xl */ --icon-5xl: 20px; /* icon-size-density/5xl */ /* ---- Components: button -------------------------------------------- Three modes in the DS — filled, outline, ghost — all on the same primary blue. Outline carries a 2px border. */ --btn-pad-x: 12px; /* components/button/padding-x */ --btn-icon-gap: 4px; /* components/button/icon-gap */ --btn-radius-sm: 6px; /* components/button/radius-sm */ --btn-radius-md: 8px; /* components/button/radius-md */ --btn-radius-pill: 999px; /* components/button/radius-pill */ --btn-size-sm: 32px; /* components/button/size-sm */ --btn-size-md: 40px; /* components/button/size-md */ --btn-primary-bg: #0468c8; /* button/primary/default/background-default */ --btn-primary-fg: #ffffff; /* button/primary/default/foreground-default */ --btn-outline-fg: #0468c8; /* button/primary/outline/foreground-default */ --btn-outline-border: #0468c8; /* button/primary/outline/border-default */ --btn-neutral-bg: #0c225214; /* button/neutral/default/background-default */ --btn-neutral-bg-hover: rgba(12, 34, 82, .14); /* prototype-local */ /* ---- Components: icon wrapper --------------------------------------- Square, pill radius, tinted fill with the matching emphasis colour on the glyph. md is 40px with a 20px icon. */ --iconwrap-md: 40px; /* components/button/size-md */ --iconwrap-sm: 32px; --iconwrap-pad: 4px; /* size-spacing/sm */ /* ---- Typography ----------------------------------------------------- */ --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace; --type-body-md: 14px; /* typography/body/md/size */ --type-body-md-lh: 20px; /* typography/body/md/line-height */ --type-body-sm: 12px; /* typography/body/sm/size */ --type-body-sm-lh: 18px; /* typography/body/sm/line-height */ --type-body-sm-weight: 500; /* typography/body/sm/weight-medium */ --type-body-xs: 10px; /* typography/body/xs/size */ --type-body-xs-lh: 16px; /* typography/body/xs/line-height */ --type-button-sm: 13px; /* typography/button/sm/size */ --type-button-sm-lh: 16px; /* typography/button/sm/line-height */ --type-button-md: 14px; /* typography/button/md/size */ --type-button-md-lh: 18px; /* typography/button/md/line-height */ /* Shared by button/sm and button/md — both carry the same weight and tracking. */ --type-button-weight: 600; /* typography/button/weight */ --type-button-ls: -.4px; /* typography/button/letter-spacing */ /* ---- Notification severity ------------------------------------------ Only two severities exist: routine and critical. These are aliases onto the DS semantic ramp above, not a parallel colour system — so a change upstream in Figma lands here without a second edit. routine → info critical → error `soft` fills badges, `subtle` fills icon wrappers, per the DS. */ --sev-routine: var(--content-info); --sev-routine-soft: var(--tint-info-soft); --sev-routine-subtle: var(--tint-info-subtle); --sev-critical: var(--content-error); --sev-critical-soft: var(--tint-error-soft); --sev-critical-subtle: var(--tint-error-subtle); /* ---- Elevation ------------------------------------------------------ */ --shadow-toast: 0 10px 28px -6px rgba(16, 33, 46, .30), 0 2px 4px rgba(16, 33, 46, .10); --shadow-sheet: -16px 0 44px -16px rgba(16, 33, 46, .32); --shadow-pop: 0 12px 34px -8px rgba(16, 33, 46, .28), 0 2px 6px rgba(16, 33, 46, .10); /* ---- Focus ---------------------------------------------------------- */ /* Double-ring: 3:1 against surface, per WCAG AA (2.4.11 / 1.4.11) */ --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--bg-info-emphasis); }