/* ============================================================================ POWER DIALER DESIGN SYSTEM — tokens.css The contract. Every other file derives from this one. Source: "Power Dialer — Visual Direction, proposal v1" (Structural Soft-UI) System summary: ONE SURFACE one tinted surface family, no container borders RAISED = ACTIONABLE extrusion is spent only where a click/keystroke lands SUNK = INPUT/SELECTED FLAT = DATA tables, panels, headers get hairlines, not cards COLOUR = STATE ONLY accents appear as 6px dots, 1.5px bars, or text — never as a filled surface larger than a button NEVER NEST ELEVATION a raised element never contains another raised element; a sunk field never sits in a sunk panel. Modals are the one exception (--shadow-overlay). ========================================================================== */ :root { /* ------------------------------------------------------------------ */ /* SURFACES — light theme (warm bone) */ /* ------------------------------------------------------------------ */ --surface-raised: #F5F3EF; /* anything clickable */ --surface-base: #F0EEEA; /* the app ground. flat data lives here */ --surface-sunk: #E9E7E2; /* inputs, tracks, selected rows */ --hairline: #DCD8D0; /* table rules, panel splits */ --hairline-soft: #E4E0D8; /* row separators inside panels */ /* ------------------------------------------------------------------ */ /* INK — text. Nothing lighter than ink-3 carries meaning. */ /* ------------------------------------------------------------------ */ --ink-1: #1C1A16; /* primary text */ --ink-2: #57534A; /* secondary text */ --ink-3: #706C62; /* tertiary text / labels. Measured 4.52:1 on base, 4.73:1 on raised, 4.24:1 on sunk. The old #8C877C was documented as the AA floor and was 3.09:1 on base — under the 4.5:1 minimum, on the ink every label in the product is set in. Dark's #928C82 is 4.64:1 and is left alone. */ --ink-4: #B0AAA0; /* disabled / not-attempted only */ /* ------------------------------------------------------------------ */ /* ACCENTS — one chroma, hue-varied, each locked to a call state. */ /* ------------------------------------------------------------------ */ --accent: #4557C9; /* primary action / focus / auto-dial */ --connected: #2F8A5C; /* live call, success */ --ringing: #B8801E; /* ringing, pending, warning */ --failed: #B54430; /* failed, DNC, destructive */ --on-accent: #F5F3EF; /* text on any accent fill */ /* Accent tints — ONLY for 3px state bars' glow and badge washes. Never a panel background. */ --accent-wash: rgba(69, 87, 201, .10); --connected-wash: rgba(47, 138, 92, .12); --ringing-wash: rgba(184, 128, 30, .12); --failed-wash: rgba(181, 68, 48, .12); /* ------------------------------------------------------------------ */ /* SHADOW INK — warm, never black, never navy. */ /* ------------------------------------------------------------------ */ --sh-light: #FFFFFF; --sh-dark: 28 26 22; /* r g b — use rgb(var()/a) */ /* ELEVATION — four steps + the modal exception. */ --shadow-raise-1: -1px -1px 3px var(--sh-light), 2px 2px 4px rgb(var(--sh-dark) / .14); --shadow-raise-2: -3px -3px 6px var(--sh-light), 3px 3px 8px rgb(var(--sh-dark) / .18); --shadow-sink-1: inset 3px 3px 6px rgb(var(--sh-dark) / .17), inset -3px -3px 5px var(--sh-light); --shadow-sink-soft: inset 2px 2px 5px rgb(var(--sh-dark) / .15), inset -1px -1px 2px var(--sh-light); --shadow-overlay: -8px -8px 16px var(--sh-light), 10px 10px 26px rgb(var(--sh-dark) / .22); /* Hover = same geometry, dark side lifted by .03 alpha. Nothing else. */ --shadow-raise-1-hover: -1px -1px 3px var(--sh-light), 2px 2px 4px rgb(var(--sh-dark) / .17); --shadow-raise-2-hover: -3px -3px 6px var(--sh-light), 3px 3px 8px rgb(var(--sh-dark) / .21); /* Accent-filled controls sit on their own recipe (white edge is a tinted glint, not a full highlight). */ --shadow-accent: -2px -2px 4px rgba(255,255,255,.40), 3px 3px 8px rgb(var(--sh-dark) / .24); --shadow-accent-hover: -2px -2px 4px rgba(255,255,255,.44), 3px 3px 8px rgb(var(--sh-dark) / .28); --shadow-knob: -1px -1px 3px rgba(255,255,255,.45), 2px 2px 6px rgb(var(--sh-dark) / .26); --scrim: rgba(28, 26, 22, .28); /* ------------------------------------------------------------------ */ /* GROUND & GLASS — the fourth surface, and the third elevation. */ /* */ /* The three surfaces above describe what happens INSIDE a pane. They */ /* say nothing about the pane itself, so the dialer painted its queue, */ /* its call column and its context column on --surface-base and set */ /* one hairline between them: measured, pane and ground were the same */ /* paint (1.000:1) and the whole screen read as one flat field. */ /* */ /* --surface-shell is the ground the panes sit ON. It is deliberately */ /* BELOW --surface-sunk: the ground is the one thing in the system */ /* nothing is ever written on, so it can go as deep as separation */ /* needs without costing a single contrast pairing. The panes keep */ /* --surface-base exactly, so every measurement taken against a pane */ /* before this change still holds to the digit. Pane-to-ground goes */ /* 1.000:1 -> 1.193:1 light, 1.000:1 -> 1.198:1 dark. */ /* */ /* --shadow-float is a THIRD elevation category, and it is not a */ /* violation of "never nest elevation": raise/sink describe a control */ /* the hand can press, float describes a plane the eye reads as above */ /* the ground. It carries no white light-source edge and no 2-3px */ /* offset, so it can never be mistaken for something pressable, which */ /* is exactly why a raised button inside a floating pane still reads */ /* as the only actionable object in it. */ /* ------------------------------------------------------------------ */ --surface-shell: #DFDBD2; /* the ground under the panes */ --glass-edge: rgba(255, 255, 255, .85); /* the lit top rim */ --glass-ring: rgb(var(--sh-dark) / .07); /* the hairline ring */ --glass-fill: rgba(245, 243, 239, .86); /* frosted popovers only */ --glass-blur: 16px; --shadow-float: 0 1px 2px rgb(var(--sh-dark) / .05), 0 10px 26px -8px rgb(var(--sh-dark) / .20); /* A floating surface that also overlaps content (popovers, menus) is lifted further and takes the real backdrop blur. */ --shadow-glass: 0 2px 6px rgb(var(--sh-dark) / .08), 0 16px 40px -10px rgb(var(--sh-dark) / .26); /* ------------------------------------------------------------------ */ /* TYPE — Manrope for interface; IBM Plex Mono for anything a human */ /* reads back aloud (numbers, timers, IDs, labels). */ /* ------------------------------------------------------------------ */ --font-ui: "Manrope", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-num: "IBM Plex Mono", "SF Mono", Menlo, Consolas, monospace; --text-display: 800 30px/1.1 var(--font-ui); /* lead name only */ --text-title: 700 19px/1.25 var(--font-ui); /* panel/page titles */ --text-body: 500 13px/1.5 var(--font-ui); /* default. 500, not 400 */ --text-row: 500 12px/1.4 var(--font-ui); /* table rows */ --text-label: 600 11px/1.2 var(--font-ui); /* caps labels, +.1em */ --text-mono: 500 14px/1.4 var(--font-num); /* phone numbers */ --text-mono-s: 500 11px/1.4 var(--font-num); /* row numerals */ --text-timer: 600 28px/1 var(--font-num); /* the call timer */ --track-caps: .1em; /* the one tracking value for caps */ --track-display: -.028em; /* the one tracking value for display type */ /* ------------------------------------------------------------------ */ /* DENSITY — 4px base. No padding value above 20px in the product. */ /* ------------------------------------------------------------------ */ --u: 4px; --row-h: 30px; /* table rows (~36 visible at 1440x900) */ --chrome-h: 44px; /* top bar, call bar, footers */ --control-h: 28px; /* buttons, inputs, selects */ --chip-h: 22px; /* disposition chips, small pills */ --badge-h: 20px; /* state badges */ --gutter: 12px; /* between panels */ --pad: 8px; /* inside panels */ --r-control: 8px; /* buttons, inputs, keys */ --r-chip: 6px; /* chips, small pills */ --r-badge: 5px; /* badges */ --r-panel: 12px; /* panels, cards, dropdowns */ --r-shell: 14px; /* the app shell, modals */ --r-full: 999px; /* pills, knobs, dots */ /* ------------------------------------------------------------------ */ /* MOTION — three duration tiers, one house ease. See MOTION.md. */ /* Motion exists to confirm a press or a state change. Never to decorate. */ /* ------------------------------------------------------------------ */ --t-press: 90ms; /* physical feedback: press, release, key tap */ --t-state: 140ms; /* state changes: toggle, tab, status, selection */ --t-panel: 180ms; /* surfaces: dropdown, sidebar, collapse, toast */ --t-overlay: 220ms; /* the modal exception (enter). exit = --t-panel */ --t-slow: 400ms; /* big one-off travels: row advance, count-up */ --ease: cubic-bezier(.2, .7, .3, 1); /* the house ease (decel) */ --ease-exit: cubic-bezier(.4, 0, .7, .4); /* exits only (accel) */ --ease-spring: cubic-bezier(.34, 1.4, .44, 1); /* knobs + tab indicator only — the two moving objects */ /* ------------------------------------------------------------------ */ /* FOCUS — a 1.5px inset ring inside the existing shadow. */ /* Never an outer glow. */ /* ------------------------------------------------------------------ */ --focus-ring: inset 0 0 0 1.5px var(--accent); /* Z-INDEX LADDER */ --z-sticky: 10; --z-dropdown: 40; --z-callbar: 50; --z-modal: 80; --z-toast: 90; } /* ========================================================================== DARK SURFACE — ships day one. Not an inversion: the shadow model is rebuilt. White at real opacity reads as plastic, so the light edge drops to 5.5% and the dark side does the work at ~50%. Base lifts off black — true black kills the extrusion entirely. ========================================================================== */ [data-theme="dark"] { --surface-raised: #2E2B27; --surface-base: #262421; --surface-sunk: #1E1C19; --hairline: #383530; /* rules go UP in contrast on dark */ --hairline-soft: #302D29; --ink-1: #EDEAE3; --ink-2: #A8A29A; --ink-3: #928C82; /* 4.5:1 on base — the AA floor */ --ink-4: #767068; /* Accents lift ~14% lightness and take dark text, not light. */ --accent: #7C8CEF; --connected: #4FB07C; --ringing: #D9A33F; --failed: #DE6A52; --on-accent: #1B1A17; --accent-wash: rgba(124, 140, 239, .13); --connected-wash: rgba( 79, 176, 124, .14); --ringing-wash: rgba(217, 163, 63, .14); --failed-wash: rgba(222, 106, 82, .14); --sh-light: rgba(255, 255, 255, .055); --sh-dark: 0 0 0; --shadow-raise-1: -1px -1px 3px var(--sh-light), 2px 2px 5px rgb(var(--sh-dark) / .45); --shadow-raise-2: -3px -3px 6px var(--sh-light), 3px 3px 8px rgb(var(--sh-dark) / .50); --shadow-sink-1: inset 3px 3px 6px rgb(var(--sh-dark) / .50), inset -3px -3px 5px var(--sh-light); --shadow-sink-soft: inset 2px 2px 5px rgb(var(--sh-dark) / .40), inset -1px -1px 2px var(--sh-light); --shadow-overlay: -8px -8px 16px var(--sh-light), 10px 10px 26px rgb(var(--sh-dark) / .60); --shadow-raise-1-hover: -1px -1px 3px var(--sh-light), 2px 2px 5px rgb(var(--sh-dark) / .55); --shadow-raise-2-hover: -3px -3px 6px var(--sh-light), 3px 3px 8px rgb(var(--sh-dark) / .60); --shadow-accent: -2px -2px 4px rgba(255,255,255,.10), 3px 3px 8px rgb(var(--sh-dark) / .50); --shadow-accent-hover: -2px -2px 4px rgba(255,255,255,.14), 3px 3px 8px rgb(var(--sh-dark) / .60); --shadow-knob: -1px -1px 3px rgba(255,255,255,.12), 2px 2px 6px rgb(var(--sh-dark) / .50); --scrim: rgba(0, 0, 0, .45); /* Dark's ground drops below --surface-sunk for the same reason light's rises above nothing: it is the one never-written-on surface. The rim inverts — on dark, a lit edge is a 7.5% white hairline, not an 85% one, or the pane reads as plastic (the same rule the shadow model already follows). Pane fill stays --surface-base exactly. */ --surface-shell: #151310; --glass-edge: rgba(255, 255, 255, .075); --glass-ring: rgba(255, 255, 255, .055); --glass-fill: rgba(46, 43, 39, .86); --shadow-float: 0 1px 2px rgb(var(--sh-dark) / .35), 0 12px 30px -8px rgb(var(--sh-dark) / .55); --shadow-glass: 0 2px 6px rgb(var(--sh-dark) / .45), 0 18px 44px -10px rgb(var(--sh-dark) / .65); }