/* ============================================================ tokens.css — client portal Direction A — Studio Letterpress Vanilla CSS custom properties on :root. ============================================================ */ :root { /* The palette is light-only by design; opt out of UA/forced dark so form controls and auto-darkening match the paper. */ color-scheme: light; /* -------------------------------------------------------- COLOR — neutrals Warm off-white "paper" base. Neutrals are biased toward yellow-orange to avoid the cold-blue SaaS default. OKLCH so the scale is perceptually even. -------------------------------------------------------- */ --paper: #FAF7F1; /* the page itself */ --paper-sunk: #F4F0E7; /* recessed surface (table stripes, inputs) */ --paper-raised: #FFFEFB; /* rare; sheets / modals */ --ink-50: oklch(0.97 0.005 80); --ink-100: oklch(0.93 0.008 80); --ink-200: oklch(0.87 0.010 78); --ink-300: oklch(0.78 0.012 76); --ink-400: oklch(0.65 0.014 72); --ink-500: oklch(0.52 0.014 70); --ink-600: oklch(0.42 0.014 70); --ink-700: oklch(0.32 0.014 68); --ink-800: oklch(0.22 0.012 65); --ink-900: oklch(0.16 0.010 60); --ink-950: oklch(0.10 0.008 55); /* aliases that read better in component CSS */ --text: var(--ink-900); --text-soft: var(--ink-600); --text-mute: var(--ink-400); --rule: var(--ink-200); --rule-strong: var(--ink-300); /* -------------------------------------------------------- COLOR — accent (burnt sienna) One confident accent. Used for: active nav, primary buttons, % progress bars, link hover. Not for danger. -------------------------------------------------------- */ --accent-50: oklch(0.96 0.020 50); --accent-100: oklch(0.91 0.045 50); --accent-200: oklch(0.82 0.080 48); --accent-300: oklch(0.72 0.110 46); --accent-400: oklch(0.60 0.130 45); --accent-500: oklch(0.52 0.135 45); --accent-600: oklch(0.46 0.130 45); /* canonical */ --accent-700: oklch(0.38 0.110 44); --accent-800: oklch(0.30 0.085 43); --accent-900: oklch(0.22 0.060 42); --accent: var(--accent-600); --accent-soft: var(--accent-100); --accent-ink: var(--accent-800); --on-accent: #FFF8EE; /* text on accent fills (primary buttons) */ /* -------------------------------------------------------- COLOR — semantic (used sparingly; see brief "Calm") Each one is desaturated and warm-shifted so it doesn't scream. Overdue is rust, not fire-engine red. -------------------------------------------------------- */ --ok-fg: oklch(0.42 0.055 155); --ok-bg: oklch(0.93 0.025 155); --warn-fg: oklch(0.46 0.085 75); --warn-bg: oklch(0.94 0.040 80); --danger-fg: oklch(0.44 0.110 32); /* "rust" — quieter than red */ --danger-bg: oklch(0.93 0.040 35); --danger-rule: oklch(0.85 0.040 35); --info-fg: var(--accent-700); --info-bg: var(--accent-100); /* -------------------------------------------------------- COLOR — on-dark Content on ink-950 surfaces (login quote panel, pressed filter chips). These stay dark in any future theme. -------------------------------------------------------- */ --on-dark-text: oklch(0.95 0.01 80); --on-dark-strong: oklch(0.92 0.01 80); --on-dark-soft: oklch(0.70 0.01 80); --on-dark-mute: oklch(0.60 0.01 80); --on-dark-accent: oklch(0.62 0.06 50); --dark-glow: oklch(0.22 0.04 50 / 0.7); /* quote-panel radial */ --dark-line: oklch(0.18 0.01 60 / 0.3); /* quote-panel scanlines */ /* -------------------------------------------------------- TYPE Display: Newsreader (variable serif, editorial, calm). Body: Geist (modern grotesque, tabular-friendly). Mono: Geist Mono (numbers, code, KHQR refs). -------------------------------------------------------- */ --font-display: "Newsreader", "Source Serif Pro", Georgia, serif; --font-body: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono", monospace; /* modular scale, base 16, ratio ~1.2 (minor third) */ --t-xs: 0.75rem; /* 12 — micro labels */ --t-sm: 0.8125rem; /* 13 — meta, table dense rows */ --t-base: 0.9375rem; /* 15 — body */ --t-md: 1.0625rem; /* 17 — lead paragraph */ --t-lg: 1.25rem; /* 20 — subsection */ --t-xl: 1.5rem; /* 24 — card title */ --t-2xl: 1.875rem; /* 30 — page H1 mobile */ --t-3xl: 2.5rem; /* 40 — page H1 desktop */ --t-4xl: 3.5rem; /* 56 — hero figure (rare) */ --lh-tight: 1.15; --lh-snug: 1.30; --lh-normal: 1.50; --lh-loose: 1.65; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-caps: 0.08em; /* -------------------------------------------------------- RADII — opinionated by surface -------------------------------------------------------- */ --r-sm: 4px; /* pills, status chips, tiny tags */ --r-md: 8px; /* buttons, inputs, payment rows */ --r-lg: 14px; /* cards, sheets, the project switcher */ --r-xl: 22px; /* modals only — not used on dashboard surfaces */ --r-full: 999px; /* avatars, the progress bar's end caps */ /* -------------------------------------------------------- SHADOWS — two levels. Hairline + a single elevated for sheets. Cards rely on rules and background contrast, not shadow. -------------------------------------------------------- */ --shadow-0: 0 0 0 1px var(--rule); --shadow-1: 0 1px 0 0 var(--rule), 0 1px 2px -1px rgb(28 22 12 / 0.04); --shadow-2: 0 8px 28px -12px rgb(28 22 12 / 0.18), 0 2px 6px -2px rgb(28 22 12 / 0.08); /* -------------------------------------------------------- MOTION — slow, calm. No bouncy easings. -------------------------------------------------------- */ --dur-fast: 120ms; --dur-base: 180ms; --dur-slow: 280ms; --dur-page: 400ms; --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); --ease-in: cubic-bezier(0.6, 0.0, 0.9, 0.4); --ease-inout: cubic-bezier(0.5, 0.1, 0.2, 1); /* -------------------------------------------------------- SPACING — Tailwind-default-compatible. The portal uses an 8px grid; the gaps below are the ones the components reach for repeatedly. -------------------------------------------------------- */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; /* Sidebar / layout */ --rail-w: 220px; --rail-w-collapsed: 64px; --content-max: 880px; --content-wide: 1080px; } /* Reduced motion — kill all transitions, keep instant feedback */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; --dur-page: 0ms; } }