/* GENERATED by `make sync-design-system` from qazana-web-component-library@854ef2b Source: tokens/qazana.tokens.css — DO NOT EDIT HERE. Edit in the qazana repo and re-sync. After syncing, bump ASSET_VERSION in songid/version.py. */ /* ============================================================================ Qazana Web Component Library — design tokens (single source of truth). Framework-agnostic. Dark is the canonical scheme. THEMING ------- Override the brand/semantic tokens per app. Each color has a solid hex AND an `-rgb` channel triple so alpha tints stay themeable: --primary:#1db954; --primary-rgb:29 185 84; Tints are built with rgb(var(--primary-rgb) / ), so a single override re-tints every soft fill / ring / border. SCHEMES ------- Two named schemes: "Dark Knight" (canonical dark, teal accent on deep-navy) and "Désert Dunes" (light, coral on warm cream). Opt-in and hybrid: • `` forces dark (alias: data-theme="dark") • `` forces light (alias: data-theme="light") • unset → follows the OS via @media (prefers-color-scheme) Neutral lines/borders flow through `--border-rgb` so they flip with the scheme; `color-scheme` is set per scheme so native controls match. Brand colours are Qazana's (sourced from qazana.net): Désert Dunes is coral on warm cream; the dark scheme uses a teal accent on deep-navy. ============================================================================ */ :root{ color-scheme:dark; /* ---- neutral surfaces (rarely overridden) ---- */ --bg:#0a0a0a; --surface:#141414; --surface-2:#1e1e1e; --surface-3:#161616; /* popovers / tooltips / menus */ --surface-sunken:#0c0c0c; /* recessed code / terminal / log panels */ --surface-active:#17171b; /* focused-field activation lift */ --skeleton:#262626; /* skeleton shimmer band (grey, per scheme) */ --border-rgb:255 255 255; /* line/border channel — flips per scheme */ --line:rgb(var(--border-rgb) / .08); --line-strong:rgb(var(--border-rgb) / .14); --text:#f0f0f0; --text-2:#b3b3b3; --muted:#8c8c8c; /* ---- brand + semantic (OVERRIDE per app) ---- */ --primary:#2dd4bf; --primary-rgb:45 212 191; /* brand / primary action (dark scheme: teal; light overrides to coral) */ --primary-bright:#5eead4; --primary-bright-rgb:94 234 212; /* hover / emphasis (on dark) */ --on-primary:#04241f; /* text on a primary fill (dark teal needs dark ink) */ --danger:#f43f5e; --danger-rgb:244 63 94; /* destructive — kept distinct from coral */ --warning:#ffa726; --warning-rgb:255 167 38; --info:#5aa9ff; --info-rgb:90 169 255; --accent:#a98bff; --accent-rgb:169 139 255; /* categorical / tier */ /* ---- derived tints (themeable via the channels above) ---- */ --primary-soft:rgb(var(--primary-rgb) / .12); /* soft fill */ --primary-ring:rgb(var(--primary-rgb) / .22); /* focus ring */ --primary-line:rgb(var(--primary-rgb) / .30); /* brand border/accent */ --danger-soft:rgb(var(--danger-rgb) / .12); --warning-soft:rgb(var(--warning-rgb) / .12); --info-soft:rgb(var(--info-rgb) / .12); /* ---- radius ---- */ --radius-sm:6px; --radius:8px; --radius-lg:12px; --radius-pill:99px; /* ---- elevation ---- */ --shadow-sm:0 2px 6px -3px rgba(0,0,0,.35); --shadow:0 6px 18px -10px rgba(0,0,0,.4); --shadow-lg:0 12px 30px -16px rgba(0,0,0,.45); /* ---- spacing scale ---- */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:48px; /* ---- typography (override per brand) ---- */ --display:'Syne',sans-serif; /* hero titles + brand wordmark only */ --body:'DM Sans',system-ui,sans-serif; /* body / UI */ --mono:'SF Mono','Fira Code','SFMono-Regular',ui-monospace,monospace;/* data / code */ /* ---- motion ---- */ --ease:cubic-bezier(.22,1,.36,1); --dur-1:120ms; --dur-2:180ms; --dur-3:250ms; } /* ============================================================================ "DÉSERT DUNES" (light scheme) — warm-cream surface, navy ink, coral brand. Only the values that differ from dark are overridden. The two selectors are kept in sync deliberately: the @media block is the OS-auto default (unless an explicit data-theme is set), and the [data-theme] block is the manual override (canonical "desert-dunes", with "light" kept as an alias). ============================================================================ */ /* "Dark Knight" (canonical dark) — explicit handle; values come from :root. */ :root[data-theme="dark-knight"]{ color-scheme:dark; } @media (prefers-color-scheme: light){ :root:not([data-theme="dark"]):not([data-theme="dark-knight"]){ color-scheme:light; --bg:#fff6ef; --surface:#ffffff; --surface-2:#fbeee3; --surface-3:#ffffff; --surface-sunken:#f5ece2; --surface-active:#fff1ec; --skeleton:#eae5de; --border-rgb:11 15 26; --text:#0b0f1a; --text-2:#3b4356; --muted:#5b6475; --primary:#ff6b4a; --primary-rgb:255 107 74; --on-primary:#ffffff; /* light keeps the Qazana coral brand */ --primary-bright:#f0502a; --primary-bright-rgb:240 80 42; /* emphasis/hover reads darker on cream */ --danger:#d92d3f; --danger-rgb:217 45 63; --warning:#b9730a; --warning-rgb:185 115 10; --info:#2f6fed; --info-rgb:47 111 237; --accent:#7c5cff; --accent-rgb:124 92 255; --shadow-sm:0 2px 6px -3px rgb(11 15 26 / .08); --shadow:0 8px 20px -12px rgb(11 15 26 / .12); --shadow-lg:0 16px 36px -18px rgb(11 15 26 / .14); } } :root[data-theme="desert-dunes"], :root[data-theme="light"]{ color-scheme:light; --bg:#fff6ef; --surface:#ffffff; --surface-2:#fbeee3; --surface-3:#ffffff; --surface-sunken:#f5ece2; --surface-active:#fff1ec; --skeleton:#eae5de; --border-rgb:11 15 26; --text:#0b0f1a; --text-2:#3b4356; --muted:#5b6475; --primary:#ff6b4a; --primary-rgb:255 107 74; --on-primary:#ffffff; --primary-bright:#f0502a; --primary-bright-rgb:240 80 42; --danger:#d92d3f; --danger-rgb:217 45 63; --warning:#b9730a; --warning-rgb:185 115 10; --info:#2f6fed; --info-rgb:47 111 237; --accent:#7c5cff; --accent-rgb:124 92 255; --shadow-sm:0 2px 6px -3px rgb(11 15 26 / .08); --shadow:0 8px 20px -12px rgb(11 15 26 / .12); --shadow-lg:0 16px 36px -18px rgb(11 15 26 / .14); }