/* ========================================================================== Stablex Hub — design system. One hand-written stylesheet. No Tailwind, no build step. WHY NO UTILITY FRAMEWORK: in v1, `base.css` loaded after Tailwind and was unlayered, so a shorthand in a `.sx-*` class silently beat any utility the caller applied. Classes looked applied and were dead. Owning the whole vocabulary removes that failure mode entirely. THE LOOK IS THE ORIGINAL MKK APP'S, BY THE OWNER'S CHOICE — values measured from STABLEX_UI_Template/styles.css and the MKK v1.3.0 release: graph-paper page (#f5f6f5 + 48px grid), white cards with a REAL 1px border and a whisper shadow, the red top bar on metric/board cards (warm #ddc9cb frame), red uppercase eyebrows, a 4px red left bar on the hero header, square corners, 42px bordered buttons, and a wine sidebar. Red text is for eyebrows, links and accents; VALUES are ink. WHAT MOVED SINCE, and it is the whole of it: the red is now the company's own #dc0005 rather than the muted #a31820 — vivid where colour is colour, a dark step where colour is text, because the vivid one does not clear 4.5:1 on the page ground. The rail follows it into the same hue. And the graph paper carries a curve: three summed sines in an embedded SVG, on the page, in the hero panel and low in the rail. It does not move. ========================================================================== */ :root { /* * CONTRAST IS A MEASUREMENT, NOT A TASTE. Every value below was measured * against its own background and moved only as far as its floor required. * `bun run check` re-measures them on every run and fails if one slips. * * What was wrong, measured on the shipped palette: * card vs page 1.08:1 - a white card on a #f5f6f5 page is invisible; * the whole screen read as one sheet of paper * card border 1.27:1 - so the edge could not rescue it either * input border 1.50:1 - WCAG 1.4.11 asks 3:1 for a control's own * boundary; a form field had no visible edge * muted text 4.21:1 - under the 4.5:1 floor, and it is the colour * of every hint, card-note and table label * * The MKK language is untouched: cool greys, square corners, a REAL 1px * frame, red for eyebrows and accents only. The frame is simply a line you * can see now instead of one you had to infer. */ /* -- surfaces: graph-paper page, white panels -- */ --surface-page: #e9edf0; --surface: #ffffff; --surface-sunken: #f0f4f7; /* * THE HEAD BAND AND THE GROUP BAND (2026-10-29). Grey bands - even * --surface-sunken - read as the PAGE showing through the pane ("arka * planla aynı"): between the page (#e9edf0) and white there is no grey * the eye tells apart. A cool blue tint differs from the page by hue. * Heads and feet of panes and cards take the light one; a list's group * names ("Hedefleri girin", "1. onayı ver") the stronger one. */ --surface-band-head: #e8eff8; --surface-band-group: #dbe6f2; /* * WHAT A PANEL STANDS ON — and it depends on where the panel is. * * A boş durum kutusu, a kanban column, a help panel: each is a block that * needs a ground of its own. Inside a card it should RECEDE from the card * (--surface-sunken). Directly on the page there is nothing to recede * from, and using the recessed tone there put the block at 1.065 against * the page - measured, and for practical purposes the same colour. On the * page the panel IS the ground, so it takes --surface. * * One variable rather than a pair of rules per class: adding a panel means * adding it to the list below, not remembering to write the override too. * And this deliberately does NOT cover chips, neutral badges or disabled * controls - those need a fill wherever they are, and turning them white * on the page would make a disabled box look enabled. */ --panel-ground: var(--surface); --surface-control: #ffffff; --surface-hover: #e9eef3; --surface-selected: #fbf1f1; --surface-row-alt: #f4f7f9; --surface-row-hover: #e9eef3; --surface-head: color-mix(in srgb, var(--text-body) 6%, var(--surface)); /* * THE CARD'S NAME BAND. Warm on purpose, and the reason is arithmetic: * between the page (#e9edf0, luminance .842) and a white card (1.000) there * is almost no room left, so a GREY band would either vanish into the body * or merge with the page above it. A warm band differs from the cool page * by HUE, which the eye reads at equal lightness - and it is already the * app's own language: the MKK metric and board cards carry a warm frame. * Literal, not color-mix(), so `bun run check` can measure it. */ --surface-band: #fdeceb; /* -- text: the template's ink ramp -- */ --text-body: #182331; --text-secondary: #566475; --text-muted: #606b7a; --text-icon: #84909d; --text-on-accent: #ffffff; /* -- borders: cool hairlines, plus the WARM frame that carries a red top bar (metric tiles, board cards, home tiles - measured #ddc9cb) -- */ /* The graph-paper rule. A token because the grid tile is an embedded SVG and the gate insists every colour written literally inside one has a token equal to it — see the pattern scan in scripts/check.ts. */ --grid-line: #182331; /* * THE PAPER ITSELF, AND THE ONE TOKEN light-dark() CANNOT HOLD. * * light-dark() takes colours, not images, so the two themes' tiles are two * declarations rather than two arguments. Hoisting the URI into a token is * still a net win: the content column and the login screen each carried * their own byte-identical copy, and a copy is a thing that drifts. * * The colour inside is written by hand because a data: URI is a separate * document and cannot read var() -- which is exactly why --grid-line above * exists and why the gate checks every pattern colour against the palette. */ --paper-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 0.5H48M0.5 0V48' stroke='%23182331' stroke-opacity='0.09' stroke-width='1'/%3E%3C/svg%3E"); --border: #ccd5de; --border-subtle: #dde4ea; --border-input: #8b95a1; --border-hover: #687484; --border-warm: #dfbab5; /* * A BUTTON'S EDGE IS A CONTROL BOUNDARY TOO. These were hardcoded * (#cad3dc / #e5c4c6) and measured 1.51:1 and 1.56:1 against their own * fill - the same failure the input borders had, hidden from the gate * because a literal colour is not a token. White and outlined-danger * buttons are most of the buttons in this app. */ --border-button: #8b95a1; --border-danger: #a38b8d; --surface-danger: #fffafa; /* * -- accent: THE HOUSE RED, and it is two colours on purpose -- * * The ramp is the company's own: `--brand: #dc0005` and its dark steps are * declared in the Stablex report editor's token file and used 1581 times * across the original applications, against 267 for the muted #a31820 this * palette used to carry. #dc0005 is the red people here mean. * * IT CANNOT BE THE TEXT COLOUR. Measured against the three grounds text is * read on, #dc0005 is 5.19:1 on white, 4.41:1 on the page and 4.60:1 on the * band — it fails WCAG 1.4.3 on the page, which is where every eyebrow, note * and section caption sits. The brand red published on the web (#e0362a) is * worse: 4.44 / 3.77 / 3.94, failing on all three. * * So the vivid tone does the work colour is actually for — bars, fills, * strips, the button people press — and TEXT takes the ramp's own dark step * `--brand-700` (#b00004, 6.26:1 at its worst). Both are the same red; only * the lightness differs, which is exactly what a ramp is for. * * White on the filled button measures 5.19:1. That pair is now IN the gate * (scripts/check.ts) rather than trusted, because a vivid fill is precisely * the one that can drift under the floor without anybody seeing it. */ --accent: #e0362a; --accent-solid: #d12b20; --accent-hover: #b91c1c; --accent-active: #97160f; --accent-text: #b91c1c; --accent-tint: #fce3e0; /* * The focus ring. It was the hover ring too, written twice as a literal * `rgba(163, 24, 32, .28)` — so when the accent moved the rings did not, * the drift a named colour exists to stop. Hover now draws a soft glow from * `--accent` directly (see `a.tile:hover`); what stays here is the ring a * KEYBOARD needs, where a crisp edge is the point and a glow would be * worse than useless. */ --accent-ring: rgba(224, 54, 42, .32); /* * -- department colours (home tile top bars and chips) -- * * Muhasebe is the Excel green, because the department's own tool is an * Excel studio. Hukuk is visne curugu, the claret on a Turkish judge's * robe - the bar's own green was the other candidate and Muhasebe has * it. Every one of these is also TEXT on the tile's foot line, so all * of them are measured by the contrast scan against the card surface * in both palettes. --dept-general is the exception and it is written * down there, not here. */ --dept-general: #e0362a; --dept-finance: #6d4aa8; --dept-treasury: #0f6cbd; --dept-marketing: #a92a7f; --dept-accounting:#217346; --dept-legal: #6e1b32; /* -- chart series: one colour per compared thing (charts.ts columnChart). The volume screens compare three exchanges; these are the original application's colours for them, blue / bordeaux / yellow. -- */ --series-1: #2563eb; --series-2: #7e1820; --series-3: #d4a106; /* -- semantic (greens/oranges from the template) -- */ /* * GREEN IS TWO COLOURS FOR THE REASON RED IS TWO COLOURS. * * White on --ok measures 3.81:1 - under the 4.5 floor - and it was * painted that way on the finished board card. The gate could not see * it because the white was a literal in a rule, not a token, so the * pair was never in the list. --ok stays where colour is colour * (borders, legends, dots); --ok-solid (5.35:1) is for anything * carrying white text. Exactly the --accent / --accent-solid split. */ --ok: #159565; --ok-tint: #e4f6ef; --ok-text: #116e4a; --ok-solid: #0f7a52; --warn: #aa6612; --warn-tint: #fff4df; --warn-text: #8a530e; --error: #9d1d25; --error-tint: #fdf3f3; --error-text: #841219; --info: #0f6cbd; --info-tint: #ecf3fa; --info-text: #0b4e88; /* -- geometry: SOFT. Controls 6px, small marks 4px, panels 10px; only avatars, icon discs, dots and counts are round (see the end). -- */ --radius: 6px; --radius-sm: 4px; --radius-lg: 10px; --radius-full: 9999px; --accent-bar: 3px; /* -- rhythm and sizing -- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-12: 48px; /* * MEASURED DENSITY. Three of these five moved and two did not, and the * split is the point. * * NN/g measured sparse against dense pages of the same content: dense * (~8-14 items per screen, 17% whitespace) beat sparse (<7 items, 30%) * on findability AND on perceived transparency. Carbon's row scale is * Compact 24 / Short 32 / Default 48; at 14px body text Short is the * right rung, and 34px keeps a small control flush inside a cell. * Atlassian's between-components band is 12-24px, so 16 sits mid-band. * * `--control-h` and `--card-p` are NOT ours to tune: 42px buttons and * 22px card padding are measured off the original MKK application, which * is the stated reference. Compactness comes out of the * gaps BETWEEN things, never out of the anatomy of a card. */ --row-h: 34px; --control-h: 42px; --control-h-sm: 34px; --card-p: 22px; --rhythm: 16px; --sidebar-w: 278px; --shell-max: 99rem; /* -- sidebar: the template's wine, flat -- */ /* * THE RAIL IS THE SAME RED AS THE ACCENT, JUST DARKER. * * It used to be #4e0c11 — a brown-leaning wine, drawn from the old muted * accent. Beside the new #dc0005 the two read as two different brands: one * warm and earthy, one pure red, and the eye reads a hue disagreement long * before it can name it. * * #5a0206 is the same hue family at the SAME WEIGHT: relative luminance * .0223 against the old .0192, white text 14.5:1 against 15.2:1. So nothing * about the rail's presence on the page changes — only which red it is. */ /* * MARKS AND METERS: colours that were living in rules instead of here. * * Nine coin chips, a meter segment and the danger button's hover edge were * written as literals down in the stylesheet. That is the drift to watch * for -- a colour the palette names, written by hand somewhere the * palette cannot reach -- and it is also why none of them was ever * measured: the contrast gate reads TOKENS. Named here, they are checked * (white sits on every coin chip) and they follow the theme. */ --border-danger-hover: #85686a; --meter-on: #48566a; --coin-1: #1f3a5f; --coin-2: #2f5d50; --coin-3: #6b4423; --coin-4: #3d3a5c; --coin-5: #5c5230; --coin-6: #24505c; --coin-7: #57304a; --coin-8: #3f4a2a; --coin-9: #45444a; /* * THE THEME PREVIEW CHIPS, AND WHY THESE FOUR DO NOT FOLLOW THE THEME. * * Every other colour here has a dark twin. These deliberately do not: a * chip showing what the LIGHT theme looks like has to stay light while the * reader is standing in the dark one, or the preview previews nothing. * They are tokens rather than literals so they are still greppable, still * in the palette, and still move as one if the two themes are ever * recalibrated. */ --chip-light-page: #e9edf0; --chip-light-card: #ffffff; --chip-dark-page: #0e141b; --chip-dark-card: #1b2430; --sidebar-bg: #8c1a12; --sidebar-bg-deep: #6d1310; /* -- type -- */ --font-sans: "Segoe UI", Inter, system-ui, -apple-system, Arial, sans-serif; --font-mono: Consolas, "Cascadia Mono", ui-monospace, monospace; /* ONE STEP UP (2026-10-28): "çok minnak, incik cincik" - read by people past forty on office screens, the smallest text is 12px and the body 15px. */ --fs-2xs: .75rem; --fs-xs: .8125rem; --fs-sm: .875rem; --fs-base: .9375rem; --fs-md: 1rem; --fs-lg: 1.0625rem; --fs-xl: 1.3125rem; --fs-2xl: 1.5625rem; --fs-3xl: 1.8125rem; /* -- shadows: a whisper on panels, drama only on hover lift -- */ --shadow-card: 0 1px 2px rgba(15, 23, 42, .04); --shadow-lift: 0 12px 24px rgba(120, 22, 15, .14); --shadow-overlay: 0 24px 56px rgba(15, 23, 42, .18), 0 4px 12px rgba(15, 23, 42, .08); /* THE KEYBOARD RING IS TWO COLOURS, BECAUSE IT LANDS ON TWO SURFACES. Ink on paper measures 11.90:1 on the page and 14.01:1 on a card. The same ink on the red rail measures 1.52:1 — half of WCAG 1.4.11's 3:1 floor for a focus indicator, which is to say it was there and could not be seen. White on the rail measures 9.24:1 (8.03 hovered, 7.48 on the current page). Both are in the gate now; neither was before. */ --focus-ring: #2c2b32; --focus-ring-rail: #ffffff; --speed: 140ms; } /* ========================================================================== THE SECOND PALETTE, AND WHY IT IS ONE LINE PER TOKEN Every colour above is repeated here with its dark twin beside it. Two values on one line rather than a second block, and the reasons are mechanical rather than aesthetic. FOLLOWING THE SYSTEM COSTS NOTHING. `color-scheme: light dark` makes light-dark() resolve off the reader's operating system, so "sistem" is the absence of a choice rather than a third code path. A stored choice wins on specificity alone -- :root[data-theme] beats :root -- with no ordering to get right and no !important anywhere. AND THE GATE CAN SEE IT. `bun run check` harvests the plain block above for the light palette and this one for the dark, then runs the SAME rule list twice. A second `[data-theme]` block would have been invisible to it: the harvest keeps the first definition of each name, so every ratio would have kept measuring the light palette while the dark one shipped unmeasured. That is the failure this shape exists to prevent. @supports IS THE SAFETY NET. A browser without light-dark() drops this whole block and gets exactly what shipped before -- light, and correct. Without the guard an unparseable declaration would leave var(--surface) unresolved and the page would render with no colours at all. The floor this raises is not new either: the stylesheet already needs color-mix() and :has(), both older than light-dark(). The light value is now written twice, and that is the one thing that can drift -- so the gate asserts light-dark()'s FIRST argument equals the plain declaration above. Mechanical, exact, and it cannot be forgotten. ========================================================================== */ /* * THE TYPEFACE, AS FOUR ALTERNATIVES TO THE ONE ABOVE. * * Only `--font-sans` moves. `--font-mono` stays where it is: every number * column in the application is set in it with tabular figures, and the * contract screen's own faces (.ctr-font-*) describe somebody else's Word * document rather than this interface. * * NO FILE IS FETCHED. All five ship with Windows, which is where this hub * is read; the policy blocks an outside font host (`font-src 'self'`) and * the asset pipeline carries text, not bytes. Each stack names a fallback * for a machine that lacks the first choice, ending at the family the * default already trusts. * * THE SWATCH CARRIES THE ATTRIBUTE TOO, exactly as the colour swatch does, * so a sample of the face is drawn in the face itself. */ [data-font="calibri"] { --font-sans: Calibri, Carlito, "Segoe UI", system-ui, sans-serif; } [data-font="corbel"] { --font-sans: Corbel, "Segoe UI", system-ui, sans-serif; } [data-font="tahoma"] { --font-sans: Tahoma, Verdana, "DejaVu Sans", sans-serif; } [data-font="cambria"] { --font-sans: Cambria, Georgia, "Times New Roman", serif; } /* The default, written down so the preview swatch can wear it: `:root` already carries the same stack and the gate measures that they agree. */ [data-font="segoe"] { --font-sans: "Segoe UI", Inter, system-ui, -apple-system, Arial, sans-serif; } /* A sample of the face, in the face. Sized like a control so the five rows line up whatever the letters do. */ .font-chip { flex: none; display: grid; place-items: center; min-width: 96px; height: 36px; padding: 0 10px; border: 1px solid var(--border); background: var(--surface-sunken); font-family: var(--font-sans); font-size: var(--fs-md); color: var(--text-body); } @supports (color: light-dark(#000000, #ffffff)) { :root { color-scheme: light dark; --surface-page: light-dark(#e9edf0, #0e141b); --surface: light-dark(#ffffff, #1b2430); /* Koyu cukur yuzey kartla 1.096 idi — tabanin tam ustunde duruyordu. #0f1620 ile 1.161; uzerindeki soluk yazi 8.23'ten 8.72'ye cikiyor. Zeminle arasi daralıyor ama artik sayfanin uzerinde duran paneller --surface kullaniyor, yani o mesafe olculen sey degil. */ --surface-sunken: light-dark(#f0f4f7, #0f1620); --surface-band-head: light-dark(#e8eff8, #243246); --surface-band-group: light-dark(#dbe6f2, #2e4360); --surface-control: light-dark(#ffffff, #1b2430); --surface-hover: light-dark(#e9eef3, #243040); --surface-selected: light-dark(#fbf1f1, #301f21); --surface-row-alt: light-dark(#f4f7f9, #1f2934); --surface-row-hover: light-dark(#e9eef3, #243040); /* Koyu bant #2d2123 iken kartla arasi 1.009 idi — yani bant diye bir sey yoktu. #3f2b2e ile 1.19; ustundeki en soluk yazi hala 6.31. */ --surface-band: light-dark(#fdeceb, #3f2b2e); --text-body: light-dark(#182331, #e8eef4); --text-secondary: light-dark(#566475, #b6c2cf); --text-muted: light-dark(#606b7a, #a9b5c2); --text-icon: light-dark(#84909d, #8593a2); --text-on-accent: light-dark(#ffffff, #ffffff); --grid-line: light-dark(#182331, #c8d6e4); --border: light-dark(#ccd5de, #3a4655); --border-subtle: light-dark(#dde4ea, #2c3743); --border-input: light-dark(#8b95a1, #6f7d8c); --border-hover: light-dark(#687484, #93a1b0); --border-warm: light-dark(#dfbab5, #6d4c4c); --border-button: light-dark(#8b95a1, #6f7d8c); --border-danger: light-dark(#a38b8d, #8d6162); --surface-danger: light-dark(#fffafa, #261c1d); --accent: light-dark(#e0362a, #e0362a); --accent-solid: light-dark(#d12b20, #d12b20); --accent-hover: light-dark(#b91c1c, #b91c1c); --accent-active: light-dark(#97160f, #97160f); --accent-text: light-dark(#b91c1c, #f2897f); --accent-tint: light-dark(#fce3e0, #3c2120); --dept-general: light-dark(#e0362a, #e0362a); --dept-finance: light-dark(#6d4aa8, #a58bdd); --dept-treasury: light-dark(#0f6cbd, #4a9de0); --dept-marketing: light-dark(#a92a7f, #d47ab5); --dept-accounting: light-dark(#217346, #3f9e6d); --dept-legal: light-dark(#6e1b32, #cf7f97); --series-1: light-dark(#2563eb, #6b9cf5); --series-2: light-dark(#7e1820, #d9687a); --series-3: light-dark(#d4a106, #eab308); --ok: light-dark(#159565, #159565); --ok-solid: light-dark(#0f7a52, #0f7a52); --ok-tint: light-dark(#e4f6ef, #11261f); --ok-text: light-dark(#116e4a, #5fd7a4); --warn: light-dark(#aa6612, #aa6612); --warn-tint: light-dark(#fff4df, #2c2110); --warn-text: light-dark(#8a530e, #f0b45c); --error: light-dark(#9d1d25, #9d1d25); --error-tint: light-dark(#fdf3f3, #2e1618); --error-text: light-dark(#841219, #f39191); --info: light-dark(#0f6cbd, #0f6cbd); --info-tint: light-dark(#ecf3fa, #102435); --info-text: light-dark(#0b4e88, #7cbdf0); --sidebar-bg: light-dark(#8c1a12, #71140e); --sidebar-bg-deep: light-dark(#6d1310, #530f0a); --focus-ring: light-dark(#2c2b32, #e2e9f1); --focus-ring-rail: light-dark(#ffffff, #ffffff); --border-danger-hover: light-dark(#85686a, #a97374); --meter-on: light-dark(#48566a, #93a3b8); --coin-1: light-dark(#1f3a5f, #3f75c0); --coin-2: light-dark(#2f5d50, #41806e); --coin-3: light-dark(#6b4423, #a36735); --coin-4: light-dark(#3d3a5c, #736dad); --coin-5: light-dark(#5c5230, #837444); --coin-6: light-dark(#24505c, #397e90); --coin-7: light-dark(#57304a, #a75c8e); --coin-8: light-dark(#3f4a2a, #697b46); --coin-9: light-dark(#45444a, #75747e); } /* The stored choice, and the only thing it has to do is pin the scheme: every light-dark() above resolves from it. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* * THE INTERFACE COLOUR, AS FOUR COMPLETE SETS. * * Stablex red is `:root` above and needs no block; these are the * alternatives a person can pick on the preferences screen. Each one * replaces the WHOLE accent family - the fill, its hover and active * steps, the text grade, the tint a badge sits on, the focus ring, the * rail and the warm band - because half a family is a screen where the * button moved and the rail did not. * * AND EVERY ONE OF THEM IS MEASURED. `bun run check` harvests these * blocks by name and runs the SAME rule list over each preset in both * palettes: white on the fill, the text grade on three surfaces, the * badge on its own tint, the rail under the whole menu. A colour that * cannot be read cannot be offered, because the gate will not let it * be written down. * * They live INSIDE the light-dark() guard on purpose: a browser too * old for it gets the brand palette, which is correct and is what * shipped before there was a choice. */ /* * THE BRAND, WRITTEN DOWN AS A PRESET TOO - and it has to be. * * :root already carries these values, so this block changes nothing on * . It exists for the SWATCH: the preview chip * re-scopes the tokens by carrying the attribute itself, and the Stablex * chip carried none - so on a hub wearing Mor it inherited Mor and the * "Stablex" swatch was purple. A swatch that shows the wrong colour is * worse than no swatch. * * THE BRAND IS NOW IN TWO PLACES, so the gate measures that they agree: * `bun run check` compares this block against :root value by value. That * is the only reason this duplication is allowed to exist. */ [data-accent="stablex"] { --accent: light-dark(#e0362a, #e0362a); --accent-solid: light-dark(#d12b20, #d12b20); --accent-hover: light-dark(#b91c1c, #b91c1c); --accent-active: light-dark(#97160f, #97160f); --accent-text: light-dark(#b91c1c, #f2897f); --accent-tint: light-dark(#fce3e0, #3c2120); --accent-ring: light-dark(rgba(224, 54, 42, .32), rgba(224, 54, 42, .38)); --sidebar-bg: light-dark(#8c1a12, #71140e); --sidebar-bg-deep: light-dark(#6d1310, #530f0a); --surface-band: light-dark(#fdeceb, #3f2b2e); } [data-accent="lacivert"] { --accent: light-dark(#2563eb, #3b82f6); --accent-solid: light-dark(#1d4ed8, #1d4ed8); --accent-hover: light-dark(#1e40af, #1e40af); --accent-active: light-dark(#1e3a8a, #1e3a8a); --accent-text: light-dark(#1d4ed8, #9dbafc); --accent-tint: light-dark(#e5edfd, #1b2a48); --accent-ring: light-dark(rgba(37, 99, 235, .32), rgba(59, 130, 246, .38)); --sidebar-bg: light-dark(#1e3a8a, #16306f); --sidebar-bg-deep: light-dark(#172c68, #102250); --surface-band: light-dark(#eaf0fd, #25334d); } [data-accent="zumrut"] { --accent: light-dark(#059669, #10b981); --accent-solid: light-dark(#047857, #047857); --accent-hover: light-dark(#065f46, #065f46); --accent-active: light-dark(#064e3b, #064e3b); --accent-text: light-dark(#047857, #6ee7b7); --accent-tint: light-dark(#dcf5e9, #10291f); --accent-ring: light-dark(rgba(5, 150, 105, .32), rgba(16, 185, 129, .38)); --sidebar-bg: light-dark(#065f46, #054e3a); --sidebar-bg-deep: light-dark(#044a36, #03372a); --surface-band: light-dark(#e6f6ee, #203a31); } [data-accent="mor"] { --accent: light-dark(#7c3aed, #8b5cf6); --accent-solid: light-dark(#6d28d9, #6d28d9); --accent-hover: light-dark(#5b21b6, #5b21b6); --accent-active: light-dark(#4c1d95, #4c1d95); --accent-text: light-dark(#6d28d9, #c4b5fd); --accent-tint: light-dark(#eee9fe, #2a2141); --accent-ring: light-dark(rgba(124, 58, 237, .32), rgba(139, 92, 246, .38)); --sidebar-bg: light-dark(#4c1d95, #3f1880); --sidebar-bg-deep: light-dark(#3b1676, #2d1160); --surface-band: light-dark(#f1ecfe, #332b4a); } [data-accent="antrasit"] { --accent: light-dark(#475569, #64748b); --accent-solid: light-dark(#334155, #334155); --accent-hover: light-dark(#1e293b, #1e293b); --accent-active: light-dark(#0f172a, #0f172a); --accent-text: light-dark(#334155, #cbd5e1); --accent-tint: light-dark(#e8edf3, #232c39); --accent-ring: light-dark(rgba(71, 85, 105, .32), rgba(100, 116, 139, .38)); --sidebar-bg: light-dark(#1e293b, #16202e); --sidebar-bg-deep: light-dark(#0f172a, #0c131d); --surface-band: light-dark(#eef2f6, #2c3644); } /* PAPER IS WHITE WHATEVER THE SCREEN IS. Printing a dark theme puts pale ink on white paper and the page comes out looking empty -- one line here themes all of it, because every token resolves from the scheme. */ @media print { :root { color-scheme: light; } } } /* The paper drawn in light ink. Same geometry, same opacity, same half-pixel inset that took five rounds to settle -- only the colour moves, and it is --grid-line's dark value so the pattern scan still recognises it. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 0.5H48M0.5 0V48' stroke='%23c8d6e4' stroke-opacity='0.09' stroke-width='1'/%3E%3C/svg%3E"); } } :root[data-theme="dark"] { --paper-tile: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cpath d='M0 0.5H48M0.5 0V48' stroke='%23c8d6e4' stroke-opacity='0.09' stroke-width='1'/%3E%3C/svg%3E"); } /* ========================================================================== MOTION OFF, AS A READER'S CHOICE The six `prefers-reduced-motion` blocks in this file stay exactly as they are and keep serving the OPERATING SYSTEM's request. This is the separate switch on the preferences screen, and it is one rule rather than a seventh copy of six tuned blocks. THERE IS DELIBERATELY NO "ON" THAT DEFEATS THE SYSTEM SETTING. A reader whose computer asks for reduced motion gets it whatever this preference says. An application preference may add restraint; it may not remove an accessibility setting the person made once, for every program they use. `animation-duration: 1ms` rather than `animation: none`, and the difference matters in one place: the toast is `toast-in … , toast-out 400ms ease-in 7s forwards`. Killing the animation would kill the 7-second DELAY with it and the notification would sit on screen forever. Shortened, the delay survives and the message still clears itself -- which is exactly what the block at the toast's own reduced-motion rule already does by hand. Traced through every keyframe in this file: `enter` ends at opacity 1 (`both` fill), `spin` stops, `hero-drift` parks at -900px which is one full tile of a 900px repeat-x pattern -- visually identical, and the reason 900 was chosen. Only `progress-slide` needed a companion rule below: shortened, its 40%-wide bar parks at translateX(350%), i.e. off screen, and the progress feedback would silently disappear. ========================================================================== */ :root[data-motion="off"] *, :root[data-motion="off"] *::before, :root[data-motion="off"] *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; } /* The bar still has to say "something is happening" - the same shape the system-level rule already chose. */ :root[data-motion="off"] .progress.is-active::before { animation: none; width: 100%; opacity: .6; } /* -- reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } /* A CLASSED LIST STARTS AT ITS CARD'S EDGE. The line above clears margins, not the 40px start padding a browser gives every