/* ============================================================ Mirath: Design Tokens (Revision 3 · 2026-06-15 · "law atelier") Source of truth: plan/design-system.md Reframing for elegance: a fine estate-law atelier, not an aged scriptorium. Light is a warm gallery linen, clean and welcoming, not a yellow cream. Dark is a warm walnut study at night: a wood-panelled room, lifted well clear of the near-black void, never a cold navy. Brass is a rich aged gold. Wax seal is a deep oxford bordeaux, reserved for the moment of commitment. Discipline: four neutrals + two accents per side (Order studio's restraint, order/synthesis.md §2, with Qalb-warm values substituted). Token NAMES are stable; only values evolve (Revision 3). ============================================================ */ :root { /* ---------- Primitive palette: material names, law-atelier values ---------- */ /* Ink: warm espresso-black. Welcoming, not the cold slate of Rev 2. */ --iron-gall: #23201A; /* primary ink, warm near-black */ --iron-gall-mid: #5E574B; /* warm taupe-grey, secondary text (AA on linen) */ --iron-gall-faint: #6F6857; /* warm grey, faint / placeholder (≥4.5:1 on linen and surface) */ /* Paper: warm gallery whites. Clean linen, not a yellow cream. */ --aged-parchment: #F4F2EB; /* warm linen, the canonical light background */ --fresh-paper: #FCFBF7; /* warm near-white, elevated surface (never pure white) */ --shadow-paper: #EAE6DC; /* warm greige, second elevation */ /* Brass: rich aged gold. Never orange. Darkened to clear WCAG AA on linen. */ --brass-patina: #836A2C; /* aged-gold, light-mode accent (≥4.5:1 on linen) */ --brass-warm: #9C7E3C; /* warmer lift on hover */ /* Wax seal: deep oxford bordeaux. Commitment only. */ --wax-seal-red: #722A2A; /* livery crimson, slightly warmed */ --wax-seal-glow: #8E3636; /* hover lift, still restrained */ /* Dark-mode base: a warm walnut study at night. Lifted clear of the near-black void of Rev 2 (#13141A), and warmed off cold navy. */ --midnight-vellum: #232019; /* warm walnut charcoal, dark-mode background */ --lamplight-surface: #2C2820; /* raised walnut for cards and sheets */ --lamplight-raised: #38332A; /* second elevation in lamplight */ --aged-brass-dark: #CBAE6F; /* brass in lamplight, dark-mode accent */ --parchment-dark: #CBC4B2; /* warm off-white, body text in dark */ --obsidian-text: #F2EDE1; /* warm near-white, headings in dark */ /* Borders */ --border-parchment: rgba(35, 32, 26, 0.12); /* ink-tinted, light */ --border-leather: rgba(203, 174, 111, 0.18); /* brass-tinted, dark */ /* Semantic accents: tuned warm, all clearing WCAG AA on linen. */ --scholar-amber: #7C6634; /* muted bronze, scholar-referral advisory */ --awl-amber: #7E6428; /* muted bronze, awl/radd state */ --hajb-ash: #6C665A; /* warm ash, mahjub heir (dignified greying) */ --error-sepia: #8C2E22; /* deep sepia-red, never iOS red */ --success-bronze: #4C6B3E; /* restrained forest, never bright green */ /* Commit-text: semantic alias for the wax-seal CTA label. Same in both modes. */ --color-commit-text: var(--obsidian-text); /* Categorical chart ramp: data fills for the calculator donut and any future chart. Warm-family values from the law-atelier palette (brass · sage · sepia · ash · bordeaux), no pure hues. The legend carries the text, so fills need distinction, not AA contrast. */ --chart-1: #9C7E3C; /* brass */ --chart-2: #6E7F52; /* sage */ --chart-3: #97674B; /* sepia */ --chart-4: #7B7568; /* warm ash */ --chart-5: #7E3E48; /* bordeaux */ /* ---------- Light mode semantic assignments (default) ---------- */ --color-bg: var(--aged-parchment); --color-surface: var(--fresh-paper); --color-surface-raised: var(--shadow-paper); --color-text-primary: var(--iron-gall); --color-text-secondary: var(--iron-gall-mid); --color-text-faint: var(--iron-gall-faint); --color-accent: var(--brass-patina); --color-accent-hover: var(--brass-warm); --color-commit: var(--wax-seal-red); --color-commit-hover: var(--wax-seal-glow); --color-border: var(--border-parchment); --color-arabic-ink: var(--iron-gall); --color-awl: var(--awl-amber); --color-scholar: var(--scholar-amber); --color-hajb: var(--hajb-ash); --color-error: var(--error-sepia); --color-success: var(--success-bronze); --color-separator: rgba(27, 29, 37, 0.08); /* ---------- Typography ---------- */ --font-serif: 'EB Garamond', 'Cormorant Garamond', 'Freight Text Pro', Georgia, serif; --font-arabic: 'Amiri', 'Scheherazade New', 'Noto Naskh Arabic', 'Traditional Arabic', serif; --font-sans: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Helvetica Neue', Arial, sans-serif; --font-sans-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', Arial, sans-serif; --font-mono: 'IBM Plex Mono', 'SF Mono', 'Menlo', monospace; /* Type scale: 8pt grid, rem throughout (1rem = 16px base) */ --text-display: 2.125rem; --text-h1: 1.75rem; --text-h2: 1.375rem; --text-h3: 1.25rem; --text-headline: 1.0625rem; --text-body: 1.0625rem; --text-callout: 1rem; --text-subhead: 0.9375rem; --text-footnote: 0.8125rem; --text-caption: 0.75rem; --text-legal: 0.6875rem; /* ---------- Spacing: 8pt grid ---------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ---------- Layout ---------- */ --top-bar-height: 44px; --bottom-nav-height: 49px; --tap-target-min: 44px; /* ---------- Radius ---------- */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* ---------- Shadow (light mode): warm-tinted to match the ink ---------- */ --shadow-card: 0 1px 3px rgba(35, 32, 26, 0.07), 0 1px 2px rgba(35, 32, 26, 0.04); --shadow-raised: 0 6px 20px rgba(35, 32, 26, 0.10), 0 2px 6px rgba(35, 32, 26, 0.06); --shadow-commit: 0 4px 14px rgba(114, 42, 42, 0.26); /* ---------- Motion ---------- */ --dur-micro: 120ms; --dur-small: 280ms; --dur-medium: 400ms; --dur-large: 600ms; --ease-ios-present: cubic-bezier(0.32, 0.72, 0, 1); --ease-ios-dismiss: cubic-bezier(0.32, 0, 0.67, 0); --ease-ios-push: cubic-bezier(0.2, 0.8, 0.3, 1); --ease-ios-pop: cubic-bezier(0.4, 0, 1, 1); --ease-settle: cubic-bezier(0.175, 0.885, 0.32, 1.275); } /* ---------- Dark mode: canonical state per design-system.md ---------- Theme resolution is owned by the inline