/* --------------------------------------------------------------- PilotVault design tokens (vendored from Design/PilotVault Project logo/tokens). Colors + typography + spacing + radius + elevation + motion. Light is default; add data-theme="dark" on to flip. Fonts (Space Grotesk + Space Mono) are loaded via in index.html. --------------------------------------------------------------- */ :root, [data-theme="light"] { /* --- Brand ramps (do not theme-flip) --- */ --navy-950: #0B1730; --navy-900: #0F1E3D; /* Vault Navy — core brand */ --navy-800: #1B2E52; --navy-700: #26406E; --blue-50: #EAF1FE; --blue-100: #D6E3FD; --blue-200: #B4CDFA; --blue-300: #8FB4F6; --blue-400: #5B93F5; --blue-500: #3D7BF0; /* Signal Blue — accent */ --blue-600: #2B62CC; --blue-700: #1F4CA0; --slate-0: #FFFFFF; --slate-50: #F6F7F9; --slate-100: #EEF0F3; /* Cloud */ --slate-150: #E6E9EE; --slate-200: #DCE0E7; --slate-300: #C5CCD7; --slate-400: #97A1B0; --slate-500: #6B7688; --slate-600: #4C5566; --slate-700: #333B4A; --slate-800: #1E2635; --slate-900: #131A28; --slate-950: #0B111C; --steel: #5A6B85; --green-500: #1F8A5B; --green-100: #DCF1E7; --green-600:#177049; --amber-500: #D9852B; --amber-100: #FBEBD5; --amber-600:#B86C1B; --red-500: #D64545; --red-100: #FBE0E0; --red-600: #B83232; /* --- Semantic aliases — LIGHT --- */ --bg-app: var(--slate-100); --bg-subtle: var(--slate-50); --surface: var(--slate-0); --surface-2: var(--slate-50); --surface-inset: var(--slate-100); --border: var(--slate-200); --border-strong: var(--slate-300); --border-subtle: var(--slate-150); --text-primary: var(--navy-900); --text-secondary:var(--steel); --text-tertiary: var(--slate-400); --text-inverse: var(--slate-0); --text-on-accent:#FFFFFF; --accent: var(--blue-500); --accent-hover: var(--blue-600); --accent-active: var(--blue-700); --accent-soft: var(--blue-50); --accent-soft-fg:var(--blue-700); --focus-ring: color-mix(in srgb, var(--blue-500) 45%, transparent); --success: var(--green-500); --success-soft: var(--green-100); --success-fg: var(--green-600); --warning: var(--amber-500); --warning-soft: var(--amber-100); --warning-fg: var(--amber-600); --danger: var(--red-500); --danger-soft: var(--red-100); --danger-fg: var(--red-600); --overlay: color-mix(in srgb, var(--navy-950) 55%, transparent); /* Typography */ --font-sans: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "Space Mono", ui-monospace, "SF Mono", "JetBrains Mono", monospace; /* Radius */ --radius-xs: 4px; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --radius-pill: 999px; /* Elevation — cool navy-tinted */ --shadow-xs: 0 1px 2px rgba(15,30,61,0.06); --shadow-sm: 0 1px 2px rgba(15,30,61,0.06), 0 1px 3px rgba(15,30,61,0.04); --shadow-md: 0 2px 4px rgba(15,30,61,0.06), 0 6px 16px rgba(15,30,61,0.08); --shadow-lg: 0 8px 24px rgba(15,30,61,0.10), 0 2px 6px rgba(15,30,61,0.06); /* Motion */ --ease-standard: cubic-bezier(0.4, 0.0, 0.2, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 120ms; --dur-base: 200ms; color-scheme: light; } [data-theme="dark"] { --bg-app: var(--navy-950); --bg-subtle: var(--slate-950); --surface: #10203F; --surface-2: #142748; --surface-inset: var(--navy-950); --border: color-mix(in srgb, #FFFFFF 10%, transparent); --border-strong: color-mix(in srgb, #FFFFFF 18%, transparent); --border-subtle: color-mix(in srgb, #FFFFFF 6%, transparent); --text-primary: #F4F7FC; --text-secondary:#8FA0BE; --text-tertiary: #5E6E8C; --text-inverse: var(--navy-900); --text-on-accent:#FFFFFF; --accent: var(--blue-400); --accent-hover: var(--blue-300); --accent-active: var(--blue-200); --accent-soft: color-mix(in srgb, var(--blue-500) 18%, transparent); --accent-soft-fg:var(--blue-300); --focus-ring: color-mix(in srgb, var(--blue-400) 55%, transparent); --success:var(--green-500); --success-soft: color-mix(in srgb, var(--green-500) 22%, transparent); --success-fg:#5FD3A0; --warning:var(--amber-500); --warning-soft: color-mix(in srgb, var(--amber-500) 22%, transparent); --warning-fg:#F0B26A; --danger: var(--red-500); --danger-soft: color-mix(in srgb, var(--red-500) 22%, transparent); --danger-fg: #F08A8A; --overlay: color-mix(in srgb, #000000 62%, transparent); --shadow-xs: 0 1px 2px rgba(0,0,0,0.35); --shadow-sm: 0 1px 3px rgba(0,0,0,0.4); --shadow-md: 0 4px 12px rgba(0,0,0,0.45); --shadow-lg: 0 12px 32px rgba(0,0,0,0.5); color-scheme: dark; }