/* =================================================================== Folio — Design Tokens Direction: "Proof" — a proofing bench, not a form. Warm paper, cool ink. The tension between the two is the identity: most interfaces pair warm with warm or cool with cool. Here a saturated blue sits on an ecru sheet the way a pen sits on paper. Every legacy variable name still resolves, so existing CSS inherits the new identity without a single rule being rewritten. =================================================================== */ :root { /* =============================================================== Palette — warm neutral ramp, one hue family (~42°), low chroma =============================================================== */ --paper: #FAF9F6; /* the sheet */ --paper-raised: #FFFFFF; /* something lifted off the sheet */ --surface: #F2F0EA; /* recessed panels, inputs at rest */ --surface-deep: #EAE7DE; /* pressed, or a well */ --rule: #DFDBD2; /* hairlines. never heavier than 1px */ --rule-soft: #EDEAE3; --ink: #1B1A17; /* warm near-black. #000 is a void, not ink */ --ink-2: #4A463E; /* body copy that isn't the headline */ /* Labels, captions, metadata. Was #78736A, which measured 4.47:1 on the sheet - close enough to look deliberate and under the line the rest of the app is held to. Five percent darker clears it with room: 4.89:1 on --paper, 4.51:1 on --surface, 5.14:1 on --paper-raised. Not an identity token, so this is a derived tone moving, not the palette. */ --ink-soft: #726D63; /* Placeholders and disabled controls, and nothing else. It measures 2.41:1 on the sheet, which is right for text that is meant to read as absent and wrong for anything a person is expected to read. Three elements were using it for real copy: .preview-meta was moved to --ink-2 before R4, and .template-suits and .doc-placeholder-note were still on it, unguarded, because R1's contrast sweep was a one-off by hand. contrastPairsUnder45 is what watches this now. */ --ink-faint: #A8A296; /* The single accent. Reads as ballpoint on paper. 8.1:1 against white, 7.8:1 against the sheet — passes AA either way. */ --pen: #2B4BD8; --pen-deep: #1F38AC; /* pressed state */ --pen-light: #6C86F0; --pen-wash: #EEF1FE; /* the faintest tint, for selected rows */ --pen-rgb: 43, 75, 216; /* Status colours, pulled toward the warm ramp so they belong here rather than looking pasted in from a component library. */ /* Darkened in phase B, from #2F7D4F. As text on --ok-wash it measured 4.45:1, which is under the line and had never been counted: the pair only exists inside the keyword panel, and nothing had ever made that panel build (D-63 Q4). 5.36:1 now. Every other use of this token is a border or an icon on paper, where darker is strictly better. */ --ok: #2A6F45; --ok-wash: #EAF3ED; --warn: #B5771A; --warn-wash: #FAF1E0; --stop: #C13B2E; --stop-wash: #FBEDEB; --stop-deep: #9E2C21; /* pressed, and the danger button's hover */ /* Text that sits on top of a filled accent. White is right on the ink blue and wrong on the lifted dark-mode one: #FFFFFF on #7E95FF is 2.8:1, which is not readable text. The dark theme flips it to ink and lands on 6.6:1. Every `color: white` in the app used to be the first of those two, in both themes. */ --on-pen: #FFFFFF; /* Amber is a light colour in both themes, so what sits on it is always dark. White on --warn measures 3.7:1, which is why this is its own token rather than --on-pen doing double duty. */ --on-warn: #1B1A17; /* A white sweep across a filled button, and the ground a modal sits on. Both were literals in three places each. */ --sheen: rgba(255, 255, 255, 0.20); --scrim: rgba(27, 26, 23, 0.55); /* =============================================================== Type =============================================================== */ /* Schibsted Grotesk was drawn for a newspaper group. It carries editorial DNA a neutral UI grotesque doesn't, and nobody reaches for it by default. Geist Mono stamps every number and date. */ --font-display: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Schibsted Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; --font-size-xs: 0.75rem; /* 12, legal, footnotes */ --font-size-sm: 0.875rem; /* 14, labels, helper text */ --font-size-base: 0.9375rem; /* 15, was 14, too tight for a form app */ --font-size-md: 1rem; /* 16, inputs. below this iOS zooms on focus */ --font-size-lg: 1.0625rem; /* 17 */ --font-size-xl: 1.25rem; /* 20 */ --font-size-2xl: 1.5rem; /* 24 */ --font-size-3xl: 1.875rem; /* 30 */ --font-size-4xl: 2.5rem; /* 40 */ --font-size-5xl: 3.25rem; /* 52, display only */ --line-height-tight: 1.15; /* display type wants less air */ --line-height-snug: 1.3; --line-height-normal: 1.5; --line-height-relaxed: 1.65; --line-height-loose: 2; /* Big type needs negative tracking; small caps need positive. */ --tracking-display: -0.03em; --tracking-tight: -0.015em; --tracking-normal: 0; --tracking-label: 0.06em; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; --measure: 65ch; /* nobody reads a line longer than this comfortably */ /* =============================================================== Space — 4px base =============================================================== */ --spacing-2xs: 0.25rem; --spacing-xs: 0.5rem; --spacing-sm: 0.75rem; --spacing-md: 1rem; --spacing-lg: 1.5rem; --spacing-xl: 2rem; --spacing-2xl: 3rem; --spacing-3xl: 4.5rem; --spacing-4xl: 7rem; /* =============================================================== Radius — tighter inside, softer outside =============================================================== */ --radius-xs: 0.1875rem; --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; --radius-xl: 0.75rem; --radius-2xl: 1rem; --radius-full: 9999px; /* =============================================================== Elevation — shadows tinted with the paper's own hue. Pure black over warm paper reads as dirt. =============================================================== */ --shadow-xs: 0 1px 1px rgba(43, 38, 28, 0.04); --shadow-sm: 0 1px 2px rgba(43, 38, 28, 0.06), 0 1px 3px rgba(43, 38, 28, 0.04); --shadow-md: 0 2px 4px rgba(43, 38, 28, 0.05), 0 4px 12px rgba(43, 38, 28, 0.06); --shadow-lg: 0 4px 8px rgba(43, 38, 28, 0.05), 0 12px 28px rgba(43, 38, 28, 0.08); --shadow-xl: 0 8px 16px rgba(43, 38, 28, 0.06), 0 24px 48px rgba(43, 38, 28, 0.10); --shadow-2xl: 0 16px 32px rgba(43, 38, 28, 0.08), 0 40px 80px rgba(43, 38, 28, 0.14); /* Pressed into the surface rather than lifted off it. */ --shadow-well: inset 0 2px 4px rgba(43, 38, 28, 0.07); /* A sheet of paper lying on a desk: contact shadow, then falloff. */ --shadow-sheet: 0 1px 1px rgba(43, 38, 28, 0.07), 0 8px 24px rgba(43, 38, 28, 0.07), 0 24px 56px rgba(43, 38, 28, 0.06); --shadow-pen: 0 2px 8px rgba(var(--pen-rgb), 0.20); --focus-ring: 0 0 0 3px rgba(var(--pen-rgb), 0.28); /* =============================================================== Motion — spring for anything the user pushed, ease for the rest =============================================================== */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --transition-fast: 120ms var(--ease-out); --transition-base: 200ms var(--ease-out); --transition-slow: 320ms var(--ease-out); --transition-slower: 500ms var(--ease-out); /* =============================================================== Layout =============================================================== */ --container: 1240px; --container-text: 44rem; --header-height: 64px; --sheet-width: 210mm; /* A4. the preview is the real thing */ --sheet-height: 297mm; --sheet-margin: 18mm; /* =============================================================== Depth order =============================================================== */ --z-dropdown: 100; --z-sticky: 200; --z-fixed: 300; --z-modal-backdrop: 400; --z-modal: 500; --z-popover: 600; --z-tooltip: 700; --z-toast: 800; /* =============================================================== Legacy names — every one of the 66 variables the existing CSS references, remapped onto the new palette. Nothing to rewrite. =============================================================== */ --primary-color: var(--pen); --primary-dark: var(--pen-deep); --primary-light: var(--pen-light); --primary-rgb: var(--pen-rgb); /* Was indigo → violet → fuchsia. Now a vertical sheen, the way ink sits unevenly on a printed surface. Barely a gradient at all. =============================================================== */ /* The top stop, and the whole point of it being here rather than written out below. This gradient was declared once, in :root, with the light palette's hex in it, and no theme overrode it - so in dark mode the button drew the light blue and put the dark theme's ink on top: 2.67:1 on every Continue button in the app, since the palette was written. R3 fixed it by writing a second pair of hex values into the dark block, which closed the number and left the shape: two hand written stops per theme, and a third theme would arrive with the same trap set. So the stop is derived from --pen instead. --pen is overridden per theme a few lines below, and a custom property that references it resolves against whatever --pen is on the element it is declared on - which is , the same element [data-theme] sits on. One declaration, both themes, and a fourth theme could not get this wrong. 93% was measured, not picked: it is what the light stop already was (#3A58E2 is --pen mixed with white at 92.9%), and it keeps --on-pen clear of both stops in both themes. light #FFFFFF on the top stop 5.84:1 on --pen 6.77:1 dark #171614 on the top stop 7.09:1 on --pen 6.57:1 Deriving from --pen-light was tried in R3 and read 3.3:1 in the light theme, which is why that is not what this does. The fallback is a flat --pen rather than a hex, so a browser without color-mix draws a solid accent that still measures 6.77:1 and 6.57:1 rather than an invalid value, which would leave the button with no fill at all under white text. */ --pen-sheen: var(--pen); --primary-gradient: linear-gradient(180deg, var(--pen-sheen) 0%, var(--pen) 100%); --secondary-gradient: var(--primary-gradient); --secondary-color: var(--pen); --accent-gradient: var(--primary-gradient); --accent-color: var(--pen); --success-color: var(--ok); --success-light: var(--ok-wash); --error-color: var(--stop); --error-light: var(--stop-wash); --warning-color: var(--warn); --warning-light: var(--warn-wash); --info-color: var(--pen); --info-light: var(--pen-wash); --text-primary: var(--ink); --text-secondary: var(--ink-2); --text-light: var(--ink-soft); --text-muted: var(--ink-faint); --bg-primary: var(--paper); --bg-secondary: var(--surface); --bg-tertiary: var(--surface-deep); --bg-elevated: var(--paper-raised); --border-color: var(--rule); --border-light: var(--rule-soft); --divider-color: var(--rule); /* Glass is gone. These stay opaque so the backdrop-filter rules still in style.css simply have nothing to blur. */ --glass-bg: var(--paper-raised); --glass-bg-light: var(--paper); --glass-border: var(--rule); --glass-shadow: var(--shadow-md); --shadow-primary: var(--shadow-pen); --shadow-primary-lg: 0 4px 16px rgba(var(--pen-rgb), 0.24); --shadow-colored: var(--shadow-pen); --shadow-success: 0 2px 8px rgba(47, 125, 79, 0.20); --shadow-error: 0 2px 8px rgba(193, 59, 46, 0.20); --glow-primary: var(--focus-ring); --glow-success: 0 0 0 3px rgba(47, 125, 79, 0.24); --font-family: var(--font-body); --container-max-width: var(--container); --sidebar-width: 320px; } /* See the note beside --pen-sheen. Declared on :root and not inside the two theme blocks, because the mix resolves against whatever --pen is on at the time, and both theme blocks set --pen on . */ @supports (color: color-mix(in srgb, red 50%, white)) { :root { --pen-sheen: color-mix(in srgb, var(--pen) 93%, #FFFFFF); } } /* =================================================================== Dark — a reading room, not an inverted sheet. Warm dark keeps the hue family intact instead of jumping to slate. =================================================================== */ [data-theme="dark"] { --paper: #171614; --paper-raised: #1F1E1B; --surface: #1F1E1B; --surface-deep: #272621; --rule: #3A3833; --rule-soft: #272621; --ink: #F2EFE6; --ink-2: #C7C3B9; /* 5.48:1 on --paper here, so this one did not need moving with its light counterpart. */ --ink-soft: #928D83; --ink-faint: #67635B; /* Lifted so it still clears 4.5:1 against the dark ground. */ --pen: #7E95FF; --pen-deep: #5E78F0; --pen-light: #A5B5FF; --pen-wash: #1C2140; --pen-rgb: 126, 149, 255; --ok: #62B884; --ok-wash: #16251C; --warn: #DCA23F; --warn-wash: #2A2113; --stop: #E8776A; --stop-wash: #2B1815; --stop-deep: #F0958A; /* Ink on the lifted accent, not white. See the note on --on-pen. */ --on-pen: #171614; --on-warn: #171614; /* No --primary-gradient here any more, and that is the fix rather than an omission. It was written out twice with hex in it - once in :root for the light theme and, from R3, once here - and the first version of that mistake put every Continue button in the app at 2.67:1 in this theme, from the day the palette was written. It is derived from --pen in :root now, and --pen is four lines up. See the note there. */ --sheen: rgba(255, 255, 255, 0.12); --scrim: rgba(8, 8, 7, 0.66); /* Depth in the dark comes from black, not from the paper hue. */ --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.36), 0 1px 3px rgba(0, 0, 0, 0.28); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.36), 0 4px 12px rgba(0, 0, 0, 0.34); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.38), 0 12px 28px rgba(0, 0, 0, 0.40); --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.42), 0 24px 48px rgba(0, 0, 0, 0.46); --shadow-2xl: 0 16px 32px rgba(0, 0, 0, 0.48), 0 40px 80px rgba(0, 0, 0, 0.55); --shadow-sheet: 0 1px 1px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.44), 0 24px 56px rgba(0, 0, 0, 0.40); } /* Same values for anyone who hasn't chosen a theme but whose system has. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --paper: #171614; --paper-raised: #1F1E1B; --surface: #1F1E1B; --surface-deep: #272621; --rule: #3A3833; --rule-soft: #272621; --ink: #F2EFE6; --ink-2: #C7C3B9; --ink-soft: #928D83; --ink-faint:#67635B; --pen: #7E95FF; --pen-deep: #5E78F0; --pen-light: #A5B5FF; --pen-wash: #1C2140; --pen-rgb: 126, 149, 255; --ok: #62B884; --ok-wash: #16251C; --warn: #DCA23F; --warn-wash: #2A2113; --stop: #E8776A; --stop-wash: #2B1815; --stop-deep: #F0958A; --on-pen: #171614; /* And none here either. Same reason as the block above. */ --sheen: rgba(255, 255, 255, 0.12); --scrim: rgba(8, 8, 7, 0.66); --shadow-xs: 0 1px 1px rgba(0, 0, 0, 0.30); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.36), 0 1px 3px rgba(0, 0, 0, 0.28); --shadow-md: 0 2px 4px rgba(0, 0, 0, 0.36), 0 4px 12px rgba(0, 0, 0, 0.34); --shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.38), 0 12px 28px rgba(0, 0, 0, 0.40); --shadow-xl: 0 8px 16px rgba(0, 0, 0, 0.42), 0 24px 48px rgba(0, 0, 0, 0.46); --shadow-2xl: 0 16px 32px rgba(0, 0, 0, 0.48), 0 40px 80px rgba(0, 0, 0, 0.55); --shadow-sheet: 0 1px 1px rgba(0, 0, 0, 0.40), 0 8px 24px rgba(0, 0, 0, 0.44), 0 24px 56px rgba(0, 0, 0, 0.40); } } @media (prefers-reduced-motion: reduce) { :root { --transition-fast: 0ms; --transition-base: 0ms; --transition-slow: 0ms; --transition-slower: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }