/* ============================================================ Clippings theme The one theme file: every page loads this and nothing else decides a colour. Two halves — the generated Paper set, then what Paper cannot express — and, at the end, the signed-in app's surface palette (--a-*), which is the only part with a dark redefinition. docs/theme-migration.md has the history. ============================================================ */ /* ---- Generated from the Paper file "clippings" (tokens hash c842c08d) ---- Regenerate with get_tokens(format: "css") rather than editing by hand. The only post-processing: the three --font-* lines get full stacks (Paper exports the bare family name). Everything else is verbatim. */ :root { --color-paper: #F4F4F2; --color-raised: #FFFFFF; --color-ink: #0B120F; --color-ink-text: #12100E; --color-ink-muted: #575349; --color-paper-text: #FFFFFF; --color-paper-muted: #8A9993; --color-rule: #DAD7CE; --color-rule-dark: #212724; --color-cobalt: #1E45C8; --color-cobalt-lift: #8FA8FF; --color-cobalt-ink: #152C7A; --color-cobalt-bright: #5060EE; --color-cobalt-bright-deep: #3A48DC; --font-display: "Funnel Display", system-ui, sans-serif; --font-sans: "Schibsted Grotesk", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace; --text-label: 13px; --text-caption: 15px; --text-body: 17px; --text-lead: 19px; --text-h3: 30px; --text-h2: 46px; --text-display: 68px; --font-weight-regular: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --tracking-display: -0.025em; --tracking-tight: -0.015em; --tracking-normal: 0em; --tracking-label: 0.1em; --leading-label: 16px; --leading-caption: 24px; --leading-body: 27px; --leading-lead: 32px; --leading-h3: 36px; --leading-h2: 54px; --leading-display: 72px; --breakpoint-lg: 1024px; --breakpoint-xl: 1440px; --container-page: 1240px; --spacing-2: 8px; --spacing-3: 12px; --spacing-4: 16px; --spacing-6: 24px; --spacing-8: 32px; --spacing-14: 56px; --spacing-26: 104px; --spacing-30: 120px; --radius-sm: 8px; --radius-md: 14px; --radius-lg: 22px; --radius-xl: 26px; --radius-full: 999px; } /* ---- Hand-written: what Paper cannot express ---------------------------- */ :root { /* Colours used on the artboards as literals, awaiting promotion into the Paper set (docs/theme-migration.md §4.1). Once they exist in Paper they move into the generated block above under the same names. */ --color-paper-soft: #C8D2CE; /* brighter on-ink text: ghost buttons, trust lead */ --color-glass: #FFFFFF0A; /* translucent card on ink */ --color-glass-line: #FFFFFF1A; /* its hairline */ --color-glass-strong:#FFFFFF1F; /* ghost-button border, separators on ink */ --color-glass-hover: #FFFFFF47; --color-phone: #232D29; /* phone bezel around the capture card */ --color-success: #12855F; /* a check that has landed */ --color-ink-lift: #141E19; /* a card sitting on an ink slab (pricing detail) */ --color-ink-select: #1A2035; /* the selected row on an ink slab (pricing tier) */ /* Signature gradient: the cobalt spectrum. Spectrum bar at the top of the hero, and the 2.5px ring around primary CTAs. Hex first, oklab below. */ --gradient-spectrum: linear-gradient(96deg, #0A2A93 0%, #1D45C8 34%, #4C74F0 68%, #9DB4FF 100%); --gradient-spectrum-bar: linear-gradient(90deg, #0A2A93 0%, #1D45C8 34%, #4C74F0 68%, #9DB4FF 100%); /* Vertical cut, for tall thin marks (the hairline that draws in on a hovered row) where the 96deg sweep would show as one flat colour. */ --gradient-spectrum-v: linear-gradient(180deg, #0A2A93 0%, #1D45C8 34%, #4C74F0 68%, #9DB4FF 100%); /* Cobalt glow rising from the top edge of the hero, fading into --color-ink. */ --gradient-hero: radial-gradient(ellipse 118% 54% at 50% 0%, #2F58F24D 0%, #1F399E29 34%, #101A340F 54%, #0B120F00 74%); /* Vertical fade to ink, for the foot of the tile wall. */ --gradient-ink-fade: linear-gradient(180deg, #0B120F00 0%, #0B120F 100%); /* Same fade, but most of the way opaque by the midpoint (the graveyard field). */ --gradient-ink-fade-deep: linear-gradient(180deg, #0B120F00 0%, #0B120FB8 48%, #0B120F 100%); /* The hero glow at card scale: a faint cobalt wash at the top of an ink card. */ --gradient-card-glow: radial-gradient(ellipse 120% 80% at 50% 0%, #2F58F229 0%, #0B120F00 74%); /* The format proof cards: the brand cobalt, deepening a little toward the bottom-right. Built from the cobalt tokens rather than Paper's --color-cobalt-bright pair, which read as indigo on the page. */ --gradient-format-card: linear-gradient(168deg, var(--color-cobalt) 0%, color-mix(in srgb, var(--color-cobalt) 78%, var(--color-cobalt-ink)) 100%); /* Scrim over a saved-clip thumbnail, so a white play glyph reads on any image. */ --gradient-thumb-scrim: linear-gradient(180deg, #12100E1F 0%, #12100E5C 100%); /* Page ground: the paper collage, tiled at the artboard's 1440px. A new filename per revision — /static/img is served immutable for a year. */ --ground-img: url("/static/img/ground-v3-light.jpg"); /* Hand-lettered margin notes (the artboard's annotations on the light card) */ --font-hand: "Caveat", "Segoe Script", cursive; /* Fades over a video still: the journey's clip card and the dimmed phone behind the share sheet. */ --gradient-video-fade: linear-gradient(180deg, #0B120F00 38%, #0B120FCC 78%, #0B120FE6 100%); --gradient-sheet-dim: linear-gradient(180deg, #0B120F59 0%, #0B120F8C 100%); /* The notebook's paper label: barely-there warm sheen. */ --gradient-label: linear-gradient(162deg, #FFFFFF 0%, #FEFDFB 62%, #F9F8F3 100%); /* The "After filing" band: cobalt pooling at the top and foot of a navy-to-ink ground. */ --gradient-band: radial-gradient(ellipse 82% 52% at 50% 0%, #2D5BFF52 0%, #2D5BFF14 40%, #2D5BFF00 72%), radial-gradient(ellipse 62% 34% at 50% 100%, #1D45C847 0%, #1D45C800 74%), radial-gradient(ellipse 44% 32% at 78% 20%, #8FA8FF1F 0%, #8FA8FF00 74%), linear-gradient(180deg, #16244F 0%, #0C1230 26%, #0B120F 58%, #0B120F 100%); /* Placeholder avatars in the source strip, and the clip tile at the centre of the orbit. */ --gradient-avatar: linear-gradient(135deg, #E3E5E4 0%, #B5B8B6 100%); --gradient-clip-tile: linear-gradient(158deg, #3B3A44 0%, #22212A 44%, #141319 100%); --gradient-sheen: radial-gradient(circle, #FFFFFF29 0%, #FFFFFF00 70%); /* "Most popular" on the pricing card: cobalt-lift shimmer clipped to the text. */ --gradient-popular-text: linear-gradient(96deg, #6C8FF5 0%, #8FA8FF 50%, #C3D0FF 100%); /* The closing CTA slab: cobalt pooling under the foot, a faint lift at the centre. */ --gradient-cta-slab: radial-gradient(ellipse 72% 66% at 50% 114%, #1D45C8B8 0%, #1D45C800 70%), radial-gradient(circle, #8FA8FF24 0%, #8FA8FF00 72%); /* The screenshot props in "Dead end 02": a pale sky, mountains cut from it. */ --gradient-photo: linear-gradient(180deg, #C4D3E6 0%, #DCE6F0 100%); --gradient-photo-back: linear-gradient(180deg, #CBD8E8 0%, #E8EEF5 100%); --color-mountain-1: #A6B8D2; --color-mountain-2: #B7C6DA; --color-mountain-3: #BDCADD; --color-mountain-4: #AFC0D6; --color-mountain-5: #BCCADD; /* Shadows */ --shadow-raised: 0 1px 2px #14120E1A, 0 4px 10px #14120E0F, 0 18px 40px #14120E1F; /* white card on paper */ --shadow-phone-sm: 0 8px 20px #14120E1F, 0 26px 54px #14120E29; /* journey phones */ --shadow-book: 0 18px 34px #1B151221, 0 2px 5px #1B151212; /* notebook covers */ --shadow-app-card: 0 2px 5px #0F1A160A, 0 12px 28px #0F1A1614; /* destination cards */ --shadow-ask: 0 18px 44px #0B120F5C; /* the ask field on the band */ --shadow-thumb: 0 20px 44px #1B151247, 0 3px 8px #1B151224; /* orbit clip tile */ --shadow-disc: 0 8px 20px #1B151217; /* orbit destination discs */ --shadow-format: 0 1px 1px #2A2FA00F, 0 6px 12px #2A2FA01A, 0 18px 28px #2A2FA01F, 0 36px 56px #2A2FA014; /* format proof cards: a cobalt-tinted lift */ --shadow-format-sheet: 0 6px 14px #2A2FA00F; /* the paper sheets stacked behind them */ --shadow-play: 0 4px 12px #12100E40; /* play disc on a still */ --shadow-sheet: 0 1px 3px #1917120A, 0 10px 22px #19171214; /* paper props behind the dead-end cards */ --shadow-sheet-2: 0 2px 6px #1917120F, 0 12px 26px #1917121A; --shadow-sheet-3: 0 2px 6px #1917120F, 0 14px 30px #1917121A; --shadow-pill: 0 1px 3px #1917120A, 0 8px 18px #19171214; --shadow-dead: 0 1px 2px #19171214, 0 12px 26px #1917121F, 0 30px 50px #19171214; /* the dead-end cards themselves */ --shadow-slab-lg: 0 20px 50px #0B120F47; /* pricing and closing slabs */ --shadow-cta-dk: 0 12px 26px #00000057; /* white CTA on an ink slab */ --shadow-slab: 0 18px 44px #080B1847; /* ink card on paper */ --shadow-cta: 0 10px 24px #00000059; /* spectrum-ring CTA on ink */ --shadow-cta-lt: 0 10px 24px #1B151242, 0 2px 6px #1B151224; /* same CTA on a light card */ --shadow-phone: 0 40px 90px #00000080, 0 1px 0 #FFFFFF14; --shadow-card: 0 40px 80px #00000073, 0 4px 10px #00000040; /* capture card inside the phone */ --shadow-nav: 0 2px 6px #1B15120A, 0 12px 32px #1B151214; --shadow-lift: 0 8px 20px #00000052; /* small floating badges */ --shadow-float: 0 18px 40px #00000059; /* the flying clip */ /* Motion */ --duration-fast: 150ms; /* hover, focus, small reveals */ --duration-normal: 250ms; /* standard UI transitions */ --duration-step: 320ms; /* crossfades */ --duration-reveal: 500ms; /* page-level entrances */ --duration-wall: 52s; /* hero tile-wall drift (rows override via --wall-speed) */ --duration-marquee: 40s; /* supported-formats marquee loop */ --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --ease-pop: cubic-bezier(.175, .885, .32, 1.275); /* Layout */ --gutter: clamp(20px, 6.94vw, 100px); /* 100px at the 1440 canvas */ } /* Modern-colour versions of the gradients (match the Paper artboard exactly) */ @supports (background: linear-gradient(in oklab, red, blue)) { :root { --gradient-spectrum: linear-gradient(in oklab 96deg, oklab(35% -0.016 -0.174) 0%, oklab(45.7% -0.017 -0.207) 34%, oklab(59.7% -0.010 -0.191) 68%, oklab(78.1% 0.001 -0.110) 100%); --gradient-spectrum-bar: linear-gradient(in oklab 90deg, oklab(35% -0.016 -0.174) 0%, oklab(45.7% -0.017 -0.207) 34%, oklab(59.7% -0.010 -0.191) 68%, oklab(78.1% 0.001 -0.110) 100%); --gradient-spectrum-v: linear-gradient(in oklab 180deg, oklab(35% -0.016 -0.174) 0%, oklab(45.7% -0.017 -0.207) 34%, oklab(59.7% -0.010 -0.191) 68%, oklab(78.1% 0.001 -0.110) 100%); --gradient-hero: radial-gradient(ellipse 118% 54% at 50% 0% in oklab, oklab(53.5% -0.015 -0.234 / 30%) 0%, oklab(39.6% -0.009 -0.166 / 16%) 34%, oklab(22.4% -0.003 -0.053 / 6%) 54%, oklab(17.4% -0.012 0.003 / 0%) 74%); --gradient-card-glow: radial-gradient(ellipse 120% 80% at 50% 0% in oklab, oklab(53.5% -0.015 -0.234 / 16%) 0%, oklab(17.4% -0.012 0.003 / 0%) 74%); --gradient-ink-fade-deep: linear-gradient(in oklab 180deg, oklab(17.4% -0.012 0.003 / 0%) 0%, oklab(17.4% -0.012 0.003 / 72%) 48%, oklab(17.4% -0.012 0.003) 100%); --gradient-thumb-scrim: linear-gradient(in oklab 180deg, oklab(17.5% 0.002 0.005 / 12%) 0%, oklab(17.5% 0.002 0.005 / 36%) 100%); --gradient-video-fade: linear-gradient(in oklab 180deg, oklab(17.4% -0.012 0.003 / 0%) 38%, oklab(17.4% -0.012 0.003 / 80%) 78%, oklab(17.4% -0.012 0.003 / 90%) 100%); --gradient-sheet-dim: linear-gradient(in oklab 180deg, oklab(17.4% -0.012 0.003 / 35%) 0%, oklab(17.4% -0.012 0.003 / 55%) 100%); --gradient-label: linear-gradient(in oklab 162deg, oklab(100% 0 0) 0%, oklab(99.4% .0003 0.003) 62%, oklab(97.9% -.0009 0.007) 100%); --gradient-band: radial-gradient(ellipse 82% 52% at 50% 0% in oklab, oklab(55.1% -0.018 -0.247 / 32%) 0%, oklab(55.1% -0.018 -0.247 / 8%) 40%, oklab(55.1% -0.018 -0.247 / 0%) 72%), radial-gradient(ellipse 62% 34% at 50% 100% in oklab, oklab(45.7% -0.017 -0.207 / 28%) 0%, oklab(45.7% -0.017 -0.207 / 0%) 74%), radial-gradient(ellipse 44% 32% at 78% 20% in oklab, oklab(74.8% 0.002 -0.129 / 12%) 0%, oklab(74.8% 0.002 -0.129 / 0%) 74%), linear-gradient(in oklab 180deg, oklab(27.5% -0.004 -0.081) 0%, oklab(19.7% 0.001 -0.060) 26%, oklab(17.4% -0.012 0.003) 58%, oklab(17.4% -0.012 0.003) 100%); --gradient-avatar: linear-gradient(in oklab 135deg, oklab(92% -0.002 0.001) 0%, oklab(78% -0.004 0.002) 100%); --gradient-clip-tile: linear-gradient(in oklab 158deg, oklab(35.3% 0.006 -0.016) 0%, oklab(25.3% 0.006 -0.016) 44%, oklab(19.1% 0.005 -0.011) 100%); --gradient-sheen: radial-gradient(circle in oklab, oklab(100% 0 0 / 16%) 0%, oklab(100% 0 0 / 0%) 70%); --gradient-popular-text: linear-gradient(in oklab 96deg, oklab(67.1% -0.006 -0.156) 0%, oklab(74.8% 0.002 -0.129) 50%, oklab(86.3% 0.003 -0.067) 100%); --gradient-cta-slab: radial-gradient(ellipse 72% 66% at 50% 114% in oklab, oklab(45.7% -0.017 -0.207 / 72%) 0%, oklab(45.7% -0.017 -0.207 / 0%) 70%), radial-gradient(circle in oklab, oklab(74.8% 0.002 -0.129 / 14%) 0%, oklab(74.8% 0.002 -0.129 / 0%) 72%); --gradient-photo: linear-gradient(in oklab 180deg, oklab(86.1% -0.008 -0.030) 0%, oklab(92% -0.006 -0.016) 100%); --gradient-photo-back: linear-gradient(in oklab 180deg, oklab(87.7% -0.007 -0.025) 0%, oklab(94.7% -0.004 -0.011) 100%); --nb-spine-cobalt: linear-gradient(in oklab 180deg, oklab(37.3% -0.011 -0.175) 0%, oklab(53.5% -0.015 -0.234) 55%, oklab(37.3% -0.011 -0.175) 100%); --nb-spine-amber: linear-gradient(in oklab 90deg, oklab(49.9% 0.052 0.098) 0%, oklab(70.8% 0.064 0.137) 58%, oklab(58.3% 0.060 0.114) 100%); --nb-spine-steel: linear-gradient(in oklab 90deg, oklab(38.5% -0.027 -0.084) 0%, oklab(58.5% -0.042 -0.151) 58%, oklab(47.9% -0.033 -0.116) 100%); --nb-edge-green: linear-gradient(in oklab 90deg, oklab(36.6% -0.067 0.014) 0%, oklab(33.3% -0.053 0.007) 55%, oklab(27.6% -0.051 0.018) 100%); --nb-edge-brown: linear-gradient(in oklab 90deg, oklab(40.8% 0.041 0.079) 0%, oklab(32.6% 0.026 0.058) 55%, oklab(26.9% 0.023 0.049) 100%); --nb-edge-navy: linear-gradient(in oklab 90deg, oklab(34.2% -0.022 -0.067) 0%, oklab(27.2% -0.013 -0.044) 55%, oklab(23.1% -0.011 -0.035) 100%); } } /* ---- Illustration palettes --------------------------------------------- Colours that belong to a thing being DEPICTED, not to the brand. They live here so that theme.css stays the one place any colour is decided. */ :root { /* The three notebooks in "The journey of a clip": cloth spines and page edges. */ --nb-spine-cobalt: linear-gradient(180deg, #17309B 0%, #2F58F2 55%, #17309B 100%); --nb-spine-amber: linear-gradient(90deg, #8F520A 0%, #E08A1D 58%, #B06710 100%); --nb-spine-steel: linear-gradient(90deg, #1B4571 0%, #2E7CD6 58%, #255E9F 100%); --nb-edge-green: linear-gradient(90deg, #0B4A38 0%, #123F33 55%, #08301F 100%); --nb-edge-brown: linear-gradient(90deg, #6B3D07 0%, #4A2D0A 55%, #382005 100%); --nb-edge-navy: linear-gradient(90deg, #1A3A5C 0%, #16283D 55%, #101E2E 100%); --nb-amber-ink: #B06E14; /* clip count on the amber notebook */ --nb-steel-ink: #2668B8; /* clip count on the steel notebook */ /* The ground behind an Instagram post, as Instagram draws it in dark mode. */ --ig-bg: #000000; /* The two sheets stacked behind a format proof card: a cobalt-tinted and a plain off-white. */ --fmt-sheet-1: #D0DAF6; --fmt-sheet-2: #ECECF2; /* An iOS share sheet, drawn as iOS draws it. Apple's colours, not ours. */ --ios-sheet: #F4F4F5; --ios-text: #111113; --ios-label: #4A4A4F; --ios-mute: #87878C; --ios-mute-2: #9B9BA1; --ios-chevron: #B8B8BE; --ios-fill: #E3E3E6; --ios-line: #EDEDF0; --ios-bar: #DCDCE0; --ios-dot: #5A5A60; --ios-home: #1B1B1E; --ios-battery-line: #FFFFFF8C; --ios-airdrop: #1E7BF5; --ios-messages:#35C759; --ios-mail: #2E7CF6; --ios-notes: #FCD34D; --ios-red: #E5484D; --ios-orange: #F5A623; } /* Responsive type. The tokens above are the 1440 values; below the large breakpoint the display sizes step down here, so components never carry their own clamp. */ @media (max-width: 1023px) { :root { --text-display: 46px; --leading-display: 50px; --text-h2: 36px; --leading-h2: 42px; --text-h3: 26px; --leading-h3: 32px; --text-lead: 17px; --leading-lead: 27px; } } /* ---- Capture card: legacy app palette ----------------------------------- The product screenshot inside the hero is the CURRENT capture card, green accent and all (docs/theme-migration.md §5.1). These are its colours, namespaced --cap-* so that restyling the card to cobalt is a change to this block alone. Nothing outside the card may use them. */ :root { --cap-ink: #141413; /* card title, destination names */ --cap-ink-2: #1B1512; /* step numbers, the send button fill */ --cap-body: #4A4740; /* url, note-box head */ --cap-soft: #6E6A63; /* notebook label copy */ --cap-faint: #8A867E; /* step labels */ --cap-mute: #A8A49C; /* "Both, on Pro" */ --cap-sunk: #F2F1EC; /* recessed fills */ --cap-foot: #FAF9F6; /* destination-card header strip */ --cap-row: #F7F6F2; /* unselected source row */ --cap-dot: #E4E2DA; /* unselected source disc */ --cap-card-line: #DCE4E1; /* destination-card border */ --cap-line: #1B15121A; --cap-green: #0D6B4F; /* checks, selected destination border */ --cap-green-deep: #12312C; /* note text, chips */ --cap-green-soft: #2F5A52; /* notebook "why" */ --cap-green-icon: #3F6B62; /* link glyph */ --cap-green-cut: #12855F; /* scissors, cut outline */ --cap-green-glow: 0 18px 40px #0D6B4F47; /* the Filed disc */ --cap-chip: #FFFFFFD9; --cap-chip-shadow:0 2px 6px #12312C1A; --cap-sel: linear-gradient(150deg, #EDF1FE 0%, #DCE4FB 100%); /* selected notebook row */ --cap-sel-shadow: 0 6px 16px #17635B24; --cap-hole: #0D0B0A; /* the gap a cut tile leaves in the wall */ } @supports (background: linear-gradient(in oklab, red, blue)) { :root { --cap-sel: linear-gradient(in oklab 150deg, oklab(95.9% .0007 -0.018) 0%, oklab(92% .0003 -0.032) 100%); } } /* ============================================================ App surfaces (--a-*) The signed-in pages read these, not --color-* directly: they need a surface stack (ground / card / input / chip) and a dark redefinition that the Paper set does not have. Every light value here is derived from a --color-* token above, so re-tinting the brand re-tints the app. The dark values are their own scale (from the Paper "Dashboard — Alpine (dark)" artboards) — Paper has no dark token set yet, so they are literals. Naming: the accent is called --a-accent, never by its colour. It was green once; it is cobalt now; the name outlives both. ============================================================ */ :root { /* Ink — text and ink fills */ --a-ink: var(--color-ink); /* headings, primary text, dark fills */ --a-body: var(--color-ink-muted); /* secondary text, ghost button labels */ --a-label: color-mix(in srgb, var(--color-ink-muted) 86%, var(--color-paper)); /* mono eyebrows, muted UI */ --a-faint: color-mix(in srgb, var(--color-ink-muted) 66%, var(--color-paper)); /* meta, timestamps, placeholders */ --a-mute: color-mix(in srgb, var(--color-ink-muted) 54%, var(--color-paper)); /* tertiary, counts, icon strokes */ /* Surfaces. The ground is the paper collage the landing wears, painted on a fixed layer (app.css html::before) so it is sized against the viewport rather than the document; --a-ground is the paint-in colour behind it. */ --a-ground: var(--color-paper); --a-ground-img: var(--ground-img); --a-ground-clear: transparent; /* the ground at alpha 0, for fade-out gradients */ --a-card: var(--color-raised); --a-card-line: var(--color-raised); /* cards close with their own edge on the gloss ground */ --a-card-img: none; /* dark mode gives cards a faint vertical sheen */ --a-sunk: color-mix(in srgb, var(--color-paper) 45%, var(--color-raised)); /* desktop inputs */ --a-sunk-m: color-mix(in srgb, var(--color-paper) 70%, var(--color-raised)); /* mobile inputs */ --a-chip: color-mix(in srgb, var(--color-paper) 70%, var(--color-raised)); /* static chips ON a card — above it in dark mode */ --a-foot: color-mix(in srgb, var(--color-paper) 30%, var(--color-raised)); /* card footer strip */ --a-hover: color-mix(in srgb, var(--color-paper) 30%, var(--color-raised)); /* row hover lift */ --a-press: color-mix(in srgb, var(--color-paper) 70%, var(--color-raised)); /* row/menu press */ --a-line: var(--color-rule); /* card borders */ --a-line-2: color-mix(in srgb, var(--color-rule) 75%, var(--color-raised)); /* input borders */ --a-rule: color-mix(in srgb, var(--color-rule) 55%, var(--color-raised)); /* dividers inside cards */ --a-dot: color-mix(in srgb, var(--color-ink-muted) 28%, var(--color-paper)); /* meta separators */ --a-dash: color-mix(in srgb, var(--color-ink-muted) 32%, var(--color-paper)); /* dashed "new"/"off" outlines */ --a-nav-line: color-mix(in srgb, var(--color-ink) 8%, transparent); --a-foot-line: var(--color-rule); --a-input-focus: var(--color-raised); /* input surface once focused */ --a-scrim: color-mix(in srgb, var(--color-ink) 65%, transparent); /* badges over a thumbnail */ --a-on-tile: color-mix(in srgb, var(--color-paper-text) 40%, transparent); /* the play glyph on a dark tile */ /* Slab — the dark setup card */ --a-slab: var(--color-ink); --a-slab-soft: var(--color-paper-muted); --a-slab-line: var(--color-glass-line); --a-setup-img: none; /* dark mode lights the slab from a corner */ --a-setup-line: transparent; --a-tile: var(--color-ink-lift); /* video thumb placeholder */ /* Accent */ --a-accent: var(--color-cobalt); --a-accent-fill: var(--color-cobalt); /* solid fills (avatar, streak dot, filing disc) — same in both themes */ --a-accent-wash: color-mix(in srgb, var(--color-cobalt) 9%, var(--color-raised)); /* The marker: a highlight the user drew on a clip's text. A warm, low yellow — the one colour everyone reads as "highlighter" — kept quiet enough that a paragraph of it is still readable. */ --a-highlight: #F6E7A6; --a-highlight-ink: var(--color-ink); --a-warn: #B8752F; --a-warn-ink: #8A5A22; --a-warn-wash: #F4EFE6; --a-err: #A03329; --a-err-wash: #F7E9E7; --a-err-line: #EBD5D2; /* Toast pill. It inverts between themes the way --a-btn-* does: solid cobalt with white text on the light ground, cobalt-lift with ink text on the dark one, so it stays legible and vivid over either collage. */ --a-toast: var(--color-cobalt); --a-toast-ink: var(--color-paper-text); --a-toast-glow: 0 10px 30px color-mix(in srgb, var(--color-cobalt) 25%, transparent), 0 2px 8px color-mix(in srgb, var(--color-ink) 12%, transparent); /* The refusal twin, same saturation logic. Deliberately NOT --a-err: that one is a wash-and-hairline pair for inline states, far too quiet to carry a floating pill. */ --a-toast-err: #C3372B; --a-toast-err-ink: var(--color-paper-text); --a-toast-err-glow: 0 10px 30px color-mix(in srgb, var(--a-toast-err) 24%, transparent), 0 2px 8px color-mix(in srgb, var(--color-ink) 12%, transparent); /* Action buttons (from the Paper "Dashboard" capture card, Sep 2026): solid cobalt with white text, flat on the page — hover only deepens the fill. The same cobalt in dark mode: the lift tint read as lavender on a near-black ground. */ --a-btn-bg: var(--color-cobalt); --a-btn-ink: var(--color-paper-text); --a-btn-sub: color-mix(in srgb, var(--color-paper-text) 72%, var(--color-cobalt)); --a-btn-hover: color-mix(in srgb, var(--color-cobalt) 86%, var(--color-ink)); --a-on-ink: var(--color-paper-text); /* text on an --a-ink fill */ --a-on-ink-sub: var(--a-slab-soft); /* A disabled pill gets its own surface rather than 40% opacity: a faded slab over the ground washes out to a grey blob with an unreadable label. It has to stay a step off the GROUND, not off the card — that is where it sits. */ --a-btn-off-bg: color-mix(in srgb, var(--color-ink-muted) 12%, var(--color-paper)); --a-btn-off-ink: color-mix(in srgb, var(--color-ink-muted) 62%, var(--color-paper)); /* Shape */ --a-r-card: var(--radius-lg); --a-r-card-lg: var(--radius-xl); --a-r-input: 16px; --a-r-input-m: var(--radius-md); --a-r-pill: var(--radius-full); /* Gloss cards float a little further off the collage than they did off a flat ground. */ --a-shadow: 0 2px 6px color-mix(in srgb, var(--color-ink) 6%, transparent), 0 18px 42px color-mix(in srgb, var(--color-ink) 12%, transparent); --a-shadow-lg: 0 2px 6px color-mix(in srgb, var(--color-ink) 6%, transparent), 0 20px 46px color-mix(in srgb, var(--color-ink) 14%, transparent); --a-shadow-m: 0 1px 2px color-mix(in srgb, var(--color-ink) 4%, transparent), 0 10px 26px color-mix(in srgb, var(--color-ink) 8%, transparent); /* Action pills carry no drop shadow: the cobalt bloom read as a focus glow leaking past the border. Nothing paints outside the pill's own edge. */ --a-shadow-btn: none; --a-shadow-btn-hi: none; --a-shadow-hi: 0 4px 10px color-mix(in srgb, var(--color-ink) 6%, transparent), 0 18px 40px color-mix(in srgb, var(--color-ink) 12%, transparent); --a-shadow-menu: 0 2px 6px color-mix(in srgb, var(--color-ink) 5%, transparent), 0 16px 40px color-mix(in srgb, var(--color-ink) 12%, transparent); --a-shadow-pop: 0 4px 14px color-mix(in srgb, var(--color-ink) 8%, transparent), 0 24px 56px color-mix(in srgb, var(--color-ink) 18%, transparent); --a-shadow-dialog: 0 8px 24px color-mix(in srgb, var(--color-ink) 10%, transparent), 0 32px 80px color-mix(in srgb, var(--color-ink) 20%, transparent); --a-shadow-slab: 0 12px 30px color-mix(in srgb, var(--color-ink) 15%, transparent); --a-backdrop: color-mix(in srgb, var(--color-ink) 35%, transparent); /* ── Inverted cards ──────────────────────────────────── A surface that is always the OPPOSITE of the theme: the onboarding upgrade page's paid plans. They are the thing being sold, so they have to pop off the ground in both themes — and a dark card on a dark ground is the one combination guaranteed not to. Near-black on the light ground, white on the dark one. That rules out --a-card (which inverts WITH the theme) and --a-accent (deep cobalt in light, illegible on near-black), so the card carries a small stack of its own, its accent included. This half stands in for the dark theme's surfaces and is written to that scale's literals; the dark half below stands in for the light ones through the same colour-mixes. Each mirrors what it replaces and cannot drift. */ --a-inv: #131312; /* = dark --a-card */ --a-inv-ink: #F6F6F3; /* = dark --a-ink */ --a-inv-body: #D6D6D1; /* = dark --a-body */ --a-inv-mute: #8A8A83; /* = dark --a-mute */ --a-inv-rule: #2A2A28; /* divider inside the card */ --a-inv-accent: var(--color-cobalt-lift); /* ticks and eyebrow, on near-black */ /* The signature ring, vertical, for the hairline on hovered rows. */ --a-ring-v: var(--gradient-spectrum-v); } /* ── Dark theme ─────────────────────────────────────── The attribute is set on by the shell: explicitly from the fn_theme cookie, or by the head script when the cookie says "system" and the OS prefers dark. */ :root[data-theme="dark"] { color-scheme: dark; --a-ink: #F6F6F3; --a-body: #D6D6D1; --a-label: #9E9E97; --a-faint: #9A9A93; --a-mute: #8A8A83; /* The surface stack runs the other way round to the usual dark theme: the GROUND is the lit layer and the card sits DARKER on top of it. Near-black cards on a near-black ground collapsed into one flat sheet on any screen that isn't cranked bright — there was no edge to read. Lighting the ground gives every card a real boundary and a value to print text against. Descent, lightest to darkest: ground #262624 → card #131312 → input #0A0A09. */ --a-ground: #262624; --a-ground-img: url("/static/img/ground-dark.jpg"); --a-card: #131312; --a-card-line: var(--color-glass-line); --a-card-img: linear-gradient(180deg, #171716 0%, #0F0F0E 100%); --a-sunk: #0A0A09; --a-sunk-m: #0A0A09; --a-chip: #232322; --a-foot: #0D0D0C; --a-hover: var(--color-glass); --a-press: #FFFFFF17; --a-line: var(--color-glass-line); --a-line-2: #FFFFFF29; --a-rule: #FFFFFF14; --a-dot: #5A5A54; --a-dash: #FFFFFF2E; --a-nav-line: var(--color-glass-line); --a-foot-line: var(--color-glass-line); --a-input-focus: #0E0E0D; /* The inverted card flips with everything else: white on the dark ground. Every value is the light theme's own surface, written as the same mix, so the two halves cannot drift. The accent goes full cobalt — the lift is an on-dark blue and all but vanishes against white. */ --a-inv: var(--color-raised); --a-inv-ink: var(--color-ink); --a-inv-body: var(--color-ink-muted); --a-inv-mute: color-mix(in srgb, var(--color-ink-muted) 54%, var(--color-paper)); --a-inv-rule: color-mix(in srgb, var(--color-rule) 55%, var(--color-raised)); --a-inv-accent: var(--color-cobalt); --a-slab-soft: #8E8E89; --a-setup-img: linear-gradient(158deg, #202020 0%, #0F0F0E 58%); --a-setup-line: #FFFFFF26; --a-accent: var(--color-cobalt-lift); --a-accent-wash: color-mix(in srgb, var(--color-cobalt) 30%, transparent); --a-highlight: #7A6420; --a-highlight-ink: #FFF4C2; --a-warn: #D19A5E; --a-warn-ink: #D19A5E; --a-warn-wash: #B8752F33; --a-err: #E0766B; --a-err-wash: #A0332933; --a-err-line: #A0332959; --a-toast: var(--color-cobalt-lift); --a-toast-ink: var(--color-ink); --a-toast-glow: 0 0 0 1px var(--color-glass-strong), 0 14px 40px color-mix(in srgb, var(--color-cobalt-lift) 35%, transparent); --a-toast-err: #FF6A55; --a-toast-err-ink: #290703; --a-toast-err-glow: 0 0 0 1px var(--color-glass-strong), 0 14px 40px color-mix(in srgb, var(--a-toast-err) 32%, transparent); --a-btn-bg: var(--color-cobalt); --a-btn-ink: var(--color-paper-text); --a-btn-sub: color-mix(in srgb, var(--color-paper-text) 72%, var(--color-cobalt)); --a-btn-hover: color-mix(in srgb, var(--color-cobalt) 88%, var(--color-paper-text)); --a-on-ink: var(--color-ink); --a-on-ink-sub: #5A6B64; --a-btn-off-bg: #363633; --a-btn-off-ink: #A2A29A; --a-shadow: 0 2px 8px #00000073, 0 24px 54px #00000099; --a-shadow-lg: 0 2px 8px #00000073, 0 26px 58px #000000A6; --a-shadow-m: 0 1px 3px #00000059, 0 12px 30px #00000073; --a-shadow-btn: none; --a-shadow-btn-hi: none; --a-shadow-hi: 0 4px 10px #00000047, 0 18px 40px #00000073; --a-shadow-menu: 0 2px 6px #00000059, 0 16px 40px #00000080; --a-shadow-pop: 0 4px 14px #00000059, 0 24px 56px #00000099; --a-shadow-dialog: 0 8px 24px #00000073, 0 32px 80px #000000A6; --a-shadow-slab: 0 12px 30px #00000066; --a-backdrop: #00000080; } /* Exact oklab stops where the syntax is supported — the hex stops above are close approximations. */ @supports (background: linear-gradient(in oklab, red, blue)) { :root[data-theme="dark"] { --a-card-img: linear-gradient(in oklab 180deg, #171716 0%, #0F0F0E 100%); --a-setup-img: linear-gradient(in oklab 158deg, #202020 0%, #0F0F0E 58%); } }