/* ========================================================================== NautilusPoll — Design Tokens (DARK ONLY) Source of truth: design/DESIGN.dark.md There is no light theme. These values do not swap. ========================================================================== */ :root { color-scheme: dark; /* --- Brand & Accent ---------------------------------------------------- */ --color-primary: #e60023; /* filled CTA background only */ --color-primary-hover: #f5183a; --color-primary-pressed: #c2001d; --color-primary-text: #ff5c72; /* red as TEXT/ICON on dark (5.72:1) */ --color-primary-tint: rgba(230, 0, 35, 0.14); --color-primary-tint-border: #5c1420; --color-on-primary: #ffffff; /* 4.78:1 on --color-primary */ /* --- Surface ladder (elevation = lightness, not shadow) ----------------- */ --color-canvas: #0f0f0d; /* L0 ground */ --color-surface-soft: #151512; /* L1 wash */ --color-surface-card: #1c1c18; /* L2 card — the workhorse */ --color-surface-raised: #232320; /* L3 nested / hovered */ --color-surface-overlay: #2a2a26; /* L4 menu / tooltip / modal */ --color-scrim: rgba(0, 0, 0, 0.72); --color-secondary-bg: #2a2a26; --color-secondary-hover: #333330; --color-secondary-pressed: #3b3b36; --color-hairline: #302f2a; --color-hairline-soft: #26251f; /* --- Text ramp --------------------------------------------------------- */ --color-ink: #f5f5f0; /* 15.63:1 on card — never #fff */ --color-body: #dcdcd4; /* 12.40:1 — DEFAULT for prose */ --color-mute: #9a9a92; /* 6.03:1 — metadata */ --color-ash: #8a8a82; /* 4.91:1 — placeholder; floor for live text */ --color-stone: #5a5a54; /* 2.46:1 — NON-TEXT: disabled borders/fills only */ /* --- Semantic (always shipped with icon + label) ----------------------- */ --color-success: #0ca30c; --color-success-text: #3fcf6e; --color-success-bg: #0f2a18; --color-warning: #fab219; --color-warning-bg: #33260a; --color-serious: #ec835a; --color-serious-bg: #33200f; --color-critical: #d03b3b; --color-critical-text: #ff7a7a; --color-critical-bg: #331414; --color-focus-outer: #6e86ff; --color-focus-inner: #0f0f0d; /* --- Editorial accents ------------------------------------------------- */ --color-accent-blue: #6e86ff; --color-accent-purple: #b18af5; --color-accent-purple-deep: #9085e9; /* --- Data viz: categorical (FIXED ORDER, never cycled, never past 8) ---- */ --viz-series-1: #3987e5; /* blue — the default single series */ --viz-series-1-dim: #2a78d6; /* de-emphasised same hue */ --viz-series-2: #d95926; /* orange */ --viz-series-3: #199e70; /* aqua — all-pairs cap is slot 3 */ --viz-series-4: #c98500; /* yellow */ --viz-series-5: #d55181; /* magenta */ --viz-series-6: #008300; /* green */ --viz-series-7: #9085e9; /* violet */ --viz-series-8: #e66767; /* red */ /* --- Data viz: sequential (blue, light -> dark) ------------------------- */ --viz-seq-100: #cde2fb; --viz-seq-150: #b7d3f6; --viz-seq-200: #9ec5f4; --viz-seq-250: #86b6ef; --viz-seq-300: #6da7ec; --viz-seq-350: #5598e7; --viz-seq-400: #3987e5; --viz-seq-450: #2a78d6; --viz-seq-500: #256abf; --viz-seq-550: #1c5cab; --viz-seq-600: #184f95; /* ordinal dark-end floor (2.11:1) */ --viz-seq-650: #104281; /* --- Data viz: diverging (blue <-> red, neutral gray midpoint) ---------- */ --viz-div-neg: #3987e5; --viz-div-mid: #383835; --viz-div-pos: #e66767; /* --- Data viz: chrome --------------------------------------------------- */ --viz-surface: #1c1c18; --viz-plane: #0f0f0d; --viz-ink: #f5f5f0; --viz-ink-secondary: #dcdcd4; --viz-ink-muted: #898781; /* axis + tick labels */ --viz-gridline: #2c2c2a; /* 1px SOLID, never dashed */ --viz-baseline: #383835; --viz-ring: rgba(245, 245, 240, 0.10); /* --- Typography --------------------------------------------------------- */ --font-sans: "Pretendard Variable", Pretendard, Inter, -apple-system, system-ui, "Segoe UI", Roboto, "Helvetica Neue", "Apple SD Gothic Neo", "Noto Sans KR", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji"; --text-display-xl: 600 70px/1.1 var(--font-sans); --text-display-lg: 700 44px/1.15 var(--font-sans); --text-hero-figure: 600 48px/1.0 var(--font-sans); --text-heading-xl: 700 28px/1.2 var(--font-sans); --text-heading-lg: 600 22px/1.25 var(--font-sans); --text-heading-md: 600 18px/1.3 var(--font-sans); --text-body-md: 400 16px/1.4 var(--font-sans); --text-body-strong: 600 16px/1.4 var(--font-sans); --text-body-sm: 400 14px/1.4 var(--font-sans); --text-body-sm-strong:700 14px/1.4 var(--font-sans); --text-numeric-md: 600 16px/1.4 var(--font-sans); --text-caption-md: 500 12px/1.5 var(--font-sans); --text-caption-sm: 400 12px/1.4 var(--font-sans); --text-link-md: 600 16px/1.4 var(--font-sans); --text-button-md: 700 14px/1 var(--font-sans); --text-button-sm: 700 12px/1 var(--font-sans); /* dark-mode optical tracking: negative at display, POSITIVE under 16px */ --track-display-xl: -1.2px; --track-display-lg: -0.8px; --track-hero-figure: -0.5px; --track-heading-xl: -1.2px; --track-body-sm: 0.1px; --track-caption: 0.15px; /* --- Spacing (8px base) -------------------------------------------------- */ --space-xxs: 4px; --space-xs: 6px; --space-sm: 8px; --space-md: 12px; --space-lg: 16px; --space-xl: 24px; --space-xxl: 32px; --space-section: 64px; /* --- Radius (three chrome values + one data value) ---------------------- */ --radius-none: 0px; --radius-sm: 8px; --radius-md: 16px; /* dominant component radius */ --radius-lg: 32px; /* large cards, modals */ --radius-full: 9999px; --radius-bar: 4px; /* DATA only — result-bar data-end. Never on chrome. */ /* --- Elevation (L0–L3 have NO shadow; depth is surface lightness) ------- */ --shadow-l0: none; --shadow-l1: none; --shadow-l2: none; --shadow-l3: none; --shadow-l4: 0 8px 24px rgba(0, 0, 0, 0.50); --shadow-l5: 0 16px 48px rgba(0, 0, 0, 0.64); /* --- Layout ------------------------------------------------------------- */ --container-max: 1280px; --container-instrument: 720px; /* composer / vote / results column */ /* --- Motion ------------------------------------------------------------- */ --ease: cubic-bezier(0.2, 0, 0, 1); --dur-state: 120ms; --dur-enter: 200ms; --dur-modal: 320ms; } /* ========================================================================== Base ========================================================================== */ body { background: var(--color-canvas); color: var(--color-body); font: var(--text-body-md); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Universal focus rule — never remove without a replacement */ :focus-visible { outline: 2px solid var(--color-focus-outer); outline-offset: 2px; border-radius: inherit; } /* ========================================================================== Reduced motion — disables ALL bar animation and transitions ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== Forced colors — texture channel takes over from hue ========================================================================== */ @media (forced-colors: active) { .result-bar__fill { forced-color-adjust: none; background: CanvasText; } .poll-status-pill { border: 1px solid CanvasText; } }