/* ============================================================ * SP-503 — Canonical Token Layer (look-agnostic, single source of truth) * ------------------------------------------------------------ * ONE file replaces the 5 competing token/theme files: * styles/themes.css, styles/themes-canonical.css, * jargan-tokens.css, styles-instrument-paper.css (token block), * styles-editorial.css (token overrides). * * RULES: * - Token NAMES are semantic (role), never look-named. * --color-canvas NOT --paper / --ed-canvas / --newsprint * --radius-md NOT --rounded / --sharp * --font-display NOT --serif / --playfair * - Token VALUES are the CONTROL = current usable production look * (warm paper / Inter / orange / rounded). NOT the Newsprint reskin. * - A/B variant: one added CSS layer (theme-ab-variant.css) that * overrides token VALUES only. Zero markup edits. * * Load order in index.html: FIRST (before all other stylesheets). * Backward-compat bridge aliases at the bottom keep existing CSS working. * ============================================================ */ :root { /* ---- Palette (semantic roles, not colour names) ---- */ --color-canvas: #FAF7F2; /* page background */ --color-surface: #FFFFFF; /* raised card/figure surface */ --color-ink: #0E0E0E; /* primary text */ --color-ink-muted: #6B6B6B; /* secondary text */ --color-line: #ECE7DE; /* hairline divider/border */ --color-accent: #DD5100; /* brand signal — Traffic Orange */ --color-accent-strong: #8A3300; /* accent pressed/hover-dark */ --color-accent-2: #FF8138; /* accent ramp mid */ --color-accent-3: #FFB380; /* accent ramp light */ --color-on-accent: #FFFFFF; /* text/icon on an accent fill */ --color-invert-bg: #0E0E0E; /* inverted strip background */ --color-invert-ink: #FFFFFF; /* text on inverted strip */ /* ---- Funnel-stage ramp ---- */ --color-stage-1: #FFB380; --color-stage-2: #FF8138; --color-stage-3: #DD5100; --color-stage-4: #8A3300; /* ---- Radius ---- */ --radius-sm: 3px; --radius-md: 12px; --radius-lg: 14px; --radius-pill: 999px; /* ---- Type families ---- */ --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-display: var(--font-ui); /* control: display == ui (sans) */ --font-prose: var(--font-ui); --font-mono: 'SF Mono', 'Monaco', 'Inconsolata', 'Fira Code', monospace; /* ---- Type scale ---- */ --text-hero: clamp(40px, 5.5vw, 64px); --text-display: clamp(28px, 3.4vw, 40px); --text-h3: clamp(22px, 2.6vw, 30px); --text-lede: 17px; --text-body: 16px; --text-ui: 14px; --text-eyebrow: 11px; --text-caption: 13px; --weight-display: 800; --weight-strong: 700; --weight-body: 400; --tracking-display: -0.025em; --tracking-hero: -0.035em; --tracking-eyebrow: 0.16em; --leading-body: 1.55; --leading-display: 1.05; /* ---- Layout (tokens so a theme can rearrange) ---- */ --content-max: 880px; --shell-max: 1100px; --measure-max: 540px; --split-cols: 1fr 1fr; --split-gap: 56px; --grid-min: 220px; --space-section: 90px; --space-block: 28px; /* ---- Elevation / motion ---- */ --shadow-card: 0 18px 60px -28px rgba(14, 14, 14, 0.18); --shadow-card-sm: 0 8px 24px -16px rgba(14, 14, 14, 0.18); --lift-hover: translateY(-1px); --dur-fast: 150ms; --dur-mid: 250ms; --dur-slow: 350ms; --ease-out: ease-out; --ease-mechanical: cubic-bezier(0.22, 1, 0.36, 1); --motion-fast: var(--dur-fast) ease; --motion-mid: var(--dur-mid) ease; --transition-fast: var(--dur-fast) var(--ease-out); --transition-base: var(--dur-mid) var(--ease-out); --transition-slow: var(--dur-slow) var(--ease-out); /* ================================================================ * BACKWARD-COMPAT BRIDGE * Maps old look-named / framework variables -> semantic tokens above. * Existing CSS (themes.css consumers, styles-instrument-paper.css, * styles-editorial.css, auth-modal.css, etc.) keeps resolving without * any edits to those files. Remove each alias once the consumer is * migrated to the semantic token directly. * ================================================================ */ /* Canvas / surface / ink */ --bg-primary: var(--color-canvas); --bg-secondary: #F5F5F5; --bg-tertiary: #EEEEEA; --bg-input: var(--color-surface); --bg-hover: #F5F5F5; --bg-active: #EEEEEA; --text-primary: var(--color-ink); --text-secondary: #404040; --text-muted: var(--color-ink-muted); --border-default: var(--color-line); --border-heavy: var(--color-ink); /* Accent / signal */ --accent-primary: var(--color-accent-strong); /* AA-safe body text */ --accent-secondary: #2d6a2f; --accent-jargan: var(--color-accent); --success: #2d6a2f; --warning: var(--color-accent); --error: #cc0000; /* Social / chart */ --instagram: #e1306c; --facebook: #1877f2; --chart-1: var(--color-stage-3); --chart-2: #646e3a; --chart-3: var(--color-accent-2); --chart-4: #404040; /* Semantic state surfaces */ --success-bg: rgba(45, 106, 47, 0.1); --success-border: rgba(45, 106, 47, 0.5); --success-color: #3d4620; --error-bg: rgba(204, 0, 0, 0.1); --error-border: rgba(204, 0, 0, 0.4); --error-color: #8b0000; --warning-bg: rgba(221, 81, 0, 0.08); --warning-border: rgba(221, 81, 0, 0.4); --warning-color: #8A3300; /* Font aliases */ --font-sans: var(--font-ui); /* ip-signal aliases (instrument-paper consumers) */ --ip-signal-active: var(--color-accent-strong); --ip-signal-warn: var(--color-accent); --ip-signal-alert: #cc0000; --ip-signal-success: #2d6a2f; /* ---- ip-gray ramp aliases (styles-instrument-paper.css consumers) ---- * These were previously sourced from styles/themes.css :root block. * Control values match the editorial reskin (near-black to off-white). * Theme-variant [data-theme="dark"] etc. override these below. */ --ip-black: #111111; --ip-gray-900: #1a1a1a; --ip-gray-800: #2d2d2d; --ip-gray-700: #404040; --ip-gray-600: #595959; --ip-gray-500: #808080; --ip-gray-400: #999999; --ip-gray-300: #b3b3b3; --ip-gray-200: #d9d9d9; --ip-gray-100: #e6e6e6; --ip-gray-50: #f5f5f5; --ip-white: #ffffff; /* ---- Fluid type scale aliases (themes.css consumers) ---- */ --text-xs: 9px; --text-sm: 11px; --text-base: 13px; --text-md: 15px; --text-lg: 18px; --text-xl: 24px; /* ---- Weight aliases ---- */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ---- Line-height aliases (styles-instrument-paper.css) ---- */ --leading-normal: 1.4; --leading-relaxed: 1.6; /* ---- Line-width aliases (styles-instrument-paper.css) ---- */ --line-hairline: 1px; --line-normal: 2px; --line-heavy: 3px; --line-bold: 4px; /* ---- Spacing aliases (styles-instrument-paper.css) ---- */ --space-unit: 8px; --space-0: 0; --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-6: 48px; --space-8: 64px; /* ---- Surface / border aliases not yet defined elsewhere ---- */ --bg-surface: var(--color-surface); --border-subtle: 1px solid var(--color-line); /* ---- Shadow aliases (textured-geometric theme consumer) ---- */ --shadow-paper: none; --shadow-sharp: none; /* ---- Role-badge colour sets (styles-instrument-paper.css consumers) ---- */ --rb-orange: #DD5100; --rb-orange-hover: #c44700; --rb-orange-tint: #fff4ed; --rb-orange-border: #f5c6a5; --rb-orange-text: #9e3800; --rb-olive: #646e3a; --rb-olive-tint: #f6f8f0; --rb-olive-border: #dde4c8; --rb-olive-text: #3d4620; --rb-danger: #d64545; --rb-danger-tint: #fef0ef; --rb-danger-text: #8b2323; } /* ================================================================ * THEME VARIANT OVERRIDES — ip-gray ramp per theme * (formerly in styles/themes.css [data-theme] blocks) * ================================================================ */ [data-theme="dark"] { --ip-black: #0a0e27; --ip-gray-900: #16213e; --ip-gray-800: #1f2e4a; --ip-gray-700: #2d3e52; --ip-gray-600: #3d4f66; --ip-gray-500: #5a7a99; --ip-gray-400: #7a99bb; --ip-gray-300: #a0b8d4; --ip-gray-200: #c5d9eb; --ip-gray-100: #dfe9f5; --ip-gray-50: #eef2f8; --ip-white: #ffffff; } [data-theme="pastel-mondrian"] { --ip-black: #304c61; --ip-gray-900: #485d71; --ip-gray-800: #5d6f85; --ip-gray-700: #708299; --ip-gray-600: #8295ad; --ip-gray-500: #95a8bb; --ip-gray-400: #a8bbc9; --ip-gray-300: #bbcad7; --ip-gray-200: #d4dfe6; --ip-gray-100: #e6ecf1; --ip-gray-50: #f2f6f9; --ip-white: #ffffff; } [data-theme="instrument-paper"] { --ip-black: #000000; --ip-gray-900: #1a1a1a; --ip-gray-800: #262626; --ip-gray-700: #404040; --ip-gray-600: #595959; --ip-gray-500: #808080; --ip-gray-400: #999999; --ip-gray-300: #b3b3b3; --ip-gray-200: #d9d9d9; --ip-gray-100: #e6e6e6; --ip-gray-50: #f5f5f5; --ip-white: #ffffff; } [data-theme="textured-geometric"] { --ip-black: #111111; --ip-gray-900: #1a1a1a; --ip-gray-800: #2d2d2d; --ip-gray-700: #404040; --ip-gray-600: #595959; --ip-gray-500: #808080; --ip-gray-400: #999999; --ip-gray-300: #b3b3b3; --ip-gray-200: #d4d0c8; --ip-gray-100: #e8e4dc; --ip-gray-50: #F2F1EC; --ip-white: #F2F1EC; --shadow-paper: 6px 8px 4px rgba(0,0,0,0.18); --shadow-sharp: 4px 6px 0px rgba(0,0,0,0.20); }