/* ============================================================ Australis Skyfall — Color Tokens v2 A ground-up web palette derived from the Australis Dark PHILOSOPHY (not its ANSI values). Built in OKLCH so the laws are explicit and every family stays perceptually consistent: - All hues are cooler than neutral; nothing warmer than amber. - One lightness law across every chromatic family: deep L 0.48 — light-theme fills & colored text base L 0.66 — dark-theme fills (the working color) bright L 0.80 — dark-theme colored text & highlights - Chroma is tuned per hue so no family shouts over another. - Neutrals (Sea ramp) drift in hue from ice-blue (265°) toward ocean green (195°) as they brighten — the aurora signature. - Medium / medium-high contrast for eye comfort. Families: Aurora (blue, cyan, green — use generously, in that order) and Dawn (amber, red, violet — semantic accents only: warning, danger, AI). ============================================================ */ :root { /* ---- Sea — neutral ramp (hue 265° → 195° as L rises) ---- */ --sea-10: oklch(0.23 0.02 265); --sea-15: oklch(0.27 0.024 268); /* dark canvas — the Australis anchor */ --sea-20: oklch(0.31 0.022 262); --sea-25: oklch(0.35 0.02 258); --sea-30: oklch(0.4 0.018 252); --sea-40: oklch(0.48 0.016 245); --sea-50: oklch(0.56 0.015 235); --sea-60: oklch(0.64 0.014 228); --sea-70: oklch(0.72 0.014 220); --sea-75: oklch(0.78 0.015 212); --sea-80: oklch(0.83 0.017 205); --sea-90: oklch(0.9 0.02 198); --sea-94: oklch(0.94 0.014 195); --sea-96: oklch(0.96 0.01 195); --sea-98: oklch(0.98 0.006 195); /* ---- Ice — main colors (aliases into the ramp) ---- */ --ice-black: var(--sea-15); --ice-white: var(--sea-75); --ice-bright-white: var(--sea-90); /* ---- Aurora — primary families (blue > cyan > green) ---- */ --blue-deep: oklch(0.48 0.12 262); --blue-base: oklch(0.66 0.12 262); --blue-bright: oklch(0.8 0.09 262); --cyan-deep: oklch(0.48 0.08 200); --cyan-base: oklch(0.66 0.1 200); --cyan-bright: oklch(0.8 0.1 200); --green-deep: oklch(0.48 0.11 158); --green-base: oklch(0.66 0.13 158); --green-bright: oklch(0.8 0.13 158); /* ---- Dawn — accent families (semantic use only) ---- */ --amber-deep: oklch(0.52 0.1 75); --amber-base: oklch(0.7 0.12 78); --amber-bright: oklch(0.82 0.13 82); --red-deep: oklch(0.5 0.15 25); --red-base: oklch(0.62 0.16 25); --red-bright: oklch(0.78 0.11 28); --violet-deep: oklch(0.5 0.15 292); --violet-base: oklch(0.66 0.14 292); --violet-bright: oklch(0.8 0.1 292); } /* ============================================================ Semantic aliases — DARK (default, first-class) ============================================================ */ :root { color-scheme: dark; /* Surfaces */ --surface-sunken: var(--sea-10); --surface-base: var(--sea-15); --surface-raised: var(--sea-20); --surface-overlay: oklch(0.34 0.022 260); --surface-card: var(--sea-20); --surface-input: var(--sea-10); --surface-scrim: oklch(0.17 0.02 265 / 0.72); /* Text */ --text-heading: var(--sea-90); --text-body: var(--sea-75); --text-muted: var(--sea-60); --text-faint: var(--sea-50); --text-inverse: var(--sea-15); --text-link: var(--blue-bright); --text-link-hover: var(--sea-90); /* Borders */ --border-subtle: var(--sea-25); --border-default: var(--sea-30); --border-strong: var(--sea-40); --border-focus: var(--blue-base); /* Accent (primary = aurora blue) */ --accent: var(--blue-base); --accent-hover: oklch(0.71 0.11 262); --accent-active: oklch(0.6 0.13 262); --accent-bright: var(--blue-bright); --accent-text: var(--blue-bright); --accent-contrast: var(--sea-10); --accent-soft: color-mix(in oklab, var(--blue-base) 16%, transparent); --accent-soft-hover: color-mix(in oklab, var(--blue-base) 26%, transparent); /* Secondary accent (aurora cyan) */ --secondary: var(--cyan-base); --secondary-bright: var(--cyan-bright); --secondary-text: var(--cyan-bright); --secondary-soft: color-mix(in oklab, var(--cyan-base) 14%, transparent); /* Semantic status */ --success: var(--green-base); --success-text: var(--green-bright); --success-soft: color-mix(in oklab, var(--green-base) 14%, transparent); --warning: var(--amber-base); --warning-text: var(--amber-bright); --warning-soft: color-mix(in oklab, var(--amber-base) 13%, transparent); --danger: var(--red-base); --danger-hover: oklch(0.67 0.15 25); --danger-text: var(--red-bright); --danger-contrast: var(--sea-10); --danger-soft: color-mix(in oklab, var(--red-base) 13%, transparent); --info: var(--blue-base); --info-text: var(--blue-bright); --info-soft: color-mix(in oklab, var(--blue-base) 14%, transparent); --ai: var(--violet-base); --ai-text: var(--violet-bright); --ai-soft: color-mix(in oklab, var(--violet-base) 13%, transparent); /* Selection */ --selection-bg: var(--blue-base); --selection-fg: var(--sea-10); } /* ============================================================ Semantic aliases — LIGHT ("Skyfall Day") Same laws, inverted: surfaces at L 0.94–0.98, text at L 0.27–0.45, chromatic fills & colored text drop to the deep (L 0.48) step. ============================================================ */ [data-theme="light"] { color-scheme: light; /* Surfaces */ --surface-sunken: var(--sea-94); --surface-base: var(--sea-96); --surface-raised: var(--sea-98); --surface-overlay: #ffffff; --surface-card: var(--sea-98); --surface-input: #ffffff; --surface-scrim: oklch(0.27 0.024 268 / 0.4); /* Text */ --text-heading: var(--sea-15); --text-body: oklch(0.38 0.02 255); --text-muted: var(--sea-50); --text-faint: var(--sea-60); --text-inverse: var(--sea-90); --text-link: var(--blue-deep); --text-link-hover: var(--sea-15); /* Borders */ --border-subtle: oklch(0.89 0.014 210); --border-default: oklch(0.84 0.016 215); --border-strong: var(--sea-75); --border-focus: var(--blue-deep); /* Accent */ --accent: var(--blue-deep); --accent-hover: oklch(0.53 0.12 262); --accent-active: oklch(0.44 0.12 262); --accent-bright: var(--blue-base); --accent-text: var(--blue-deep); --accent-contrast: #ffffff; --accent-soft: color-mix(in oklab, var(--blue-deep) 10%, transparent); --accent-soft-hover: color-mix(in oklab, var(--blue-deep) 18%, transparent); /* Secondary accent */ --secondary: var(--cyan-deep); --secondary-bright: var(--cyan-base); --secondary-text: var(--cyan-deep); --secondary-soft: color-mix(in oklab, var(--cyan-deep) 9%, transparent); /* Semantic status */ --success: var(--green-deep); --success-text: var(--green-deep); --success-soft: color-mix(in oklab, var(--green-deep) 10%, transparent); --warning: var(--amber-deep); --warning-text: var(--amber-deep); --warning-soft: color-mix(in oklab, var(--amber-base) 16%, transparent); --danger: var(--red-deep); --danger-hover: oklch(0.55 0.16 25); --danger-text: var(--red-deep); --danger-contrast: #ffffff; --danger-soft: color-mix(in oklab, var(--red-deep) 8%, transparent); --info: var(--blue-deep); --info-text: var(--blue-deep); --info-soft: color-mix(in oklab, var(--blue-deep) 9%, transparent); --ai: var(--violet-deep); --ai-text: var(--violet-deep); --ai-soft: color-mix(in oklab, var(--violet-deep) 9%, transparent); /* Selection */ --selection-bg: var(--blue-base); --selection-fg: #ffffff; }