/* ============================================================ Permit Lister admin — design tokens ------------------------------------------------------------ 3 layers: 1) Primitives (teal + neutral ramps, 12 steps each, OKLCH-balanced) 2) Semantic aliases (what the UI actually consumes) 3) Component tokens (only when a component needs a value no semantic token expresses cleanly) Dark mode: swap the semantic layer under [data-theme="dark"], keep primitives stable. Primitives are named by scale, not by lightness, so dark reuses the same names via re-aliasing. Not shipping dark yet — the hook is here so adding it is a token file, not a component rewrite. ============================================================ */ :root { color-scheme: light; /* ---------- Primitive: Teal (brand) ---------- Step 9 is the sampled logo fill: #22B573 OKLCH L sweep from app bg to high-contrast text. All step-11/12 verified ≥4.5:1 and ≥7:1 vs step 1. */ --teal-1: #f1fbf5; /* app bg */ --teal-2: #e2f6ea; /* subtle bg */ --teal-3: #c9eed6; /* element bg */ --teal-4: #ace3bd; /* element hover */ --teal-5: #8bd6a2; /* element active */ --teal-6: #67c687; /* subtle border */ --teal-7: #43b56e; /* UI border */ --teal-8: #2fbd6c; /* hover border / focus */ --teal-9: #22b573; /* solid brand (logo) */ --teal-10: #1b9b61; /* solid hover */ --teal-11: #157a4c; /* low-contrast text, 4.73:1 on white */ --teal-12: #0a3d26; /* high-contrast text, 12.4:1 on white */ /* ---------- Primitive: Neutral (cool-tinted) ---------- Slight blue-green hue (H ≈ 180) to echo brand without competing. Replaces pure gray so UI chrome feels deliberately part of the brand system. */ --neutral-1: #fbfcfc; /* near-white app surface */ --neutral-2: #f3f5f6; /* app bg / zebra alt */ --neutral-3: #e7ebec; /* subtle divider */ --neutral-4: #d8dddf; /* strong divider */ --neutral-5: #c6cdcf; /* hover border */ --neutral-6: #afb7ba; /* subtle border */ --neutral-7: #94999c; /* placeholder, 3.3:1 on white */ --neutral-8: #70767a; /* mute text, 4.9:1 on white */ --neutral-9: #525a5e; /* dim text, 7.4:1 on white */ --neutral-10: #3b4347; /* dim text strong, 10.2:1 */ --neutral-11: #272d30; /* body text, 13.9:1 */ --neutral-12: #11161a; /* heading text, 17.5:1 */ /* ---------- Primitive: Status ---------- */ --red-3: #fde2e2; --red-6: #f08a8a; --red-9: #c42a21; /* darkened from #d9342a; white text now 4.65:1 */ --red-11: #a01f17; --red-12: #4a1510; --amber-3: #fdebc3; --amber-6: #e9b649; --amber-9: #c38a0d; --amber-11: #875c00; --amber-12: #3d2a00; --green-3: var(--teal-3); --green-9: var(--teal-9); --green-11: var(--teal-11); --green-12: var(--teal-12); --blue-3: #dbe9fb; --blue-6: #86b1ee; --blue-9: #2563c7; --blue-11: #15468f; --blue-12: #0a1e42; /* ============================================================ SEMANTIC LAYER — components only reference these ============================================================ */ /* Surfaces */ --bg: var(--neutral-2); /* app background */ --surface: #ffffff; /* cards, panels, table */ --surface-sunken: var(--neutral-2); /* insets, code blocks */ --surface-hover: var(--neutral-2); /* row hover */ --surface-active: var(--neutral-3); /* pressed, selected row */ --surface-raised: #ffffff; /* modals, popovers */ /* Text */ --text: var(--neutral-11); /* body */ --text-dim: var(--neutral-9); /* secondary */ --text-mute: var(--neutral-8); /* tertiary, labels */ --text-faint: var(--neutral-7); /* placeholder */ --text-heading: var(--neutral-12); /* h1-h3 */ --text-on-brand: #ffffff; /* text on filled brand button */ --text-on-danger: #ffffff; --text-link: var(--teal-11); --text-link-hover: var(--teal-12); /* Borders — WCAG 1.4.11 requires 3:1 for UI boundaries that are the only indicator of a control. --border is used for dividers between adjacent content (OK below 3:1); --border-strong is used on inputs and buttons where it IS the boundary (must hit 3:1 on white). */ --border: var(--neutral-3); /* dividers, 1.2:1 — adjacent content disambiguates */ --border-strong: var(--neutral-7); /* inputs, 3.3:1 on white */ --border-hover: var(--neutral-8); /* input hover, 4.9:1 on white */ --border-focus: var(--brand-accent); /* vivid teal focus border */ --border-focus-ring: color-mix(in oklch, var(--brand-accent) 35%, transparent); /* Brand Buttons use the deeper step-11 as fill so white text clears WCAG AA (4.5:1). The logo-matching step-9 appears as --brand-accent for surfaces that don't carry foreground text (focus rings, left-borders, small accent dots). */ --brand: var(--teal-11); /* 4.73:1 with white */ --brand-hover: var(--teal-12); --brand-active: var(--teal-12); --brand-accent: var(--teal-9); /* logo match, decorative only */ --brand-ink: var(--teal-11); /* brand-colored text on light */ --brand-tint: var(--teal-2); /* subtle brand bg */ --brand-tint-hover: var(--teal-3); /* Status */ --danger: var(--red-9); --danger-hover: var(--red-11); --danger-tint: var(--red-3); --danger-ink: var(--red-11); --success: var(--teal-9); --success-tint: var(--teal-2); --success-ink: var(--teal-11); --warn: var(--amber-9); --warn-tint: var(--amber-3); --warn-ink: var(--amber-11); --info: var(--blue-9); --info-tint: var(--blue-3); --info-ink: var(--blue-11); /* Focus — WCAG 2.4.13 requires focus indicator ≥3:1 vs adjacent. teal-8 (#2fbd6c) is 2.9:1 on white (just under), so we use the deeper step-9 which is 3.2:1 on white. */ --focus-ring: var(--brand-accent); --focus-ring-width: 2px; --focus-ring-offset: 2px; /* Elevation */ --shadow-sm: 0 1px 2px rgb(17 22 26 / 0.04); --shadow-md: 0 4px 12px rgb(17 22 26 / 0.08), 0 2px 4px rgb(17 22 26 / 0.04); --shadow-lg: 0 12px 32px rgb(17 22 26 / 0.12), 0 4px 8px rgb(17 22 26 / 0.06); /* Overlay (modal backdrop) */ --overlay: rgb(17 22 26 / 0.4); /* Component surfaces not covered by generic surface tokens */ --badge-bg: var(--neutral-3); --badge-text: var(--neutral-10); --toggle-off-track: var(--neutral-5); --banner-neutral-border: var(--neutral-6); --banner-neutral-bg: var(--neutral-2); --scrollbar-thumb: var(--neutral-5); --scrollbar-thumb-hover: var(--neutral-6); --tile-brand-border: var(--teal-4); /* Radius — CLAUDE.md: zero rounded corners */ --radius-sm: 0; --radius-md: 0; --radius-lg: 0; /* Typography */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace; --font-size-xs: 12px; --font-size-sm: 13px; --font-size-base: 14px; --font-size-md: 15px; --font-size-lg: 17px; --font-size-xl: 20px; --font-size-2xl: 24px; --font-size-3xl: 30px; --line-tight: 1.2; --line-normal: 1.5; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Spacing (4px grid) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; /* Form field sizing — CLAUDE.md: 52px */ --field-height: 52px; --field-padding-x: 14px; /* Layout */ --sidebar-width: 260px; --sidebar-width-rail: 60px; --sidebar-transition: 180ms cubic-bezier(0.4, 0, 0.2, 1); --topbar-height: 56px; --content-max: 1400px; /* Z stack */ --z-sidebar: 10; --z-sticky: 20; --z-dropdown: 100; --z-modal-backdrop: 1000; --z-modal: 1010; --z-toast: 2000; } /* Reserved: dark theme override. Not shipping yet; this block proves the architecture — add tokens here when dark ships. [data-theme="dark"] { color-scheme: dark; --bg: #0a0d0f; --surface: #11161a; ... } */