/* -------------------------------------------------------------------------- Design tokens -- v3, light + dark. v2 shipped one theme (dark, "instrument for computational physics" -- see the values still below). This version keeps every one of those values, unchanged, as the DARK theme, and adds a real light theme alongside it, per your instruction -- light is now the default; dark is opt-in via ``, toggled by js/theme.js and persisted to localStorage. Architecture: every raw surface/text token (--abyss/--void/--panel/ --raised/--line/--line-bright, --fog-50..--fog-700) is redefined between the two blocks below. Everything else in this file -- the semantic aliases (--page, --card, --border, --ink, --muted, --primary, --d-bg, ...) AND every component rule in base.css/app.css/auth.css -- is written purely in terms of those raw tokens via var(), so it never needs a per-theme override of its own; it re-themes automatically. (v6, 2026-08-20: the Cloud tab's Configure wizard used to live here as css/wizard.css, deliberately NOT re-theming -- your instruction was for it to look exactly like the real desktop/cloud apps' one fixed light Bootstrap look, not two. That file is gone now; the same fixed light look lives on unchanged in cloud/dhara's and cloud/tarang's own globals.css, which this file has never touched.) Brand accents (teal/amber/astro/violet, and warn/danger/success) keep the same hue in both themes -- these are real product-identity colours (DESIGN.md), not neutrals, and staying constant is what makes a DHARA page still read as "DHARA" whether you're in light or dark mode. Where an accent is used as TEXT rather than a button fill, --*-text below picks a version with real contrast against the theme's own background (the darker base hue on light backgrounds, the brighter variant on dark ones) rather than reusing the fill colour as-is. -------------------------------------------------------------------------- */ @font-face { font-family: 'Sora'; font-weight: 400; font-style: normal; font-display: swap; src: url('../assets/fonts/sora-400.woff2') format('woff2'); } @font-face { font-family: 'Sora'; font-weight: 500; font-style: normal; font-display: swap; src: url('../assets/fonts/sora-500.woff2') format('woff2'); } @font-face { font-family: 'Sora'; font-weight: 600; font-style: normal; font-display: swap; src: url('../assets/fonts/sora-600.woff2') format('woff2'); } @font-face { font-family: 'Sora'; font-weight: 700; font-style: normal; font-display: swap; src: url('../assets/fonts/sora-700.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 400; font-style: normal; font-display: swap; src: url('../assets/fonts/inter-400.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 500; font-style: normal; font-display: swap; src: url('../assets/fonts/inter-500.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 600; font-style: normal; font-display: swap; src: url('../assets/fonts/inter-600.woff2') format('woff2'); } @font-face { font-family: 'Inter'; font-weight: 700; font-style: normal; font-display: swap; src: url('../assets/fonts/inter-700.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-weight: 400; font-style: normal; font-display: swap; src: url('../assets/fonts/plex-mono-400.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-weight: 500; font-style: normal; font-display: swap; src: url('../assets/fonts/plex-mono-500.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-weight: 600; font-style: normal; font-display: swap; src: url('../assets/fonts/plex-mono-600.woff2') format('woff2'); } @font-face { font-family: 'IBM Plex Mono'; font-weight: 700; font-style: normal; font-display: swap; src: url('../assets/fonts/plex-mono-700.woff2') format('woff2'); } :root { /* ==== LIGHT (default) =================================================== */ --abyss: #F6F7FB; --void: #EEF0F7; --panel: #FFFFFF; --raised: #EEF0F7; --line: #DEE2EE; --line-bright: #C3C9DE; --fog-50: #0B0E1C; --fog-100: #1B2140; --fog-200: #2A3260; --fog-300: #454C72; --fog-400: #565E85; --fog-500: #6A7299; --fog-600: #7F88AE; --fog-700: #9AA3C6; --success-text: #0F7A55; --warn-text: #8A6414; --danger-text: #B3273B; --info-text: #0F7A6C; --violet-text: #5B4BCB; /* -- brand accents: same hue in both themes (see top comment) --------- */ --teal: #1FA897; --teal-bright: #33C9B5; --lime: #B7E84B; --amber: #F77F2E; --amber-bright: #FF9A54; --astro: #4C7FF0; --astro-bright: #6E97F5; --violet: #8B7CF6; --violet-bright: #A594FF; --warn: #E0B23E; --danger: #F2495C; --success: #2BC48A; /* -- semantic aliases -- everything downstream reads only these -------- */ --primary: var(--teal); --primary-dk: var(--teal-bright); --primary-100: color-mix(in srgb, var(--teal) 12%, var(--panel)); --success-100: color-mix(in srgb, var(--success) 14%, var(--panel)); --danger-100: color-mix(in srgb, var(--danger) 14%, var(--panel)); --amber-100: color-mix(in srgb, var(--warn) 16%, var(--panel)); --page: var(--abyss); --card: var(--panel); --header: var(--void); --border: var(--line); --border-soft: var(--raised); --ink: var(--fog-50); --label: var(--fog-200); --muted: var(--fog-400); --disabled: var(--fog-600); /* The entry page reuses these same tokens -- one theme mechanism, not two -- so it re-themes along with everything else. */ --d-bg: var(--abyss); --d-bg-2: var(--void); --d-ink: var(--fog-50); --d-muted: var(--fog-400); --d-line: var(--line); --d-line-soft: var(--line); --d-glass: color-mix(in srgb, var(--ink) 4%, transparent); --d-glass-2: color-mix(in srgb, var(--ink) 7%, transparent); --accent-text: var(--teal); /* -- type ---------------------------------------------------------------- */ --font: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --font-display: 'Sora', var(--font); --font-mono: 'IBM Plex Mono', "Cascadia Mono", "SF Mono", Consolas, monospace; --mono: var(--font-mono); --t-xs: .75rem; --t-sm: .8125rem; --t-md: .9375rem; --t-lg: 1.0625rem; --t-xl: 1.375rem; --t-2xl: 1.875rem; --t-3xl: 2.5rem; /* -- geometry -------------------------------------------------------------- v4: replaces the "instrument" system's flat 3px everywhere (your call -- too many sharp corners) with an Apple-style scale, where curvature grows with the surface it belongs to rather than staying one fixed value: a 40px-tall button reads as gently rounded, a 560px modal reads as a real soft sheet, each proportionate rather than either barely-rounded or comically round on the wrong element. See --r-sm/md/lg's own usage -- buttons/inputs/chips -> sm, cards/menus -> md, modals/the sign-in card -> lg. --r-pill (already fully round) is unchanged. */ --r-sm: 10px; --r-md: 16px; --r-lg: 22px; --r-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --shadow-1: 0 1px 2px rgba(20, 24, 40, .06); --shadow-2: 0 4px 18px rgba(20, 24, 40, .08); --shadow-3: 0 16px 42px rgba(20, 24, 40, .12); --shadow-4: 0 30px 80px rgba(20, 24, 40, .18); /* -- motion -------------------------------------------------------------- */ --e-out: cubic-bezier(.22, 1, .36, 1); --e-in-out: cubic-bezier(.65, 0, .35, 1); --e-spring: cubic-bezier(.34, 1.4, .64, 1); --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 650ms; } /* ==== DARK (opt-in) ======================================================== Every value here is the original v2 theme, unchanged -- only the raw surface/text tokens and the four status-text colours are redefined; everything else inherits through the semantic aliases above. */ :root[data-theme="dark"] { --abyss: #06070F; --void: #080A16; --panel: #0B0E1C; --raised: #10142A; --line: #1B2140; --line-bright: #2A3260; --fog-50: #EEF1FB; --fog-100: #D7DCF0; --fog-200: #BEC5E2; --fog-300: #9AA3C6; --fog-400: #7F88AE; --fog-500: #6A7299; --fog-600: #565E85; --fog-700: #454C72; --success-text: #5EE0A8; --warn-text: #F3D68B; --danger-text: #FFB3BE; --info-text: var(--teal-bright); --violet-text: var(--violet-bright); --accent-text: var(--teal-bright); --shadow-1: 0 1px 2px rgba(0, 0, 0, .35); --shadow-2: 0 4px 18px rgba(0, 0, 0, .40); --shadow-3: 0 16px 42px rgba(0, 0, 0, .48); --shadow-4: 0 30px 80px rgba(0, 0, 0, .58); } @media (prefers-reduced-motion: reduce) { :root { --dur-1: 0ms; --dur-2: 0ms; --dur-3: 0ms; --dur-4: 0ms; } }