/* slip — the application theme. dineraya.com is built as a European bank transfer slip: a dark ledger ground, one pale giro sheet, printed rules, boxed character cells, giro green, one vermilion strike. That is a Persuade surface and it commits hard, because its whole job is to be looked at. This is the same world at a fraction of the volume, because these apps are Operate surfaces: a merchant reading their own payments, a buyer confirming money leaving their account. Expression here may never obscure the task, so the world survives as material and geometry rather than as performance — - the giro paper as the page, not as an object on a page - printed rules rather than card borders and shadows - square corners, because the slip is drawn in boxes - giro green as the one thing that means "this does something" - B612 Mono for figures, references and account data, which on these screens is most of what matters - vermilion kept for one job only: things that went wrong What is deliberately left behind: the dark ground as default, the struck stamp, the paper fibre, the settle animation, the serial and the machine-readable foot line. Those are the front door's costume. An interface a merchant uses forty times a day should not perform. Structure lives in tokens.css; this file is colour, type and shape. ── One block, both schemes ─────────────────────────────────────────── Every token is declared once as light-dark(, ) under a single :root that sets color-scheme: light dark, so there is no second copy of the palette to keep in sync and no way to author dark half-done. The two rules at the bottom are the whole toggle. Tokens with one value in both schemes are written plain, because light-dark(x, x) says nothing twice. light-dark() is a colour function: it may only stand where a is expected, so a shadow token wraps its colour and writes the geometry outside the call. ── The shape axis ──────────────────────────────────────────────────── Square, or nearly. The slip is drawn entirely in boxes and printed rules, and its DESIGN.md records Square-Corner as a rule of the world. 2px rather than 0 is the one concession: at 0 a dense table of controls reads as harsh rather than as precise, and precision is the point. Depth comes from rules, not from shadows — the two shadows that remain are for things that genuinely float above the page. ── WCAG 2.2 AA, measured ───────────────────────────────────────────── Normal text needs 4.5:1; large text and UI component boundaries need 3:1. Every pair below was computed from these exact hex values, in both schemes. If you change a token, recompute its rows. LIGHT ratio requirement --rst-text on --rst-surface 15.75 4.5:1 text --rst-text on --rst-bg 14.58 4.5:1 text --rst-text on --rst-surface-2 13.56 4.5:1 text --rst-text on --rst-accent-soft 13.61 4.5:1 text --rst-text-muted on --rst-surface 7.35 4.5:1 text --rst-text-muted on --rst-bg 6.80 4.5:1 text --rst-text-muted on --rst-surface-2 6.33 4.5:1 text --rst-text-muted on --rst-accent-soft 6.35 4.5:1 text --rst-text-faint on --rst-surface 5.73 4.5:1 text --rst-text-faint on --rst-bg 5.31 4.5:1 text --rst-text-faint on --rst-surface-2 4.94 4.5:1 text --rst-text-faint on --rst-accent-soft 4.96 4.5:1 text --rst-accent on --rst-surface 7.75 4.5:1 text + focus ring --rst-accent on --rst-bg 7.17 4.5:1 text + focus ring --rst-accent on --rst-surface-2 6.67 4.5:1 text --rst-accent on --rst-accent-soft 6.70 4.5:1 text --rst-on-accent on --rst-accent 7.75 4.5:1 button label --rst-on-accent on --rst-accent-strong 10.65 4.5:1 button label, hover --rst-line-strong on --rst-surface 3.63 3:1 control border --rst-line-strong on --rst-bg 3.36 3:1 control border --rst-line-strong on --rst-surface-2 3.12 3:1 control border pill neutral fg on its own tint 8.84 4.5:1 text pill positive fg on its own tint 7.57 4.5:1 text pill warning fg on its own tint 6.10 4.5:1 text pill negative fg on its own tint 6.10 4.5:1 text --rst-on-accent on negative fg (fill) 7.48 4.5:1 danger button label DARK ratio requirement --rst-text on --rst-surface 13.17 4.5:1 text --rst-text on --rst-bg 14.59 4.5:1 text --rst-text on --rst-surface-2 13.97 4.5:1 text --rst-text on --rst-accent-soft 12.15 4.5:1 text --rst-text-muted on --rst-surface 6.76 4.5:1 text --rst-text-muted on --rst-bg 7.49 4.5:1 text --rst-text-muted on --rst-surface-2 7.17 4.5:1 text --rst-text-muted on --rst-accent-soft 6.23 4.5:1 text --rst-text-faint on --rst-surface 5.56 4.5:1 text --rst-text-faint on --rst-bg 6.15 4.5:1 text --rst-text-faint on --rst-surface-2 5.89 4.5:1 text --rst-text-faint on --rst-accent-soft 5.12 4.5:1 text --rst-accent on --rst-surface 8.21 4.5:1 text + focus ring --rst-accent on --rst-bg 9.09 4.5:1 text + focus ring --rst-accent on --rst-surface-2 8.71 4.5:1 text --rst-accent on --rst-accent-soft 7.57 4.5:1 text --rst-on-accent on --rst-accent 9.36 4.5:1 button label --rst-on-accent on --rst-accent-strong 11.99 4.5:1 button label, hover --rst-line-strong on --rst-surface 4.30 3:1 control border --rst-line-strong on --rst-bg 4.76 3:1 control border --rst-line-strong on --rst-surface-2 4.55 3:1 control border pill neutral fg on its own tint 7.93 4.5:1 text pill positive fg on its own tint 9.64 4.5:1 text pill warning fg on its own tint 8.55 4.5:1 text pill negative fg on its own tint 7.60 4.5:1 text --rst-on-accent on negative fg (fill) 8.85 4.5:1 danger button label The tightest pair in the set is --rst-line-strong on --rst-surface-2 in light, at 3.12:1 against a 3:1 floor. Put a token on a surface not listed above and you are guessing; recompute first. --rst-line is a hairline divider between rows, not a control border, so 1.4.11's 3:1 does not apply to it. Control borders use --rst-line-strong, which does clear 3:1. --rst-header-rule is decoration and carries no floor. The shadow and overlay tokens paint translucency over unknown backgrounds, so a ratio does not apply. ──────────────────────────────────────────────────────────────────── */ /* The two faces, self-hosted. No app of ours asks a third party for type at runtime, least of all one handling payments. Archivo is a grotesque with administrative character — the voice of forms and official print rather than of software marketing. B612 Mono was drawn for cockpit instrument displays, where a figure misread is a real problem; here it sets amounts, references, IBAN fragments and receipt numbers. That is measurement, not monospace worn as a costume. */ @font-face { font-family: "Archivo"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/archivo-400.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 500; font-display: swap; src: url("./fonts/archivo-500.woff2") format("woff2"); } @font-face { font-family: "Archivo"; font-style: normal; font-weight: 600; font-display: swap; src: url("./fonts/archivo-600.woff2") format("woff2"); } @font-face { font-family: "B612 Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("./fonts/b612-mono-400.woff2") format("woff2"); } @font-face { font-family: "B612 Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("./fonts/b612-mono-700.woff2") format("woff2"); } :root { color-scheme: light dark; --rst-font: "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* The figure face. Amounts, references, account fragments, receipt numbers, timestamps — anything a person might read out loud or check against another document. */ --rst-font-mono: "B612 Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* Shape: square, or as near as a dense interface can bear. */ --rst-radius: 2px; --rst-radius-sm: 2px; --rst-radius-pill: 2px; /* Surfaces and lines. Light is giro paper — warm, never white, and lighter than the front door's sheet because this one is read for minutes at a time rather than glanced at. Dark is the ledger ground the front door stands on. */ --rst-bg: light-dark(#F6F2E9, #0E1512); --rst-surface: light-dark(#FDFBF6, #16201B); --rst-surface-2: light-dark(#EFEADD, #121A16); --rst-line: light-dark(#DCD5C4, #26332C); --rst-line-strong: light-dark(#8C8371, #75857B); --rst-header-rule: color-mix(in oklab, var(--rst-accent) 18%, var(--rst-line)); /* Text, tinted from the paper's own hue rather than greyed. A neutral grey on a warm ground reads as dirt. */ --rst-text: light-dark(#22201A, #E9E4D8); --rst-text-muted: light-dark(#5A5347, #A8A597); --rst-text-faint: light-dark(#6B6355, #97958A); /* Giro green: the one colour that means "this does something". */ --rst-accent: light-dark(#0F5C3E, #6FC79B); --rst-accent-strong: light-dark(#0A4530, #96DCB8); --rst-accent-soft: light-dark(#E4EDE6, #12291F); --rst-on-accent: light-dark(#FDFBF6, #08120D); /* Status. Positive is a quieter cousin of the accent rather than a second green fighting it; negative is the front door's vermilion, which on these screens means exactly one thing: this went wrong. */ --rst-tone-neutral-fg: light-dark(#3E3A31, #C4C2B6); --rst-tone-neutral-bg: light-dark(#E8E3D6, #242D27); --rst-tone-positive-fg: light-dark(#12503A, #7FD9AA); --rst-tone-positive-bg: light-dark(#DDEADF, #0F2419); --rst-tone-warning-fg: light-dark(#7A4A12, #E2B872); --rst-tone-warning-bg: light-dark(#F4E7CE, #2A2113); --rst-tone-negative-fg: light-dark(#9A2A15, #EE9C8A); --rst-tone-negative-bg: light-dark(#F5E0DA, #301A15); /* Depth: almost none. Structure is carried by printed rules, the way it is on the paper this world comes from. What is left is for things that genuinely float — a menu, a dialog, a switch knob. */ --rst-shadow-pop: 0 10px 28px -12px light-dark(rgba(34, 32, 26, 0.34), rgba(0, 0, 0, 0.62)); --rst-shadow-knob: 0 1px 2px rgba(0, 0, 0, 0.32); --rst-shadow-lift: 0 1px 0 light-dark(rgba(34, 32, 26, 0.07), rgba(0, 0, 0, 0.4)); --rst-overlay: light-dark(rgba(34, 32, 26, 0.42), rgba(0, 0, 0, 0.62)); } /* The whole toggle. Setting color-scheme re-resolves every light-dark() above, so an explicit choice beats the OS in both directions without restating a colour. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } /* ── The world's two carried details ───────────────────────────────── Everything above is palette and shape. These two rules are the only place the slip's own grammar is stated, and they are here rather than in a page's stylesheet because both apps need them. */ /* Figures are set in the instrument face and aligned in columns, so a list of amounts can be scanned down rather than read across. Applied by element rather than by class: ,