/* isrLink - design tokens. Spec: docs/team/07-design.md (section "שפה חזותית isrLink 2026-11-13") Only variables here. Components use logical properties (inline-start/end), never left/right. Theme: single dark theme ("night radar"). No light theme; data-theme is ignored. Font: IBM Plex Sans Hebrew (Hebrew + Latin). Self-host woff2 in web/fonts/ (preferred, works offline in PWA). desktop/src/renderer/tokens.css must be a byte-identical copy of this file. */ :root { color-scheme: dark; /* ---- Palette (named source values) ---- */ --c-abyss-950: #050D1C; /* page background (L 0.004) */ --c-abyss-900: #0A1730; /* deep panels, viewer chrome */ --c-navy-800: #0C1D37; /* solid surface (glass fallback) */ --c-navy-700: #12294A; /* surface-2, filled code slot */ --c-steel-500: #4F7FAE; /* input borders: 4.0:1 on surface (non-text) */ --c-techelet-400: #3FB8F5; /* signature accent, links, radar - 8.7:1 on abyss */ --c-techelet-300: #7FD8FF; /* focus ring, gradient top, hover */ --c-techelet-600: #2E9BEF; /* gradient bottom (6.4:1 with abyss text) */ --c-frost-50: #E8F1FB; /* main text - 16:1 on abyss */ --c-frost-300: #9DB3CC; /* muted text - 9:1 on abyss, 7.6:1 on surface */ --c-ink: #041022; /* text on bright fills (buttons, amber, chips) */ --c-amber-300: #F5A524; /* "remote control is live" - 9.4:1 with ink. Name used in app.css */ --c-amber-700: #B45309; --c-red-700: #B42318; /* white text on it 6.6:1. Name used in app.css (.tb-danger) */ --c-red-300: #FF7A7A; /* danger text/fill on dark - 7.7:1 on abyss */ --c-green-300: #4ADE9A; /* approve / connected */ --c-green-700: #1A7F4B; /* Legacy palette names (kept so nothing breaks; point at new values) */ --c-petrol-950: var(--c-abyss-950); --c-petrol-900: var(--c-abyss-900); --c-petrol-700: var(--c-techelet-600); --c-petrol-600: var(--c-techelet-400); --c-petrol-300: var(--c-techelet-400); --c-mist-50: var(--c-frost-50); --c-mist-100: var(--c-navy-700); --c-mist-300: var(--c-steel-500); --c-slate-600: var(--c-frost-300); /* ---- Semantic colors (dark, the only theme) ---- */ --color-bg: var(--c-abyss-950); --color-surface: var(--c-navy-800); /* solid; glass cards use --glass-bg on top of --bg-atmosphere */ --color-surface-2: var(--c-navy-700); --color-border: rgba(127, 216, 255, 0.22); /* decorative edges only */ --color-border-strong: var(--c-steel-500); /* inputs, secondary buttons: >=3:1 */ --color-text: var(--c-frost-50); --color-text-muted: var(--c-frost-300); --color-primary: var(--c-techelet-400); /* links, outlines, selected states */ --color-primary-hover: var(--c-techelet-300); --color-on-primary: var(--c-ink); /* primary button text is DARK (white fails on bright blue) */ --color-live: var(--c-amber-300); --color-on-live: var(--c-ink); --color-danger: var(--c-red-300); --color-on-danger: var(--c-ink); --color-success: var(--c-green-300); --color-on-success: var(--c-ink); --color-warning-bg: #2A1F0C; /* scam-warning box; text = --color-text (14:1) */ --color-warning-edge: var(--c-amber-300); --color-error-bg: #34121B; /* text = --color-text (14:1) */ --color-focus: var(--c-techelet-300); /* 12:1 on abyss */ --color-focus-halo: var(--c-abyss-950); --color-code-slot: rgba(5, 13, 28, 0.72); /* digit slot fill, sits inside glowing frame */ --color-code-slot-edge:var(--c-techelet-400); /* ---- Glass ---- */ --glass-bg: rgba(16, 38, 72, 0.55); --glass-bg-strong: rgba(10, 24, 48, 0.82); /* dialogs, viewer toolbar (legible over any video) */ --glass-border: 1px solid rgba(127, 216, 255, 0.26); --glass-blur: blur(14px) saturate(140%); /* use with -webkit-backdrop-filter too */ --glass-highlight: inset 0 1px 0 rgba(232, 241, 251, 0.08); /* No backdrop-filter support (or forced-colors): fall back to --color-surface, solid. */ /* ---- Glow ---- */ --glow-sm: 0 0 0 1px rgba(63, 184, 245, 0.35), 0 0 12px rgba(63, 184, 245, 0.25); --glow-md: 0 0 0 1px rgba(63, 184, 245, 0.45), 0 0 28px rgba(63, 184, 245, 0.30); --glow-code: 0 0 0 1px rgba(127, 216, 255, 0.60), 0 0 36px rgba(63, 184, 245, 0.40), inset 0 0 24px rgba(63, 184, 245, 0.15); --glow-live: 0 0 18px rgba(245, 165, 36, 0.45); --text-glow: 0 0 18px rgba(63, 184, 245, 0.55); /* code digits only */ /* ---- Gradients ---- */ --gradient-primary: linear-gradient(180deg, #7FD8FF 0%, #2E9BEF 100%); --gradient-primary-hover: linear-gradient(180deg, #A6E5FF 0%, #3FB8F5 100%); --bg-atmosphere: radial-gradient(120% 80% at 50% 0%, #0E2A52 0%, rgba(14, 42, 82, 0) 60%), var(--c-abyss-950); /* ---- Radar ---- */ --radar-ring: rgba(63, 184, 245, 0.18); --radar-ring-strong: rgba(63, 184, 245, 0.45); --radar-sweep: conic-gradient(from 0deg, rgba(63, 184, 245, 0) 0deg, rgba(63, 184, 245, 0) 300deg, rgba(63, 184, 245, 0.35) 360deg); --radar-blip: var(--c-techelet-300); --dur-sweep: 8s; /* one full rotation; linear, infinite */ /* Viewer chrome: dark glass on video */ --viewer-bg: #000000; --toolbar-bg: var(--glass-bg-strong); --toolbar-text: var(--c-frost-50); --toolbar-active-bg: var(--c-techelet-400); --toolbar-active-text: var(--c-ink); --toolbar-focus: #FFFFFF; /* Annotation pen colors (ann.color). Default first. */ --ann-1: #FF3B30; /* red */ --ann-2: #FFCC00; /* yellow */ --ann-3: #34C759; /* green */ --ann-4: #0A84FF; /* blue */ --ann-5: #FFFFFF; /* white */ /* ---- Typography ---- */ --font-ui: "IBM Plex Sans Hebrew", "Segoe UI", "Noto Sans Hebrew", Arial, sans-serif; --font-code: var(--font-ui); /* code digits: same family, tabular figures, weight 600 */ --code-numeric: tabular-nums lining-nums; /* Scale: 1.25 ratio from 16px */ --fs-xs: 0.8125rem; --fs-sm: 0.875rem; --fs-md: 1rem; --fs-lg: 1.25rem; --fs-xl: 1.5625rem; --fs-2xl: 1.9375rem; --fs-code: clamp(2rem, 9vw, 3.5rem); --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --lh-tight: 1.2; --lh-body: 1.6; --measure: 34rem; --code-letter-spacing: 0.06em; /* ---- Spacing (4px base) ---- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; /* ---- Sizes ---- */ --target-min: 44px; --target-comfy: 48px; --code-slot-w: clamp(2rem, 8vw, 3rem); --code-slot-h: clamp(2.75rem, 11vw, 4rem); --live-bar-h: 40px; --radar-size: min(78vmin, 34rem); /* ---- Radii: by hierarchy ---- */ --radius-slot: 8px; --radius-control: 12px; --radius-panel: 20px; --radius-toolbar: 999px; /* ---- Shadows (dark UI: depth = shadow + faint glow) ---- */ --shadow-panel: 0 12px 32px rgba(0, 0, 0, 0.45), var(--glass-highlight); --shadow-toolbar: 0 6px 20px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(127, 216, 255, 0.20); --shadow-dialog: 0 24px 64px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(127, 216, 255, 0.30); /* ---- Focus ---- */ --focus-width: 3px; --focus-offset: 2px; --focus-ring: 0 0 0 var(--focus-offset) var(--color-focus-halo), 0 0 0 calc(var(--focus-offset) + var(--focus-width)) var(--color-focus); /* ---- Motion ---- */ --dur-fast: 120ms; --dur-base: 200ms; --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); /* ---- Layers ---- */ --z-video: 0; --z-annot: 10; --z-toolbar: 20; --z-banner: 30; --z-dialog: 40; --z-toast: 50; } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-sweep: 0s; /* components must also set animation: none on the sweep (0s alone is not enough) */ } } @media (prefers-reduced-transparency: reduce) { :root { --glass-bg: var(--c-navy-800); --glass-bg-strong: var(--c-abyss-900); --glass-blur: none; } } /* Focus: use `outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset);` --focus-ring (box-shadow) is only an extra halo; box-shadow disappears in forced-colors mode, outline does not. Glow is decoration: never the only state indicator. */