/* ════════════════════════════════════════════════════════════════════ variables.css - the palette: glass and metal, light only (the revamp, 25 Oct 2026; xycora revised D5, D20) Two sets in one :root: - the revised design's own tokens (--label, --hair, --glass-*, --metal*, --graphite*, --metal-ink, --field*, --gloss, the entry and status colours), which theme.css, shell.css, page-kit.css and the ported screens are drawn with; - production's token names (--surface-*, --text-*, --border-*, --status-*, --shadow-*, --chrome-*, --btn-primary-*, the radii and the type), mapped onto that palette, so every screen that has no revised design yet (the document editor, signatures, redaction, compare, clauses, time, portal admin, firm search, intelligence, bundles, two-step, the settings pages, the admin and portal pages) turns light glass by itself. There is no dark palette: theme-boot.js never sets data-theme="dark", so the [data-theme="dark"] rules left in the area stylesheets never apply (they go in Phase 2). The block below also answers to [data-theme="dark"], should anything set it. ════════════════════════════════════════════════════════════════════ */ :root, :root[data-theme="dark"] { color-scheme: light; /* Type: Helvetica Neue where it is installed, else Arimo (bundled, fonts.css), drawn to the same measure. The wordmark keeps its face. */ --font: 'Helvetica Neue', 'Arimo', Helvetica, Arial, sans-serif; --font-brand: 'Plus Jakarta Sans', 'Helvetica Neue', 'Arimo', sans-serif; /* Labels: graphite rather than black */ --label: #1E1F22; --label-2: #55575C; --label-3: #85878C; --label-4: #B2B4B8; --brand: #0A2536; /* obsidian: the wordmark only */ /* Lines and fills on glass */ --hair: rgba(0, 0, 0, 0.07); --hair-strong: rgba(0, 0, 0, 0.11); --fill-hover: rgba(0, 0, 0, 0.04); --fill-active: rgba(0, 0, 0, 0.065); --fill-press: rgba(0, 0, 0, 0.09); /* Glass */ --glass-fill: linear-gradient(160deg, rgba(255, 255, 255, 0.80) 0%, rgba(255, 255, 255, 0.48) 46%, rgba(255, 255, 255, 0.62) 100%); /* Every dialog, menu, dropdown list, popover and tooltip: one soft grey sheet */ --glass-raised: linear-gradient(160deg, rgba(247, 248, 250, 0.97) 0%, rgba(237, 239, 243, 0.95) 52%, rgba(243, 244, 247, 0.97) 100%); --glass-rim: linear-gradient(150deg, #FFFFFF 0%, rgba(255, 255, 255, 0.45) 26%, rgba(255, 255, 255, 0.10) 52%, rgba(255, 255, 255, 0.6) 84%, #FFFFFF 100%); --glass-blur: blur(28px) saturate(180%); --glass-shadow: 0 0 0 0.5px rgba(0, 0, 0, 0.11), 0 1px 1px rgba(0, 0, 0, 0.03), 0 16px 36px -16px rgba(16, 24, 32, 0.20); --glass-shadow-raised: 0 0 0 0.5px rgba(0, 0, 0, 0.13), 0 2px 6px rgba(0, 0, 0, 0.05), 0 26px 52px -14px rgba(16, 24, 32, 0.26); --sheen: linear-gradient(180deg, rgba(255, 255, 255, 0.72) 0%, rgba(255, 255, 255, 0.2) 26%, rgba(255, 255, 255, 0) 52%); /* Metal: brushed aluminium lit from above */ --metal: linear-gradient(180deg, #FFFFFF 0%, #F4F5F7 40%, #DFE2E6 55%, #ECEEF1 80%, #FBFBFC 100%); --metal-hover: linear-gradient(180deg, #FFFFFF 0%, #F9FAFB 40%, #E9EBEE 55%, #F3F4F6 80%, #FFFFFF 100%); --metal-press: linear-gradient(180deg, #D9DCE0 0%, #E8EAED 55%, #F4F5F7 100%); --metal-edge: 0 0 0 0.5px rgba(0, 0, 0, 0.26), 0 1px 1px rgba(0, 0, 0, 0.07), 0 5px 12px -5px rgba(16, 24, 32, 0.28), inset 0 1px 0 #FFFFFF, inset 0 -1px 0 rgba(0, 0, 0, 0.05); --metal-glow: 0 0 0 3px rgba(255, 255, 255, 0.75), 0 0 18px 3px rgba(255, 255, 255, 0.9); --metal-pressed: 0 0 0 0.5px rgba(0, 0, 0, 0.28), inset 0 1px 3px rgba(0, 0, 0, 0.14); /* Graphite: the dark metal of a primary button */ --graphite: linear-gradient(180deg, #5A5D63 0%, #37393E 46%, #222327 54%, #2E3035 100%); --graphite-hover: linear-gradient(180deg, #686B72 0%, #404247 46%, #2A2B2F 54%, #36383D 100%); --graphite-edge: 0 0 0 0.5px rgba(0, 0, 0, 0.55), 0 1px 2px rgba(0, 0, 0, 0.18), 0 6px 14px -6px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.22); /* Headings: a graphite metal ink */ --metal-ink: linear-gradient(180deg, #55585E 0%, #26272A 48%, #1A1B1E 56%, #4D5056 100%); /* A field: a shallow well pressed into the glass */ --field: linear-gradient(180deg, #E6E8EC 0%, #EEF0F3 40%, #F6F7F9 100%); --field-hover: linear-gradient(180deg, #ECEEF1 0%, #F3F4F6 40%, #FAFAFB 100%); --field-edge: inset 0 1px 2px rgba(16, 24, 32, 0.12), inset 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 1px 0 rgba(255, 255, 255, 0.95); --field-ring: inset 0 1px 2px rgba(16, 24, 32, 0.08), inset 0 0 0 0.5px rgba(0, 0, 0, 0.18), 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 4px rgba(10, 37, 54, 0.12), 0 0 16px rgba(255, 255, 255, 0.9); /* The gloss on a coloured surface */ --gloss: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.14) 48%, rgba(255, 255, 255, 0) 52%, rgba(0, 0, 0, 0.1) 100%); /* A soft metal pane: a row pointed at in a list */ --pane-hover: 0 0 0 0.5px rgba(0, 0, 0, 0.14), 0 1px 2px rgba(16, 24, 32, 0.07), 0 4px 10px -6px rgba(16, 24, 32, 0.22), inset 0 1px 0 #FFFFFF; /* Calendar entry types and status, always with an icon and a word */ --t-hearing: #2A78D6; --t-deadline: #EDA100; --t-client: #1BAF7A; --t-reminder: #E87BA4; --t-internal: #7C7C82; --t-hot: #D03B3B; --s-good: #0CA30C; --s-critical: #D03B3B; --s-serious: #EC835A; --s-warning: #FAB219; --brand-ink: #33566D; --now: #E0443A; --gold: #A8894F; --r-sm: 7px; --r-md: 10px; --r-lg: 14px; --r-xl: 20px; --side-w: 236px; --hover-dur: 400ms; /* ── Production's tokens, on the new palette ─────────────────────── */ /* Surfaces: the page is the studio ground (body, below); a sheet is a near-white pane; a well is the field's grey; hover and selection are washes, so they sit on glass as well as on white */ --surface-canvas: #F1F2F5; --surface-elevated: #FBFBFC; --surface-recessed: #EDEFF2; --surface-sidebar: #EEEFF2; --surface-topbar: transparent; --surface-overlay: rgba(232, 234, 238, 0.45); --surface-hover: rgba(0, 0, 0, 0.04); --surface-selected: rgba(0, 0, 0, 0.065); --surface-input: #EDEFF2; --surface-primary: var(--surface-canvas); --surface-card: var(--surface-elevated); /* The obsidian ink becomes graphite; the one accent is Cape Cod */ --brand-navy: #1E1F22; --brand-navy-deep: #1A1B1E; --brand-navy-soft: #55575C; --brand-navy-mid: #2E3035; --brand-navy-light: #55575C; --brand-gold: #33566D; --brand-gold-deep: #1E1F22; --brand-gold-soft: #E9ECEF; --brand-gold-light: #E9ECEF; /* Text: graphite, then two greys; faint is for hints only */ --text-primary: #1E1F22; --text-secondary: #55575C; --text-muted: #6F7176; --text-faint: #85878C; --text-inverse: #FFFFFF; --text-inverse-muted: rgba(255, 255, 255, 0.72); --text-link: #33566D; /* Status: the revised hues, darkened where they are words */ --status-success: #1E7A3C; --status-success-soft: rgba(12, 163, 12, 0.10); --status-warning: #8A5A00; --status-warning-soft: rgba(250, 178, 25, 0.16); --status-danger: #B3261E; --status-danger-soft: rgba(208, 59, 59, 0.10); --status-info: #33566D; --status-info-soft: rgba(42, 120, 214, 0.09); --status-success-bg: var(--status-success-soft); --status-warning-bg: var(--status-warning-soft); --status-danger-bg: var(--status-danger-soft); --status-info-bg: var(--status-info-soft); --dot-ready: #0CA30C; --dot-reading: #FAB219; --dot-failed: #D03B3B; /* AI content awaiting a lawyer's review keeps its one colour, mint */ --ai-surface: rgba(111, 203, 186, 0.12); --ai-border: rgba(111, 203, 186, 0.40); --ai-text: #1D5E52; --ai-accent: #6FCBBA; /* Lines: hairlines on glass */ --border-subtle: rgba(0, 0, 0, 0.07); --border-strong: rgba(0, 0, 0, 0.11); --border-control: rgba(0, 0, 0, 0.13); --border-control-hover: rgba(0, 0, 0, 0.22); --border-focus: rgba(10, 37, 54, 0.45); --ring: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 4px rgba(10, 37, 54, 0.14); --ring-danger: 0 0 0 3px rgba(255, 255, 255, 0.9), 0 0 0 4px rgba(208, 59, 59, 0.3); /* Depth: the glass shadows */ --shadow-xs: 0 0 #0000; --shadow-sm: 0 0 #0000; --shadow-md: 0 0 0 0.5px rgba(0, 0, 0, 0.06), 0 1px 1px rgba(0, 0, 0, 0.03), 0 10px 24px -16px rgba(16, 24, 32, 0.20); --shadow-lg: var(--glass-shadow-raised); --shadow-xl: 0 0 0 0.5px rgba(0, 0, 0, 0.13), 0 2px 6px rgba(0, 0, 0, 0.05), 0 32px 64px -18px rgba(16, 24, 32, 0.30); --shadow-mockup: var(--glass-shadow-raised); /* Legacy aliases */ --color-ink: #1E1F22; --color-gold-2: #E9ECEF; --color-gold-bg: var(--surface-elevated); --color-steel: #55575C; --color-slate: #55575C; --color-white: #FFFFFF; --color-footer-rule: #85878C; /* Type: one sans everywhere, headings included */ --font-sans: var(--font); --font-serif: var(--font); --font-title: var(--font); --font-display: var(--font); /* Radii and motion */ --radius-sm: 7px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 20px; --dur-fast: 160ms; --dur: 400ms; --dur-slow: 280ms; --transition-fast: 200ms ease; --transition-base: 400ms ease; --transition-slow: 400ms ease; /* Primary: graphite (the gradient is laid on by the rules below) */ --btn-primary-bg: #2E3035; --btn-primary-bg-hover: #404247; --btn-primary-bg-press: #222327; --btn-primary-fg: #FFFFFF; /* The sidebar is glass now, so what sits on it takes the page's ink */ --chrome-bg: transparent; --chrome-ink: #1E1F22; --chrome-ink-muted: #55575C; --chrome-ink-faint: #85878C; --chrome-line: rgba(0, 0, 0, 0.07); --chrome-line-strong: rgba(0, 0, 0, 0.11); --chrome-hover: rgba(255, 255, 255, 0.58); --chrome-active: rgba(0, 0, 0, 0.065); --chrome-accent: #33566D; /* The shell's measures */ --topbar-h: 52px; --ws-topbar-h: 52px; --ws-sidebar-w: 236px; --ws-sidebar-rail: 60px; --sidebar-w: 236px; --sidebar-collapsed: 60px; /* The dark palette's own words, should any screen read them */ --bg0: #F8F8FA; --bg1: #EEEFF2; --bg2: #E5E6EA; --ice: #33566D; --ice-rgb: 51, 86, 109; --champagne: #A8894F; --champagne-soft: rgba(168, 137, 79, 0.45); --glass: var(--glass-raised); --sheet: rgba(255, 255, 255, 0.6); --sheet-hi: rgba(255, 255, 255, 0.8); /* ── Letter spacing ── */ --tracking-tight: -0.02em; --tracking-snug: -0.01em; --tracking-wide: 0.08em; --tracking-wider: 0.14em; /* ── Spacing (8 px base) ── */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4rem; --space-7: 5rem; --space-8: 7.5rem; /* ── Controls and motion (DESIGN.md) ── */ --content-max: 1200px; --ctl-h-sm: 32px; --ctl-h: 40px; --ctl-h-lg: 48px; --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* ── Legacy aliases (marketing pages) ── */ --color-navy: var(--brand-navy); --color-deep: var(--brand-navy-deep); --color-gold: var(--brand-gold); --color-gold-light: var(--brand-gold-soft); --color-body: var(--text-primary); --color-muted: var(--text-secondary); --color-muted-2: var(--text-muted); --color-cream: var(--surface-canvas); --color-cream-2: var(--surface-elevated); --color-light: var(--surface-recessed); --color-line: var(--border-subtle); --color-green: var(--status-success); }