/* ============================================================ TubeLog Studio — design tokens Licht thema = standaard; donker via . Kleuren volgen het gevalideerde dataviz-referentiepalet (CVD-gecontroleerd; zie ontwerpplan). ============================================================ */ @font-face { font-family: "Inter var"; src: url("../vendor/inter/InterVariable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "Inter var"; src: url("../vendor/inter/InterVariable-Italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; } :root { /* ---- typografie ---- */ --font-ui: "Inter var", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "Cascadia Code", Consolas, monospace; --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.8125rem; /* 13px */ --fs-md: 0.875rem; /* 14px — basis */ --fs-lg: 1rem; --fs-xl: 1.25rem; --fs-2xl: 1.625rem; --fs-hero: 2.25rem; /* ---- maatvoering ---- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-8: 3rem; --rad-sm: 6px; --rad-md: 10px; --rad-lg: 14px; --rad-pill: 999px; --sidebar-w: 232px; --sidebar-w-min: 64px; --header-h: 56px; /* ---- z-lagen ---- */ --z-header: 40; --z-dropdown: 50; --z-toast: 90; --z-modal: 100; /* ---- oppervlakken & inkt (licht) ---- */ --page: #f9f9f7; --surface: #fcfcfb; --surface-2: #f3f2ef; /* verdiept: input-achtergrond, hover */ --ink: #0b0b0b; --ink-2: #52514e; --ink-mut: #898781; --grid: #e1e0d9; /* hairline gridlijnen */ --axis: #c3c2b7; --border: rgba(11, 11, 11, 0.10); --shadow: 0 1px 2px rgba(11,11,11,.05), 0 4px 16px rgba(11,11,11,.06); --shadow-lg: 0 4px 12px rgba(11,11,11,.10), 0 16px 48px rgba(11,11,11,.14); --scrim: rgba(11, 11, 11, 0.42); /* ---- merk / accent ---- */ --acc: #256abf; /* knoppen, links, actieve nav */ --acc-hover: #1c5cab; --acc-ink: #ffffff; /* tekst op accent */ --acc-wash: rgba(42, 120, 214, 0.10); --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px #5598e7; /* ---- statuskleuren (vast; nooit als serie gebruiken) ---- */ --ok: #0ca30c; --warn: #fab219; --serious: #ec835a; --crit: #d03b3b; --ok-text: #006300; /* leesbare variant op licht vlak */ --crit-text: #b32020; /* ---- datavis: entiteitskleuren (kleur volgt de grootheid) ---- */ --viz-gmag: #2a78d6; /* |g| — blauw */ --viz-ax: #1baf7a; /* X — aqua */ --viz-ay: #4a3aa7; /* Y — violet */ --viz-az: #eb6834; /* Z — oranje */ --viz-temp: #e34948; /* temperatuur — rood */ --viz-lux: #eda100; /* licht — geel */ --viz-band-info: rgba(137, 135, 129, 0.16); --viz-band-notice: rgba(42, 120, 214, 0.14); --viz-band-warn: rgba(250, 178, 25, 0.20); --viz-band-crit: rgba(208, 59, 59, 0.16); /* ---- events / severity-inkt ---- */ --sev-info: var(--ink-mut); --sev-notice: #256abf; --sev-warn: #b47800; --sev-crit: #b32020; color-scheme: light; } :root[data-theme="dark"] { --page: #0d0d0d; --surface: #1a1a19; --surface-2: #242423; --ink: #ffffff; --ink-2: #c3c2b7; --ink-mut: #898781; --grid: #2c2c2a; --axis: #383835; --border: rgba(255, 255, 255, 0.10); --shadow: 0 1px 2px rgba(0,0,0,.35), 0 4px 16px rgba(0,0,0,.35); --shadow-lg: 0 4px 12px rgba(0,0,0,.45), 0 16px 48px rgba(0,0,0,.5); --scrim: rgba(0, 0, 0, 0.55); --acc: #3987e5; --acc-hover: #5598e7; --acc-ink: #0b0b0b; --acc-wash: rgba(57, 135, 229, 0.16); --focus-ring: 0 0 0 2px var(--surface), 0 0 0 4px #2a78d6; --ok-text: #0ca30c; --crit-text: #e66767; --viz-gmag: #3987e5; --viz-ax: #199e70; --viz-ay: #9085e9; --viz-az: #d95926; --viz-temp: #e66767; --viz-lux: #c98500; --viz-band-info: rgba(137, 135, 129, 0.22); --viz-band-notice: rgba(57, 135, 229, 0.20); --viz-band-warn: rgba(250, 178, 25, 0.16); --viz-band-crit: rgba(208, 59, 59, 0.24); --sev-notice: #5598e7; --sev-warn: #fab219; --sev-crit: #e66767; color-scheme: dark; }