/* ── Shared AP theme: Sofia Pro + light palette ────────────────────────── Loaded first on every page; page-specific rules live in app.css / picker.css. */ @font-face { font-family: "Sofia Pro"; src: url("fonts/SofiaProLight.ttf") format("truetype"); font-weight: 300; font-style: normal; font-display: optional; } @font-face { font-family: "Sofia Pro"; src: url("fonts/SofiaProRegular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: optional; } @font-face { font-family: "Sofia Pro"; src: url("fonts/SofiaProMedium.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: optional; } @font-face { font-family: "Sofia Pro"; src: url("fonts/SofiaProSemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: optional; } @font-face { font-family: "Sofia Pro"; src: url("fonts/SofiaProBold.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: optional; } @font-face { font-family: "Sofia Pro"; src: url("fonts/SofiaProBlack.ttf") format("truetype"); font-weight: 900; font-style: normal; font-display: optional; } :root { --paper: #f8f7fa; --paper-2: #f0eff4; --card: #ffffff; --ink: #1a1a1a; --ink-soft: #5d5786; --muted: #938cb1; --line: #d9d9e5; --bar: rgba(255, 255, 255, .86); --brand: #c5258f; --brand-deep: #ab1f7c; --purple: #7d6599; --brand-gradient: linear-gradient(90deg, #c5258f 0%, #80287d 50%, #4e2a73 100%); --shadow: 0 24px 50px -34px rgba(78, 42, 115, .38); --shadow-sm: 0 14px 34px -26px rgba(78, 42, 115, .5); --radius: 16px; --btn-radius: 2px; /* hard right-angle buttons (shared by every button + heart) */ --ok: #1f9d55; --warn: #c2410c; /* soft tints (badges, pills, hover) — kept as tokens so dark mode can override */ --hover-line: #cfc9e0; --tint-warn-bg: #fdece0; --tint-warn-line: #f6cfae; --tint-brand-bg: #fbe9f4; --tint-brand-line: #f2c7e2; --tint-ok-bg: #e8f6ee; --tint-ok-line: #bfe6cd; /* full-screen overlay backdrop (e.g. the picker thank-you screen) */ --overlay: rgba(248, 247, 250, .88); } /* ── dark palette: mirrors the AP website dark theme; same brand magenta ── Applied when . Light stays the :root default. */ html[data-theme="dark"] { --paper: #0a0a0f; --paper-2: #14141f; --card: #1a1a2e; --ink: #ffffff; --ink-soft: #c9c4e2; --muted: #938cb1; --line: #2a2740; --bar: rgba(18, 18, 28, .82); --brand: #c5258f; --brand-deep: #d7127c; --purple: #7d6599; --shadow: 0 24px 50px -30px rgba(0, 0, 0, .7); --shadow-sm: 0 14px 34px -24px rgba(0, 0, 0, .6); --ok: #22c55e; --warn: #f97316; --hover-line: #3a3556; --tint-warn-bg: rgba(249, 115, 22, .15); --tint-warn-line: rgba(249, 115, 22, .35); --tint-brand-bg: rgba(197, 37, 143, .16); --tint-brand-line: rgba(197, 37, 143, .4); --tint-ok-bg: rgba(34, 197, 94, .14); --tint-ok-line: rgba(34, 197, 94, .34); --overlay: rgba(10, 10, 15, .88); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Sofia Pro", system-ui, -apple-system, sans-serif; font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; transition: background-color .25s ease, color .25s ease; } body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(90% 55% at 100% -5%, rgba(197, 37, 143, .07) 0%, transparent 55%), radial-gradient(90% 55% at 0% 0%, rgba(78, 42, 115, .06) 0%, transparent 50%); } html[data-theme="dark"] body::before { background: radial-gradient(90% 55% at 100% -5%, rgba(197, 37, 143, .14) 0%, transparent 55%), radial-gradient(90% 55% at 0% 0%, rgba(125, 101, 153, .12) 0%, transparent 50%); } /* ── theme toggle (fixed top-right, on every page) ── */ .theme-toggle { position: fixed; top: calc(.9rem + env(safe-area-inset-top)); right: calc(1.1rem + env(safe-area-inset-right)); width: 40px; height: 40px; border-radius: var(--btn-radius); display: inline-flex; align-items: center; justify-content: center; padding: 0; cursor: pointer; background: var(--card); color: var(--ink-soft); border: 1px solid var(--line); box-shadow: var(--shadow-sm); transition: transform .15s, color .2s, border-color .2s, background-color .2s; z-index: 40; } .theme-toggle:hover { transform: translateY(-1px); color: var(--brand); border-color: var(--brand); } .theme-toggle:active { transform: translateY(0); } .theme-toggle svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; } /* show the sun in dark mode (tap to go light), the moon in light mode (tap to go dark) */ .theme-toggle__sun { display: none; } .theme-toggle__moon { display: block; } html[data-theme="dark"] .theme-toggle__sun { display: block; } html[data-theme="dark"] .theme-toggle__moon { display: none; } /* Inline variant: sits in the header cluster beside the notification / sign-out icon buttons (no viewport-fixed positioning, so it can't overlap them). */ .theme-toggle--inline { position: static; width: 2rem; height: 2rem; border-radius: 999px; /* match the .icon-btn so the two read as a set */ box-shadow: none; color: var(--muted); } .theme-toggle--inline svg { width: 1.05rem; height: 1.05rem; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .01ms !important; scroll-behavior: auto !important; } body, .theme-toggle { transition: none !important; } }