/* ============================================================ * Realm Directory — Design Tokens (CSS custom properties) * Source of truth: tokens/{core,realm,directory}.tokens.json (DTCG v2025.10) * Generated artifact for Forge consumption. Do not hand-edit values * that are derived from the DTCG layer; update the JSON sources first. * * Layers: * --core-* : primitives (lilac/rose/ink/rank/affinity scales, dims) * --realm-* : brand semantics (theme-aware via [data-theme]) * --directory-* : product / component-level * * Theming: * :root → Light theme (default) * [data-theme="dark"] → Dark theme overrides realm.* tokens only * ============================================================ */ :root { /* ---------- Core · Color · Lilac ---------- */ --core-color-lilac-100: #F5EFFB; --core-color-lilac-200: #E6D8F4; --core-color-lilac-300: #CFB6EA; --core-color-lilac-400: #B594DD; --core-color-lilac-500: #8E6BCB; --core-color-lilac-600: #6F4DB0; /* ---------- Core · Color · Rose ---------- */ --core-color-rose-100: #FCEEF2; --core-color-rose-200: #F8D6DF; --core-color-rose-300: #F2B3C4; --core-color-rose-400: #E88AA3; --core-color-rose-500: #D45F80; --core-color-rose-600: #B0405F; /* ---------- Core · Color · Ink ---------- */ --core-color-ink-950: #0E0B17; --core-color-ink-900: #16121F; --core-color-ink-800: #1F1A2E; --core-color-ink-700: #3A334E; --core-color-ink-500: #5B5470; --core-color-ink-300: #B8AECC; --core-color-ink-200: #D8D0E5; --core-color-ink-150: #9C8BBE; --core-color-ink-100: #EDE7F3; --core-color-ink-50: #F4EFF7; /* ---------- Core · Color · Neutral ---------- */ --core-color-white: #FFFFFF; --core-color-off-white: #FDFAFE; --core-color-black: #000000; /* ---------- Core · Color · Rank (synced with rank-xp-system.md; AA-calibrated) ---------- */ --core-color-rank-recruit: #4B5563; /* AA 6.67:1 with ink-50 */ --core-color-rank-novice: #F3F4F6; /* uses ink-800 text 15.32:1 */ --core-color-rank-apprentice: #1F6B3F; /* AA 5.73:1 with ink-50 */ --core-color-rank-journeyman: #1D4ED8; /* AA 5.92:1 with ink-50 */ --core-color-rank-veteran: #6D28D9; /* AA 6.27:1 with ink-50 */ --core-color-rank-elite: #D4A017; /* uses ink-800 text 7.10:1 */ --core-color-rank-champion: #EA7317; /* uses ink-800 text 5.59:1 */ --core-color-rank-legend: #B91C1C; /* AA 5.71:1 with ink-50 */ /* ---------- Core · Color · Affinity (synced with portrait-prompts.md; AA on white) ---------- */ --core-color-affinity-saas: #7C5CD9; /* 4.78:1 on white */ --core-color-affinity-ecommerce: #C8395F; /* 4.99:1 on white */ --core-color-affinity-mobile: #0E8262; /* 4.79:1 on white */ --core-color-affinity-dashboard: #1F6FCC; /* 5.00:1 on white */ --core-color-affinity-marketing: #A86006; /* 4.84:1 on white */ --core-color-affinity-game: #A12FA1; /* 6.11:1 on white */ /* ---------- Core · Dimension · Spacing (8px base) ---------- */ --core-dimension-0: 0; --core-dimension-4: 4px; --core-dimension-8: 8px; --core-dimension-12: 12px; --core-dimension-16: 16px; --core-dimension-24: 24px; --core-dimension-32: 32px; --core-dimension-48: 48px; --core-dimension-64: 64px; /* ---------- Core · Radius ---------- */ --core-radius-0: 0; --core-radius-4: 4px; --core-radius-8: 8px; --core-radius-12: 12px; --core-radius-16: 16px; --core-radius-24: 24px; --core-radius-999: 999px; /* ---------- Core · Typography ---------- */ --core-font-family-rounded-sans: "Nunito", "Quicksand", "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --core-font-family-mono: "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace; --core-font-weight-regular: 400; --core-font-weight-medium: 500; --core-font-weight-semibold: 600; --core-font-weight-bold: 700; --core-font-weight-extrabold: 800; --core-font-size-12: 0.75rem; --core-font-size-14: 0.875rem; --core-font-size-16: 1rem; --core-font-size-20: 1.25rem; --core-font-size-25: 1.5625rem; --core-font-size-31: 1.9375rem; --core-font-size-39: 2.4375rem; --core-line-height-tight: 1.15; --core-line-height-snug: 1.3; --core-line-height-normal: 1.5; --core-line-height-relaxed: 1.7; --core-letter-spacing-tight: -0.01em; --core-letter-spacing-normal: 0; --core-letter-spacing-wide: 0.02em; /* ---------- Core · Motion ---------- */ --core-duration-instant: 0ms; --core-duration-fast: 150ms; --core-duration-base: 200ms; --core-duration-slow: 300ms; --core-easing-linear: cubic-bezier(0, 0, 1, 1); --core-easing-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --core-easing-ease-in: cubic-bezier(0.7, 0, 0.84, 0); --core-easing-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); /* ---------- Core · Blur ---------- */ --core-blur-sm: 8px; --core-blur-md: 16px; --core-blur-lg: 24px; /* ---------- Core · Elevation Shadow (5-step Z-depth ladder; ink base) ---------- * Light: rgba(31,26,46, α) — dark overrides swap to rgba(0,0,0, α) in [data-theme]. * Each step raises spread/opacity to express increasing Z-axis depth. * ---------------------------------------------------------------- */ --core-elevation-shadow-1: 0 1px 3px 0 rgba(31, 26, 46, 0.10), 0 1px 2px 0 rgba(31, 26, 46, 0.06); --core-elevation-shadow-2: 0 2px 6px 0 rgba(31, 26, 46, 0.12), 0 4px 8px 0 rgba(31, 26, 46, 0.08); --core-elevation-shadow-3: 0 4px 12px -2px rgba(31, 26, 46, 0.16), 0 8px 16px -4px rgba(31, 26, 46, 0.10); --core-elevation-shadow-4: 0 8px 24px -4px rgba(31, 26, 46, 0.20), 0 16px 32px -8px rgba(31, 26, 46, 0.12); --core-elevation-shadow-5: 0 16px 40px -8px rgba(31, 26, 46, 0.28), 0 24px 48px -12px rgba(31, 26, 46, 0.16); /* ---------- Core · Z-index ---------- */ --core-z-base: 0; --core-z-raised: 10; --core-z-dropdown: 1000; --core-z-sticky: 1100; --core-z-overlay: 1200; --core-z-modal: 1300; --core-z-popover: 1400; --core-z-toast: 1500; --core-z-tooltip: 1600; /* ============================================================ * Realm — Brand semantics (LIGHT theme) * ============================================================ */ /* Brand */ --realm-color-brand-primary: var(--core-color-lilac-500); --realm-color-brand-primary-strong: var(--core-color-lilac-600); --realm-color-brand-primary-soft: var(--core-color-lilac-200); --realm-color-brand-secondary: var(--core-color-rose-500); --realm-color-brand-secondary-strong: var(--core-color-rose-600); --realm-color-brand-secondary-soft: var(--core-color-rose-200); /* Ink (theme-aware) */ --realm-color-ink-strong: var(--core-color-ink-800); --realm-color-ink-soft: var(--core-color-ink-500); --realm-color-ink-muted: var(--core-color-ink-500); --realm-color-ink-inverse: var(--core-color-ink-50); /* Surface (theme-aware) */ --realm-color-surface-base: var(--core-color-off-white); --realm-color-surface-card: var(--core-color-white); --realm-color-surface-raised: var(--core-color-lilac-100); --realm-color-surface-subtle: var(--core-color-lilac-100); /* Glass surface: off-white 72% alpha on ink-50 base. * AA pre-flight (light): rgba(#FDFAFE,0.72) on #F4EFF7 → effective #FAFBFC, * contrast vs ink-800 (#1F1A2E): 16.23:1 PASS (AA 4.5:1 req) * AA pre-flight (dark): rgba(#16121F,0.62) on #1F1A2E → effective #191525, * contrast vs ink-50 (#F4EFF7): 16.34:1 PASS (AA 4.5:1 req) */ --realm-color-surface-glass: rgba(253, 250, 254, 0.72); /* Border (theme-aware) */ --realm-color-border-subtle: var(--core-color-ink-100); /* decorative hairline */ --realm-color-border-default: var(--core-color-ink-150); /* stateful UI border, 3.07:1 vs white */ --realm-color-border-strong: var(--core-color-ink-500); --realm-color-border-focus: var(--core-color-lilac-600); /* Rank palette (badge fill + on-text) */ --realm-color-rank-recruit-fill: var(--core-color-rank-recruit); --realm-color-rank-recruit-on: var(--core-color-ink-50); --realm-color-rank-novice-fill: var(--core-color-rank-novice); --realm-color-rank-novice-on: var(--core-color-ink-800); --realm-color-rank-apprentice-fill: var(--core-color-rank-apprentice); --realm-color-rank-apprentice-on: var(--core-color-ink-50); --realm-color-rank-journeyman-fill: var(--core-color-rank-journeyman); --realm-color-rank-journeyman-on: var(--core-color-ink-50); --realm-color-rank-veteran-fill: var(--core-color-rank-veteran); --realm-color-rank-veteran-on: var(--core-color-ink-50); --realm-color-rank-elite-fill: var(--core-color-rank-elite); --realm-color-rank-elite-on: var(--core-color-ink-800); --realm-color-rank-champion-fill: var(--core-color-rank-champion); --realm-color-rank-champion-on: var(--core-color-ink-800); --realm-color-rank-legend-fill: var(--core-color-rank-legend); --realm-color-rank-legend-on: var(--core-color-ink-50); /* Affinity */ --realm-color-affinity-saas: var(--core-color-affinity-saas); --realm-color-affinity-ecommerce: var(--core-color-affinity-ecommerce); --realm-color-affinity-mobile: var(--core-color-affinity-mobile); --realm-color-affinity-dashboard: var(--core-color-affinity-dashboard); --realm-color-affinity-marketing: var(--core-color-affinity-marketing); --realm-color-affinity-game: var(--core-color-affinity-game); /* Feedback */ --realm-color-feedback-success: var(--core-color-rank-apprentice); --realm-color-feedback-info: var(--core-color-rank-journeyman); --realm-color-feedback-warn: var(--core-color-rank-champion); --realm-color-feedback-danger: var(--core-color-rank-legend); /* Spacing */ --realm-spacing-none: var(--core-dimension-0); --realm-spacing-xs: var(--core-dimension-4); --realm-spacing-sm: var(--core-dimension-8); --realm-spacing-md: var(--core-dimension-16); --realm-spacing-lg: var(--core-dimension-24); --realm-spacing-xl: var(--core-dimension-32); --realm-spacing-2xl: var(--core-dimension-48); --realm-spacing-3xl: var(--core-dimension-64); /* Radius */ --realm-radius-none: var(--core-radius-0); --realm-radius-sm: var(--core-radius-4); --realm-radius-md: var(--core-radius-8); --realm-radius-lg: var(--core-radius-16); --realm-radius-xl: var(--core-radius-24); --realm-radius-pill: var(--core-radius-999); /* Shadow */ --realm-shadow-card-rest: 0 1px 2px 0 rgba(31, 26, 46, 0.08), 0 4px 8px 0 rgba(31, 26, 46, 0.06); --realm-shadow-card-hover: 0 8px 24px -4px rgba(142, 107, 203, 0.20), 0 2px 4px 0 rgba(31, 26, 46, 0.08); --realm-shadow-focus-ring: 0 0 0 3px rgba(111, 77, 176, 0.40); /* Elevation (semantic; references core elevation shadow ladder) */ --realm-elevation-1: var(--core-elevation-shadow-1); --realm-elevation-2: var(--core-elevation-shadow-2); --realm-elevation-3: var(--core-elevation-shadow-3); --realm-elevation-4: var(--core-elevation-shadow-4); --realm-elevation-5: var(--core-elevation-shadow-5); /* Blur (semantic) */ --realm-blur-surface: var(--core-blur-md); /* Motion */ --realm-motion-duration-page-transition: var(--core-duration-fast); --realm-motion-duration-hover: var(--core-duration-base); --realm-motion-duration-exit: var(--core-duration-fast); --realm-motion-easing-default: var(--core-easing-ease-out); --realm-motion-easing-emphasis: var(--core-easing-ease-in-out); /* Typography composite (helper bundles) */ --realm-typography-display-font: var(--core-font-family-rounded-sans); --realm-typography-display-size: var(--core-font-size-31); /* tightened from font-size-39; Direction D type scale */ --realm-typography-display-weight: var(--core-font-weight-extrabold); --realm-typography-display-lh: var(--core-line-height-tight); --realm-typography-display-ls: var(--core-letter-spacing-tight); --realm-typography-h1-size: var(--core-font-size-31); --realm-typography-h1-weight: var(--core-font-weight-bold); --realm-typography-h1-lh: var(--core-line-height-snug); --realm-typography-h2-size: var(--core-font-size-25); --realm-typography-h2-weight: var(--core-font-weight-semibold); --realm-typography-h2-lh: var(--core-line-height-snug); --realm-typography-body-size: var(--core-font-size-16); --realm-typography-body-weight: var(--core-font-weight-regular); --realm-typography-body-lh: var(--core-line-height-normal); --realm-typography-caption-size: var(--core-font-size-12); --realm-typography-caption-weight: var(--core-font-weight-medium); --realm-typography-caption-ls: var(--core-letter-spacing-wide); --realm-typography-mono-font: var(--core-font-family-mono); --realm-typography-mono-size: var(--core-font-size-14); /* ============================================================ * Directory — Component-level (theme-independent; resolves via realm.*) * ============================================================ */ /* Agent card */ --directory-agent-card-bg: var(--realm-color-surface-card); --directory-agent-card-bg-hover: var(--realm-color-surface-raised); --directory-agent-card-border: var(--realm-color-border-subtle); --directory-agent-card-border-hover: var(--realm-color-brand-primary-soft); --directory-agent-card-title: var(--realm-color-ink-strong); --directory-agent-card-subtitle: var(--realm-color-ink-soft); --directory-agent-card-radius: var(--realm-radius-lg); --directory-agent-card-padding: var(--realm-spacing-lg); --directory-agent-card-gap: var(--realm-spacing-md); --directory-agent-card-shadow: var(--realm-shadow-card-rest); --directory-agent-card-shadow-hover: var(--realm-shadow-card-hover); --directory-agent-card-transition-duration: var(--realm-motion-duration-hover); --directory-agent-card-transition-easing: var(--realm-motion-easing-default); /* Filter chip */ --directory-chip-bg: var(--realm-color-surface-card); --directory-chip-bg-hover: var(--realm-color-brand-primary-soft); --directory-chip-bg-selected: var(--realm-color-brand-primary-strong); /* lilac-600 → ink-50 = 5.51:1 */ --directory-chip-label: var(--realm-color-ink-strong); --directory-chip-label-selected: var(--realm-color-ink-inverse); --directory-chip-border: var(--realm-color-border-default); --directory-chip-border-selected: var(--realm-color-brand-primary-strong); --directory-chip-radius: var(--realm-radius-pill); --directory-chip-padding-x: var(--realm-spacing-md); --directory-chip-padding-y: var(--realm-spacing-sm); --directory-chip-gap: var(--realm-spacing-xs); --directory-chip-min-height: 44px; /* Hero */ --directory-hero-bg: var(--realm-color-surface-subtle); --directory-hero-title: var(--realm-color-ink-strong); --directory-hero-subtitle: var(--realm-color-ink-soft); --directory-hero-accent: var(--realm-color-brand-primary-strong); --directory-hero-radius: var(--realm-radius-xl); --directory-hero-padding-y: var(--realm-spacing-3xl); --directory-hero-padding-x: var(--realm-spacing-xl); /* Nav */ --directory-nav-bg: var(--realm-color-surface-card); --directory-nav-bg-scrolled: var(--realm-color-surface-card); --directory-nav-border: var(--realm-color-border-subtle); --directory-nav-label: var(--realm-color-ink-strong); --directory-nav-label-active: var(--realm-color-brand-primary-strong); --directory-nav-height: 64px; --directory-nav-z: var(--core-z-sticky); /* Search */ --directory-search-bg: var(--realm-color-surface-card); --directory-search-border: var(--realm-color-border-default); --directory-search-border-focus: var(--realm-color-border-focus); --directory-search-placeholder: var(--realm-color-ink-muted); --directory-search-text: var(--realm-color-ink-strong); --directory-search-radius: var(--realm-radius-md); --directory-search-padding-x: var(--realm-spacing-md); --directory-search-padding-y: var(--realm-spacing-sm); --directory-search-min-height: 44px; --directory-search-focus-ring: var(--realm-shadow-focus-ring); /* Rank badge */ --directory-rank-badge-radius: var(--realm-radius-pill); --directory-rank-badge-padding-x: var(--realm-spacing-sm); --directory-rank-badge-padding-y: var(--core-dimension-4); --directory-rank-badge-font-family: var(--core-font-family-rounded-sans); --directory-rank-badge-font-size: var(--core-font-size-12); --directory-rank-badge-font-weight: var(--core-font-weight-bold); --directory-rank-badge-letter-spacing:var(--core-letter-spacing-wide); /* Affinity icon */ --directory-affinity-icon-size: 16px; --directory-affinity-icon-gap: var(--realm-spacing-xs); --directory-affinity-icon-bg: var(--realm-color-surface-subtle); --directory-affinity-icon-padding: 4px; --directory-affinity-icon-radius: var(--realm-radius-sm); /* Tooltip */ --directory-tooltip-bg: var(--realm-color-ink-strong); --directory-tooltip-text: var(--realm-color-ink-inverse); --directory-tooltip-radius: var(--realm-radius-md); --directory-tooltip-padding-x: var(--realm-spacing-sm); --directory-tooltip-padding-y: var(--core-dimension-4); --directory-tooltip-z: var(--core-z-tooltip); /* Grid */ --directory-grid-columns-desktop: 12; --directory-grid-columns-tablet: 8; --directory-grid-columns-mobile: 4; --directory-grid-gutter: var(--realm-spacing-lg); --directory-grid-max-width: 1200px; /* Motion (component-level) */ --directory-motion-card-hover: var(--realm-motion-duration-hover); --directory-motion-page-transition: var(--realm-motion-duration-page-transition); --directory-motion-easing: var(--realm-motion-easing-default); /* ============================================================ * Direction D — Refined Grimoire with Foil Moments * All tokens below are additive; existing tokens are untouched. * ============================================================ */ /* Hero mesh */ --directory-hero-mesh-opacity: 0.6; /* Card watermark */ --directory-card-watermark-opacity-rest: 0; --directory-card-watermark-opacity-hover: 0.08; /* Card foil effect */ --directory-card-foil-gradient: linear-gradient(120deg, transparent 30%, rgba(255, 255, 255, 0.35) 50%, transparent 70%); --directory-card-foil-duration: 800ms; /* C1: motion token — collapsed to 0ms under reduced-motion */ /* Detail hero watermark */ --directory-detail-hero-watermark-size: 240px; --directory-detail-hero-watermark-opacity: 0.06; /* Tab active underline */ --directory-tab-active-underline-thickness: 2px; /* Motion tokens (C1: all keyframe durations must be token-bound) */ --directory-motion-foil-duration: var(--directory-card-foil-duration); /* alias for keyframe binding */ --directory-motion-mesh-duration: 12s; /* 4-stop mesh breath animation */ --directory-motion-watermark-fade-duration: 240ms; --directory-motion-float-duration: 4s; /* hero floats; replaces hard-coded 4s in styles.css */ } /* ============================================================ * Dark theme — overrides Realm semantic tokens only. * Core primitives never change. * ============================================================ */ [data-theme="dark"] { /* Ink swap */ --realm-color-ink-strong: var(--core-color-ink-50); --realm-color-ink-soft: var(--core-color-ink-300); --realm-color-ink-muted: var(--core-color-ink-300); --realm-color-ink-inverse: var(--core-color-ink-800); /* Surface swap (avoid pure #000; ink-900 / ink-800 / ink-700 ladder) */ --realm-color-surface-base: var(--core-color-ink-900); --realm-color-surface-card: var(--core-color-ink-800); --realm-color-surface-raised: var(--core-color-ink-700); --realm-color-surface-subtle: var(--core-color-ink-900); /* Border swap */ --realm-color-border-subtle: var(--core-color-ink-700); --realm-color-border-default: var(--core-color-ink-700); --realm-color-border-strong: var(--core-color-ink-300); --realm-color-border-focus: var(--core-color-lilac-300); /* Brand: nudge toward lighter lilac/rose to fight glare (saturation -10..-20%) */ /* --realm-color-brand-primary-strong dark re-evaluation: * lilac-400 (#B594DD) on ink-900 (#16121F): contrast 7.52:1 PASS (req 4.5:1) → adopted. * lilac-300 (#CFB6EA) on ink-900: contrast 10.55:1 PASS (prev value, also valid). */ --realm-color-brand-primary: var(--core-color-lilac-400); --realm-color-brand-primary-strong: var(--core-color-lilac-400); /* re-evaluated: 7.52:1 vs ink-900 PASS */ --realm-color-brand-primary-soft: var(--core-color-ink-700); --realm-color-brand-secondary: var(--core-color-rose-400); --realm-color-brand-secondary-strong: var(--core-color-rose-300); --realm-color-brand-secondary-soft: var(--core-color-ink-700); /* Shadows: softer ink, lilac glow scaled down */ --realm-shadow-card-rest: 0 1px 2px 0 rgba(0, 0, 0, 0.40), 0 4px 8px 0 rgba(0, 0, 0, 0.30); --realm-shadow-card-hover: 0 8px 24px -4px rgba(181, 148, 221, 0.25), 0 2px 4px 0 rgba(0, 0, 0, 0.40); --realm-shadow-focus-ring: 0 0 0 3px rgba(207, 182, 234, 0.55); /* Rank palette: novice (white) needs an ink swap on dark surfaces */ --realm-color-rank-novice-fill: var(--core-color-ink-50); --realm-color-rank-novice-on: var(--core-color-ink-800); /* Direction D: dark-theme glass surface override */ --realm-color-surface-glass: rgba(22, 18, 31, 0.62); /* ink-900 62% alpha */ /* Direction D: dark-theme elevation shadows (deeper black base) */ --core-elevation-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.28), 0 1px 2px 0 rgba(0, 0, 0, 0.20); --core-elevation-shadow-2: 0 2px 6px 0 rgba(0, 0, 0, 0.32), 0 4px 8px 0 rgba(0, 0, 0, 0.24); --core-elevation-shadow-3: 0 4px 12px -2px rgba(0, 0, 0, 0.40), 0 8px 16px -4px rgba(0, 0, 0, 0.28); --core-elevation-shadow-4: 0 8px 24px -4px rgba(0, 0, 0, 0.48), 0 16px 32px -8px rgba(0, 0, 0, 0.32); --core-elevation-shadow-5: 0 16px 40px -8px rgba(0, 0, 0, 0.60), 0 24px 48px -12px rgba(0, 0, 0, 0.40); } /* ============================================================ * Reduced motion — collapse all motion tokens to instant. * ============================================================ */ @media (prefers-reduced-motion: reduce) { :root { --realm-motion-duration-page-transition: var(--core-duration-instant); --realm-motion-duration-hover: var(--core-duration-instant); --realm-motion-duration-exit: var(--core-duration-instant); --directory-motion-card-hover: var(--core-duration-instant); --directory-motion-page-transition: var(--core-duration-instant); --directory-agent-card-transition-duration: var(--core-duration-instant); /* Direction D: collapse all foil / mesh / watermark / float animations */ --directory-card-foil-duration: var(--core-duration-instant); --directory-motion-foil-duration: var(--core-duration-instant); --directory-motion-mesh-duration: var(--core-duration-instant); --directory-motion-watermark-fade-duration: var(--core-duration-instant); --directory-motion-float-duration: var(--core-duration-instant); } } /* ============================================================ * Reduced transparency — fallback glass / blur to opaque values. * Applies on top of any active color scheme so a single :root * override covers light, dark, and OS-dark simultaneously. * ============================================================ */ @media (prefers-reduced-transparency: reduce) { :root { --realm-color-surface-glass: var(--realm-color-surface-card); --realm-blur-surface: 0px; } } /* ============================================================ * Optional: respect OS theme when no explicit data-theme is set. * ============================================================ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --realm-color-ink-strong: var(--core-color-ink-50); --realm-color-ink-soft: var(--core-color-ink-300); --realm-color-ink-muted: var(--core-color-ink-300); --realm-color-ink-inverse: var(--core-color-ink-800); --realm-color-surface-base: var(--core-color-ink-900); --realm-color-surface-card: var(--core-color-ink-800); --realm-color-surface-raised: var(--core-color-ink-700); --realm-color-surface-subtle: var(--core-color-ink-900); --realm-color-border-subtle: var(--core-color-ink-700); --realm-color-border-default: var(--core-color-ink-700); --realm-color-border-strong: var(--core-color-ink-300); --realm-color-border-focus: var(--core-color-lilac-300); --realm-color-brand-primary: var(--core-color-lilac-400); --realm-color-brand-primary-strong: var(--core-color-lilac-400); /* re-evaluated: 7.52:1 vs ink-900 PASS */ --realm-color-brand-primary-soft: var(--core-color-ink-700); --realm-color-brand-secondary: var(--core-color-rose-400); --realm-color-brand-secondary-strong: var(--core-color-rose-300); --realm-color-brand-secondary-soft: var(--core-color-ink-700); --realm-shadow-card-rest: 0 1px 2px 0 rgba(0, 0, 0, 0.40), 0 4px 8px 0 rgba(0, 0, 0, 0.30); --realm-shadow-card-hover: 0 8px 24px -4px rgba(181, 148, 221, 0.25), 0 2px 4px 0 rgba(0, 0, 0, 0.40); --realm-shadow-focus-ring: 0 0 0 3px rgba(207, 182, 234, 0.55); --realm-color-rank-novice-fill: var(--core-color-ink-50); --realm-color-rank-novice-on: var(--core-color-ink-800); /* Direction D: OS-dark glass surface override */ --realm-color-surface-glass: rgba(22, 18, 31, 0.62); /* Direction D: OS-dark elevation shadow overrides */ --core-elevation-shadow-1: 0 1px 3px 0 rgba(0, 0, 0, 0.28), 0 1px 2px 0 rgba(0, 0, 0, 0.20); --core-elevation-shadow-2: 0 2px 6px 0 rgba(0, 0, 0, 0.32), 0 4px 8px 0 rgba(0, 0, 0, 0.24); --core-elevation-shadow-3: 0 4px 12px -2px rgba(0, 0, 0, 0.40), 0 8px 16px -4px rgba(0, 0, 0, 0.28); --core-elevation-shadow-4: 0 8px 24px -4px rgba(0, 0, 0, 0.48), 0 16px 32px -8px rgba(0, 0, 0, 0.32); --core-elevation-shadow-5: 0 16px 40px -8px rgba(0, 0, 0, 0.60), 0 24px 48px -12px rgba(0, 0, 0, 0.40); } }