/* ============================================================ Upgrade Pro V5 theme system Default: "Porcelain" — premium light (ink on warm porcelain) Dark: "Obsidian Silk" — near-black glass with iridescent silk Every component consumes tokens only; themes swap via . ============================================================ */ :root { /* shared, theme-independent */ --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-pill: 100px; --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1); --transition: 0.36s cubic-bezier(0.22, 1, 0.36, 1); --maxw: 1180px; } /* ---------------------------------------------- PORCELAIN (default) */ :root, [data-theme="porcelain"] { color-scheme: light; /* Demo typography (Option C): Instrument Sans + IBM Plex Mono, 700 display */ --font-display: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace; --fw-display: 700; --bg-page: #F7F6F2; --bg-page-2: #F2F0E9; --bg-dark: var(--bg-page); /* legacy aliases */ --bg-darker: var(--bg-page); --surface-1: #FFFFFF; --surface-2: #F4F2EC; --surface-3: #E9E6DD; --hairline: #E7E4DC; --hairline-strong: #D8D4C8; --hairline-accent: rgba(14, 42, 71, 0.35); --text-primary: #101826; --text-secondary: #3D4756; --text-muted: #5A6678; --text-faint: #8C95A3; --accent-color: #0E2A47; /* ink navy: primary actions */ --accent-rgb: 14, 42, 71; --on-accent: #F7F6F2; --accent-data: #00A3C7; /* brand cyan, darkened for light bg */ --accent-grad: linear-gradient(135deg, #0E2A47, #143A5F); --primary-color: #0E2A47; --primary-rgb: 14, 42, 71; --font-editorial: 'Newsreader', Georgia, serif; --color-green: #1F9D6B; --color-amber: #D98E2B; --color-coral: #C2410C; --color-red: #DC2626; --color-blue: #1D4ED8; --verdict-strong: #1F9D6B; --verdict-favorable: #0E7490; --verdict-contested: #C07A1F; --verdict-longshot: #717C8A; --shadow-card: 0 1px 2px rgba(16, 24, 38, 0.04), 0 10px 28px -14px rgba(16, 24, 38, 0.14); --shadow-float: 0 22px 50px -18px rgba(16, 24, 38, 0.2); --glow-accent: var(--shadow-float); --glow-accent-soft: 0 6px 18px -8px rgba(16, 24, 38, 0.18); --glow-green: 0 14px 30px -14px rgba(31, 157, 107, 0.4); --elev-1: var(--shadow-card); --elev-2: var(--shadow-float); --header-bg: rgba(247, 246, 242, 0.86); --bestpick-bg: var(--accent-grad); --bestpick-fg: #FFFFFF; --bestpick-fg-dim: #B9CBDC; --bestpick-track: rgba(255, 255, 255, 0.2); --bp-line: rgba(14, 42, 71, 0.55); /* blueprint strokes */ --bp-line-soft: rgba(14, 42, 71, 0.18); --bp-grid: rgba(14, 42, 71, 0.05); } /* ---------------------------------------------- OBSIDIAN SILK (dark) */ [data-theme="obsidian"] { color-scheme: dark; /* Demo typography (Option D): Manrope at heavy weights + JetBrains Mono */ --font-display: 'Manrope', 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Manrope', 'Instrument Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace; --fw-display: 800; --bg-page: #08080A; --bg-page-2: #0C0C10; --bg-dark: var(--bg-page); --bg-darker: var(--bg-page); --surface-1: #101014; --surface-2: #16161C; --surface-3: #1F1F27; --hairline: rgba(255, 255, 255, 0.08); --hairline-strong: rgba(255, 255, 255, 0.17); --hairline-accent: rgba(125, 211, 252, 0.4); --text-primary: #F4F4F6; --text-secondary: #C7C9D1; --text-muted: #8B8E98; --text-faint: #5E626E; --accent-color: #7DD3FC; --accent-rgb: 125, 211, 252; --on-accent: #0B0B0D; --accent-data: #7DD3FC; --accent-grad: linear-gradient(110deg, #7DD3FC, #A78BFA); --primary-color: #7DD3FC; --primary-rgb: 125, 211, 252; --font-editorial: 'Instrument Serif', Georgia, serif; --color-green: #6EE7B7; --color-amber: #FBBF77; --color-coral: #FB923C; --color-red: #F87171; --color-blue: #93C5FD; --verdict-strong: #6EE7B7; --verdict-favorable: #7DD3FC; --verdict-contested: #FBBF77; --verdict-longshot: #8B8E98; --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 14px 34px -18px rgba(0, 0, 0, 0.7); --shadow-float: 0 26px 60px -20px rgba(0, 0, 0, 0.8); --glow-accent: 0 0 26px rgba(125, 211, 252, 0.22), 0 0 70px rgba(167, 139, 250, 0.1); --glow-accent-soft: 0 0 16px rgba(125, 211, 252, 0.12); --glow-green: 0 0 22px rgba(110, 231, 183, 0.2); --elev-1: var(--shadow-card); --elev-2: var(--shadow-float); --header-bg: rgba(8, 8, 10, 0.82); --bestpick-bg: #101014; --bestpick-fg: var(--text-primary); --bestpick-fg-dim: var(--text-muted); --bestpick-track: rgba(255, 255, 255, 0.12); --bp-line: rgba(125, 211, 252, 0.5); --bp-line-soft: rgba(125, 211, 252, 0.2); --bp-grid: rgba(125, 211, 252, 0.045); }