/* ========================================================================== iOR BD Capture - Design Tokens (v4: iOR brand - navy + turquoise) -------------------------------------------------------------------------- Single source of truth for color, type, space, radius, shadow, motion. Vanilla CSS custom properties. No build step, no webfonts, no libraries. v4 direction: iOR Partners brand. A professional audio-tool feel (think Voice Memos / a pro recorder) dressed in iOR's colors: a deep NAVY canvas, elevated navy surfaces, HAIRLINE borders (no glass), thin precise white waveform with a single TURQUOISE accent for recording / live / primary, iOR BLUE for CRM links (kept distinct from the turquoise), cool navy-biased grays for secondary text, white content cards floating on the navy, generous whitespace. RETIRED from v2 (do not use): all gradients, glows, glassmorphism / backdrop-filter, the canvas bloom. Token names that used to carry those effects are kept for a clean value-swap but now resolve to SOLID values; each is annotated "retired". Section 17 of DESIGN-SPEC.md directs the CSS changes that go with these swaps. Dark-only (there is no light theme). Token NAMES match v2 so the restyle is mostly value swaps. Contrast: text is pushed bright for a dark UI used outdoors. Every text / surface pair is annotated with its measured WCAG ratio. Body/label pairs clear AA (>=4.5:1); large text and UI fills clear >=3:1. Ratios are stated against the SURFACE the text sits on. ========================================================================== */ :root { color-scheme: dark; /* ---- Type: system stack only, no webfonts -------------------------- */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace; /* Tabular figures for the recording timer, durations, dates */ --numeric-tabular: "tabular-nums" 1; /* Type scale (root = 16px). Body sits at 17px for outdoor comfort. Never drop product text below --text-sm (15px). */ --text-2xs: 0.75rem; /* 12px meta, timestamps inside dense rows */ --text-xs: 0.8125rem; /* 13px badge labels, field captions */ --text-sm: 0.9375rem; /* 15px secondary body, list subtext */ --text-base: 1.0625rem;/* 17px body, inputs, buttons */ --text-lg: 1.25rem; /* 20px card summary, section titles */ --text-xl: 1.5rem; /* 24px screen titles */ --text-2xl: 2rem; /* 32px contact name on the receipt */ --text-3xl: 2.5rem; /* 40px first-run headline */ --text-timer: 3.5rem; /* 56px recording elapsed time (clean tabular) */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; --tracking-tight: -0.02em; --tracking-normal: 0; --tracking-wide: 0.02em; --tracking-caps: 0.06em; /* badge/overline uppercase */ /* ---- Spacing: 4px base (v3 leans on generous whitespace) ----------- */ --space-0: 0; --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-7: 2rem; /* 32 */ --space-8: 2.5rem; /* 40 */ --space-9: 3rem; /* 48 */ --space-10: 4rem; /* 64 */ /* ---- Radii (moderate; pro, not bubbly. pills stay pills) ----------- */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; /* cards */ --radius-xl: 22px; /* sheets, hero card */ --radius-pill: 999px;/* chips, badges, small buttons */ --radius-circle: 50%; /* ---- Sizing --------------------------------------------------------- */ --tap-min: 48px; /* absolute minimum interactive target */ --tap-comfortable: 56px; /* default for primary secondary controls */ --mic-size: 120px; /* record button, full-screen capture. modest*/ /* per user ("doesn't have to be that big"). */ --mic-size-split: 104px; /* record button when the deal deck shares */ --content-max: 30rem; /* 480px; single column, never wider */ --field-height: 52px; /* inputs, chips: fat-finger friendly */ --deck-card-w: min(80vw, 320px); /* deal card width; leaves a next peek */ --wave-strip-h: 88px; /* full-width live waveform strip height */ /* Glass blur radius - RETIRED. Kept at 0 so any lingering backdrop-filter: blur(var(--blur-glass)) is a no-op. Remove the backdrop-filter declarations in CSS; surfaces are solid now. */ --blur-glass: 0px; /* Safe-area helpers (installed PWA, notches, gesture bar) */ --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); /* Height of the slim offline/sync bar (§17.7A) when it is showing, else 0. The bar and the notes-list filter chips are BOTH sticky at the same top offset, so with the bar visible the chips slide underneath it (the bar is --z-banner, the chips --z-sticky). Anything that sticks below the bar adds this. app.js sets it on :root (or on .app) while the bar is visible and clears it when the bar hides; at the 0px default nothing moves. */ --banner-h: 0px; /* Rendered height of the fixed .export-bar, EXCLUDING --safe-bottom (callers add that themselves). Derived from the bar's own box: --space-3 padding, a --tap-comfortable button, --space-3 padding. Anything that has to scroll clear of the bar references this so the two cannot drift apart. */ --export-bar-h: calc(var(--tap-comfortable) + var(--space-3) + var(--space-3)); /* Native widgets (checkboxes, date pickers, range) pick up the warm accent instead of Chrome's default blue. Android Chrome and Samsung Internet both honour this; it is the only way to brand the native dialog the follow-up rows open. */ accent-color: var(--accent); /* ---- Motion (tightened for a precise feel: no bounce/overshoot) ---- */ --dur-instant: 80ms; --dur-fast: 120ms; --dur-base: 170ms; --dur-slow: 240ms; --dur-slower: 300ms; --ease-standard: cubic-bezier(0.2, 0, 0, 1); /* enter + move */ --ease-out: cubic-bezier(0.22, 0.7, 0.3, 1); /* settle, receipt reveal*/ --ease-in: cubic-bezier(0.4, 0, 1, 1); /* exit */ --ease-emphasis: cubic-bezier(0.3, 0, 0.2, 1); /* crisp press, NO bounce*/ /* ---- Z layers ------------------------------------------------------- */ --z-base: 0; --z-sticky: 10; /* sticky list header, export bar */ --z-banner: 20; /* offline / queue banner */ --z-overlay: 30; /* model-type chooser sheet */ --z-toast: 40; /* undo toast */ /* ========================================================================= COLOR - solid dark neutrals (only theme) Anchor surfaces (relative luminance, for the contrast notes below): --bg #0c0c0e L ~= 0.006 --surface #161619 L ~= 0.016 --surface-2 #1e1e22 L ~= 0.024 --surface-3 #2a2a2f L ~= 0.033 ======================================================================= */ /* Surfaces (all SOLID; hairline borders provide separation, not glass) */ --bg: #0b2140; /* app canvas (iOR deep navy) */ --bg-sunken: #071831; /* list scroll area behind cards */ --surface: #10305a; /* dark-chrome card / sheet (elevated navy) */ --surface-2: #183a68; /* inset fields, quiet chips */ --surface-3: #224a7c; /* pressed / hover on quiet surfaces */ /* Text (cool grays biased toward the navy palette; ratios vs --surface) */ --ink: #f3f7fb; /* primary text, ~13:1 */ --ink-2: #bcc7d6; /* secondary text, ~7:1 */ --ink-3: #93a1b2; /* tertiary/meta, ~5:1 */ --ink-inverse: #071a2e; /* deep navy ink for use on bright fills */ /* Lines - HAIRLINE borders (the primary separation device) */ --border: rgba(255, 255, 255, 0.10); /* default hairline */ --border-strong: rgba(255, 255, 255, 0.20);/* input borders, needs 3:1 */ /* Accent - warm ORANGE, the single brand/live/primary color. Used sparingly: the record button, the waveform playhead, primary CTAs, selection. Button text on it must be DARK (--accent-ink): dark ink on --accent = 6.7:1; white on --accent would be only 2.8:1. As text/icon on the dark canvas, --accent on --bg = 6.6:1. */ --accent: #2bc0ce; /* Bloom colour shared by the live waveform and the reactive orb. */ --wave-glow: rgba(45, 214, 214, 0.85); --accent-hover: #45cedb; --accent-press: #1ea3b1; --accent-ink: #04252c; /* deep teal-navy, for text on an --accent fill */ /* Primary aliases the accent (kept as names the spec/CSS already use). --primary-gradient -> solid --accent (valid as a background). */ --primary: #2bc0ce; --primary-hover: #45cedb; --primary-press: #1ea3b1; --primary-ink: #04252c; --primary-gradient: #2bc0ce; /* solid accent */ --primary-tint: rgba(43, 192, 206, 0.15); /* selected chip fill */ --primary-tint-ink: #8fe3ec; /* on tint over navy, ~9:1 */ /* Recording / live - same turquoise family (the record button, playhead). */ --recording: #2bc0ce; --recording-hover: #45cedb; --recording-press: #1ea3b1; --recording-ink: #04252c; --recording-glow: transparent; /* no bloom */ /* The mic orb fill - solid turquoise accent. */ --orb-gradient: #2bc0ce; /* Success - reviewed/confirmed. Muted professional green (a semantic, kept distinct from the single accent). #46a96e on --surface = 5.4:1. */ --success: #46a96e; --success-tint: rgba(70, 169, 110, 0.15); --success-tint-ink: #7fd3a2; /* Warning - low-confidence flag, staleness escalation. Muted amber. #e8a93c on --surface = ~9:1. */ --warning: #e8a93c; --warning-line: #e8a93c; /* the accent stripe */ --warning-tint: rgba(232, 169, 60, 0.15); --warning-tint-ink: #f2c877; /* Danger - true red, errors + destructive. #f36470 on --surface = 5.4:1. */ --danger: #f36470; --danger-hover: #f67d87; --danger-tint: rgba(243, 100, 112, 0.15); --danger-tint-ink: #f9a0a8; --danger-ink: #2a0509; /* Neutral badge (processing, exported) */ --neutral-tint: rgba(255, 255, 255, 0.07); --neutral-tint-ink: #b4b6bc; /* ~7.7:1 */ /* Link / CRM - iOR BLUE. Means "linked to the CRM record". Deliberately a blue, not a cyan, so it stays distinct from the turquoise accent (the brand uses both blues and turquoise). #4f9bd9 on --surface = ~5.5:1. */ --link: #4f9bd9; --link-tint: rgba(79, 155, 217, 0.16); --link-tint-ink: #a9cff2; /* on tint over navy, ~9:1 */ --link-line: #4f9bd9; /* keyline on the association block */ /* ========================================================================= CARD-ON-LIGHT family (v3.1) Content cards go WHITE so they read as physical cards against the dark recording UI (like the reference transcript sheet). These variants recolor everything that sits ON a white card; the dark chrome/recording/sheets keep the tokens above. Contrast ratios stated vs the card surface the element sits on (--card-surface #ffffff unless noted). ======================================================================= */ --card-surface: #ffffff; /* the white card */ --card-surface-2: #f2f3f5; /* inset on a card (fields, transcript, chip)*/ --card-surface-3: #e7e9ec; /* pressed on a card */ --card-ink: #14151a; /* primary text on white, ~16:1 */ --card-ink-2: #565a63; /* secondary text on white, ~6.8:1 */ --card-ink-3: #6d727c; /* tertiary / timestamps on white, ~4.8:1 */ --card-border: rgba(0, 0, 0, 0.10); /* internal hairline / row rules */ --card-border-strong: rgba(0, 0, 0, 0.22);/* input borders on a card */ /* Accent (orange) text/glyph on white must be darkened (bright --accent is only 2.8:1 on white). Filled orange buttons keep --accent + --accent-ink and work on any surface; this is for accent-colored TEXT/glyphs on a card. */ --card-accent-ink: #0b6a77; /* dark teal, ~5:1 on white */ /* Selected model chip on a card (accent-tinted, not gradient) */ --card-primary-tint: #d7f1f4; --card-primary-tint-ink: #0b6270; /* ~4.8:1 on the pale tint */ /* CRM link on a card: darkened iOR blue text + a mid-blue keyline (>=3:1) */ --card-link: #1c5fa0; /* text/glyph, ~6:1 on white */ --card-link-tint: #e4eef8; --card-link-line: #3f7fc4; /* association keyline, ~3:1 graphic */ /* Semantic tints/inks recomputed for white cards (the dark-surface tints above go invisible or wash out on white). */ --card-success-tint: #e2f3ea; --card-success-ink: #146c42; /* ~5.4:1 on tint */ --card-warning-tint: #fbefd6; --card-warning-ink: #8a5a00; /* ~5.8:1 on white */ --card-warning-line: #d99a1a; /* low-confidence stripe, ~3:1 graphic */ --card-danger-tint: #fbe4e6; --card-danger-ink: #b3202e; /* ~6.6:1 on white */ --card-danger-line: #d92d3b; /* error stripe, ~4.4:1 graphic */ --card-neutral-tint: #eef0f3; --card-neutral-ink: #565a63; /* White cards lift off the dark canvas with a soft shadow, not a border (the fill is the boundary). Reuse --shadow-md. See DESIGN-SPEC §17.9 for the right-bleed / rounded-left-only geometry. */ /* Focus ring - warm accent, visible on the dark canvas and on fills */ --focus-ring: #45cedb; --focus-ring-contrast: #0b2140; /* inner offset when ring sits on a fill */ --focus-width: 3px; --focus-offset: 2px; /* Overlays / scrims */ --scrim: rgba(0, 0, 0, 0.66); /* ---- Glass surfaces - RETIRED. Names preserved and pointed at SOLID surfaces so `background: var(--surface-glass)` renders solid. Drop the paired backdrop-filter in CSS (see --blur-glass = 0). --card-border- gradient and --chip-gradient are retired to solid values too. */ --surface-glass: #10305a; /* solid navy chrome */ --surface-glass-2: #183a68; --surface-glass-strong: #0c2447; /* bottom sheet, solid navy */ --card-border-gradient: rgba(255, 255, 255, 0.10); /* solid hairline */ --chip-gradient: #183a68; /* solid navy chip */ /* ---- Ambient canvas glow - RETIRED (no bloom). Names kept as `none` so body { background-image: var(--glow-canvas); } is a no-op. */ --glow-canvas: none; --glow-canvas-rec: none; /* ---- Waveform (idle glyph + live recording strip) ------------------ Thin PRECISE white bars on the dark canvas, orange playhead, per ref. --wave-gradient RETIRED -> solid white (valid as a fill). */ --wave-bar: #f0f1f2; /* live bar color (near-white) */ --wave-bar-dim: rgba(255, 255, 255, 0.16);/* baseline / not-yet-reached */ --wave-playhead: #2bc0ce; /* leading edge line + endpoint dots (turquoise)*/ --wave-gradient: #f0f1f2; /* retired gradient; solid white now */ --wave-ruler: #6b6d73; /* timeline tick + label gray */ /* ---- Shadows (subtle drop shadows only; separation is mostly borders. No glows anywhere.) ------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.5); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.55); --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.55); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6); --shadow-card-glow: none; /* retired glow */ /* Orb glow RETIRED -> a plain modest drop shadow so the record button lifts off the canvas without any bloom. */ --shadow-orb: 0 4px 14px rgba(0, 0, 0, 0.55); --shadow-orb-rec: 0 4px 14px rgba(0, 0, 0, 0.55); } /* ========================================================================== Reduced motion - respect the OS setting. Transitions collapse to near- instant; state changes stay perceptible via color/opacity but do not animate distance. The live waveform still renders (it reflects real mic amplitude); only decorative motion stops. ========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --dur-instant: 1ms; --dur-fast: 1ms; --dur-base: 1ms; --dur-slow: 1ms; --dur-slower: 1ms; } }