/* * tux design tokens — GENERATED FILE. DO NOT EDIT BY HAND. * * Generated by scripts/build-tokens.mjs from design/tokens.json, * the single source of truth for tux theme tokens. Run * `npm run build:tokens` to regenerate; `node scripts/build-tokens.mjs --check` * verifies this file is value-equivalent to its source. * * Switch themes by setting data-theme="" on . */ :root, [data-theme="tti"] { --tti-maroon: #5C0025; --tti-maroon-deep: #500000; --tti-gold: #DDAC37; --tti-gold-deep: #DCAA37; --tti-navy: #15457E; --tti-teal: #4A8892; --tti-sage: #66814F; --tti-charcoal: #221F1F; --neutral-0: #FFFFFF; --neutral-50: #FAFAFA; --neutral-100: #F5F5F5; --neutral-150: #EFEEED; --neutral-200: #E7E6E6; --neutral-250: #DCDBD8; --neutral-300: #D1D2D4; --neutral-400: #A5A5A5; --neutral-450: #9B9A96; --neutral-500: #939597; --neutral-550: #86847F; --neutral-600: #7E7E7E; --neutral-650: #6B6964; --neutral-700: #5D5D5D; --neutral-750: #535048; --neutral-800: #4C4C4E; --neutral-850: #3A3833; --neutral-900: #221F1F; --neutral-1000: #000000; --brand-primary: var(--tti-maroon); --brand-primary-deep: var(--tti-maroon-deep); --brand-accent: var(--tti-gold); --brand-accent-deep: var(--tti-gold-deep); --brand-secondary: var(--tti-navy); --brand-fill: var(--tti-maroon); --brand-accent-ink: #2A0E15; --brand-accent-shade: #A87B1F; --surface-page: var(--neutral-0); --surface-raised: var(--neutral-0); --surface-sunken: var(--neutral-100); --surface-border: var(--neutral-200); --surface-border-subtle: var(--neutral-150); --text-primary: var(--tti-charcoal); --text-secondary: #424242; --text-muted: #525252; --text-inverse: var(--neutral-0); --text-brand: var(--tti-maroon); --text-on-brand: var(--neutral-0); --color-success: #3D5328; --color-warning: var(--tti-gold); --color-danger: var(--tti-maroon); --color-error: #A02828; --color-info: #1F5D66; --font-body: "Open Sans", "Helvetica Neue", Arial, sans-serif; --font-display: "Oswald", "Helvetica Neue Condensed", "Impact", "Arial Narrow", sans-serif; --font-bold: "Work Sans", "Helvetica Neue", Arial, sans-serif; --font-elegant: Georgia, "Times New Roman", Times, serif; --font-sans: "Open Sans", "Helvetica Neue", Arial, sans-serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; --tracking-tight: -0.01em; --tracking-normal: 0; --tracking-wide: 0.05em; --tracking-wider: 0.10em; --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04); --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -2px rgba(0, 0, 0, 0.03); --focus-ring-outer: var(--brand-primary); --focus-ring-inner: #F2E6C9; --shadow-focus: 0 0 0 2px var(--focus-ring-inner), 0 0 0 4px var(--focus-ring-outer); --elevation-flat: none; --elevation-rest: var(--shadow-sm); --elevation-hover: var(--shadow-md); --elevation-overlay: var(--shadow-lg); --elevation-pinned: 0 4px 6px -2px rgba(0, 0, 0, 0.06); --radius-none: 0; --radius-sm: 0.125rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-full: 9999px; --motion-fast: 0.15s; --motion-base: 0.25s; --motion-slow: 0.35s; --ease-standard: cubic-bezier(0.2, 0.55, 0.4, 0.9); --ease-emphasis: cubic-bezier(0.2, 0.8, 0.2, 1.2); --ease-exit: cubic-bezier(0.4, 0, 0.6, 1); --ease-survey: cubic-bezier(0.4, 0.0, 0.2, 1.0); --ease-corridor: cubic-bezier(0.2, 0.0, 0.0, 1.0); --ease-arrival: cubic-bezier(0.0, 0.0, 0.2, 1.0); --space-0: 0; --space-2: 2px; --space-4: 4px; --space-8: 8px; --space-10: 10px; --space-12: 12px; --space-16: 16px; --space-24: 24px; --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-64: 64px; --layout-content-max: 80rem; --layout-content-wide: 96rem; --layout-prose-max: 72ch; --rhythm-tight: 4px; --rhythm-snug: 8px; --rhythm-normal: 12px; --rhythm-loose: 16px; --rhythm-roomy: 24px; --wash-brand-4: color-mix(in srgb, var(--brand-primary) 4%, transparent); --wash-brand-6: color-mix(in srgb, var(--brand-primary) 6%, transparent); --wash-brand-8: color-mix(in srgb, var(--brand-primary) 8%, transparent); --wash-brand-12: color-mix(in srgb, var(--brand-primary) 12%, transparent); --wash-brand-18: color-mix(in srgb, var(--brand-primary) 18%, transparent); --wash-brand-22: color-mix(in srgb, var(--brand-primary) 22%, transparent); --wash-brand-35: color-mix(in srgb, var(--brand-primary) 35%, transparent); --color-maroon-50: #fbf3f6; --color-maroon-100: #f5e0e7; --color-maroon-200: #eab5c3; --color-maroon-300: #db859e; --color-maroon-400: #b14a6c; --color-maroon-500: #5c0025; --color-maroon-600: #4d001f; --color-maroon-700: #3d0018; --color-maroon-800: #2e0012; --color-maroon-900: #1f000c; --color-maroon-950: #150008; --color-gold-50: #fdf9ee; --color-gold-100: #faf0d2; --color-gold-200: #f4dfa1; --color-gold-300: #ecca6f; --color-gold-400: #e3ba4f; --color-gold-500: #ddac37; --color-gold-600: #b58a23; --color-gold-700: #8a691b; --color-gold-800: #604812; --color-gold-900: #3f300b; --color-gold-950: #271e07; --chart-1: var(--brand-primary); --chart-2: #3F5A6F; --chart-3: #C7973C; --chart-4: #6B8E5A; --chart-5: #8C5A3C; --chart-6: #5C7080; --chart-7: #A33A3A; --chart-8: #3C5A87; --chart-9: #6E5A7E; --chart-10: #7E7350; --map-seq-maroon-1: #F1E4E0; --map-seq-maroon-2: #DDB7AC; --map-seq-maroon-3: #C58675; --map-seq-maroon-4: #9E483A; --map-seq-maroon-5: #500000; --map-seq-slate-1: #E2E7EC; --map-seq-slate-2: #B7C2CC; --map-seq-slate-3: #7E94A4; --map-seq-slate-4: #52677A; --map-seq-slate-5: #283544; --map-outline: var(--surface-border); --map-flow: var(--brand-primary); } [data-theme="tti-dark"] { color-scheme: dark; --brand-primary: #6BB4C0; --brand-primary-deep: #5B9CA8; --brand-accent: var(--tti-gold); --brand-accent-deep: #F0C362; --brand-secondary: #8ab7e2; --brand-fill: var(--tti-maroon); --surface-page: #15100F; --surface-raised: #221F1F; --surface-sunken: #0B0908; --surface-border: #3D3A3A; --surface-border-subtle: #2E2B2A; --text-primary: #FAFAFA; --text-secondary: #D1D2D4; --text-muted: #B5B5B5; --text-inverse: #221F1F; --text-brand: #5B9CA8; --text-on-brand: var(--neutral-0); --color-maroon-400: #6BB4C0; --color-success: #ABCC8E; --color-warning: #F5D98A; --color-danger: #e795a8; --color-error: #F59292; --color-info: #9BD4E0; --focus-ring-outer: var(--brand-primary); --focus-ring-inner: #3D2E0F; --shadow-focus: 0 0 0 2px var(--focus-ring-inner), 0 0 0 4px var(--focus-ring-outer); --elevation-flat: none; --elevation-rest: var(--shadow-sm); --elevation-hover: var(--shadow-md); --elevation-overlay: 0 10px 15px -3px rgba(0, 0, 0, 0.20), 0 4px 6px -2px rgba(0, 0, 0, 0.12); --elevation-pinned: 0 4px 6px -2px rgba(0, 0, 0, 0.18); --color-brand-primary: var(--brand-primary); --color-brand-primary-deep: var(--brand-primary-deep); --color-brand-accent: var(--brand-accent); --color-brand-accent-deep: var(--brand-accent-deep); --color-brand-secondary: var(--brand-secondary); --color-brand-fill: var(--brand-fill); --color-surface-page: var(--surface-page); --color-surface-raised: var(--surface-raised); --color-surface-sunken: var(--surface-sunken); --color-surface-border: var(--surface-border); --color-surface-border-subtle: var(--surface-border-subtle); --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-muted: var(--text-muted); --color-text-inverse: var(--text-inverse); --color-text-brand: var(--text-brand); --color-text-on-brand: var(--text-on-brand); --chart-1: #c47585; --chart-2: #6B8DA3; --chart-3: #E0BC60; --chart-4: #93B57E; --chart-5: #B58463; --chart-6: #8AA0B2; --chart-7: #D67272; --chart-8: #6E8FBE; --chart-9: #A08CB4; --chart-10: #B0A578; --map-seq-maroon-1: #3D1110; --map-seq-maroon-2: #702C28; --map-seq-maroon-3: #A14A3D; --map-seq-maroon-4: #C97058; --map-seq-maroon-5: #E89B7E; --map-seq-slate-1: #1A2129; --map-seq-slate-2: #3F5A6F; --map-seq-slate-3: #6F8294; --map-seq-slate-4: #9CADBD; --map-seq-slate-5: #C2D0DE; --map-outline: rgba(255, 255, 255, 0.22); --map-flow: #E89B7E; } [data-theme="tti-hc"] { --brand-primary: #500000; --brand-primary-deep: #3A0000; --brand-accent: #DCAA37; --brand-accent-deep: #B88A21; --brand-secondary: #000000; --brand-fill: #500000; --surface-page: #FFFFFF; --surface-raised: #FFFFFF; --surface-sunken: #F0F0F0; --surface-border: #5D5D5D; --surface-border-subtle: #5D5D5D; --text-primary: #000000; --text-secondary: #221F1F; --text-muted: #4D4D4D; --text-inverse: #FFFFFF; --text-brand: #500000; --text-on-brand: var(--neutral-0); --color-maroon-400: #500000; --color-maroon-500: #500000; --color-success: #3D5328; --color-warning: var(--tti-gold); --color-danger: #500000; --color-error: #A02828; --color-info: #1F5D66; --focus-ring-outer: #000000; --focus-ring-inner: #FFFFFF; --shadow-focus: 0 0 0 2px var(--focus-ring-inner), 0 0 0 5px var(--focus-ring-outer); --elevation-flat: none; --elevation-rest: none; --elevation-hover: none; --elevation-overlay: 0 0 0 2px var(--surface-border); --elevation-pinned: 0 0 0 1px var(--surface-border); --color-brand-primary: var(--brand-primary); --color-brand-primary-deep: var(--brand-primary-deep); --color-brand-accent: var(--brand-accent); --color-brand-accent-deep: var(--brand-accent-deep); --color-brand-secondary: var(--brand-secondary); --color-brand-fill: var(--brand-fill); --color-surface-page: var(--surface-page); --color-surface-raised: var(--surface-raised); --color-surface-sunken: var(--surface-sunken); --color-surface-border: var(--surface-border); --color-surface-border-subtle: var(--surface-border-subtle); --color-text-primary: var(--text-primary); --color-text-secondary: var(--text-secondary); --color-text-muted: var(--text-muted); --color-text-inverse: var(--text-inverse); --color-text-brand: var(--text-brand); --color-text-on-brand: var(--text-on-brand); --chart-1: #000000; --chart-2: var(--brand-primary); --chart-3: #5D5D5D; --chart-4: #8A6915; --chart-5: #4A4A4A; --chart-6: #1F5D66; --chart-7: #6B0000; --chart-8: #2A2A2A; --map-seq-maroon-1: #FFFFFF; --map-seq-maroon-2: #C8C8C8; --map-seq-maroon-3: #8A8A8A; --map-seq-maroon-4: #4A4A4A; --map-seq-maroon-5: #000000; --map-seq-slate-1: #FFFFFF; --map-seq-slate-2: #C8C8C8; --map-seq-slate-3: #8A8A8A; --map-seq-slate-4: #4A4A4A; --map-seq-slate-5: #000000; --map-outline: #000000; --map-flow: #000000; }