/* ════════════════════════════════════════════════════════════ Bergamot Signals — App Tokens The brand, adapted for a working tool. Same world — aubergine dark, warm bone ink, hairlines instead of boxes, one living accent — but with a light "paper" theme derived from the brand's own stationery colors, a denser (still calm) spacing ladder, fixed app type sizes, and the few semantic colors an app needs. Usage: (default — brand oxblood) (paper — daily working light) (denser working register) (calmer reading register) ════════════════════════════════════════════════════════════ */ @import url("https://fonts.googleapis.com/css2?family=Cormorant:ital,wght@0,400;0,500;1,400;1,500&family=Schibsted+Grotesk:ital,wght@0,400;0,500;0,600;1,400&display=swap"); /* ── Dark — the brand's oxblood, with app-only surface steps ── */ :root, :root[data-app-theme="dark"] { color-scheme: dark; /* surfaces */ --bg: #120910; /* app floor */ --bg-2: #1B0E15; /* inset band / rail */ --raise: #22141C; /* raised panel / menu */ --field: rgba(239,230,226,.05); /* input ground */ --hover: rgba(239,230,226,.04); /* row / control hover */ --active: rgba(239,230,226,.08); /* pressed / selected */ --scrim: rgba(18,9,16,.72); /* overlay behind modal */ /* ink */ --fg: #EFE6E2; --muted: #B0908C; --dim: #79585F; /* hairlines — borrowed ink, never solid */ --line: rgba(239,230,226,.115); --line-2: rgba(239,230,226,.06); /* the one living accent */ --accent: #DB9466; --accent-ink: #1B0E15; /* text set ON accent */ --accent-dim: rgba(219,148,102,.16); --accent-deep: #C25A4B; /* one big italic word */ --focus: rgba(219,148,102,.5); /* semantic — quiet, same family, used only when meaning demands */ --ok: #93AE89; --warn: #D5AF6B; --danger: #D2796B; --ok-dim: rgba(147,174,137,.14); --warn-dim: rgba(213,175,107,.14); --danger-dim: rgba(210,121,107,.14); /* atmosphere */ --grain-opacity: .03; --shadow-menu: 0 14px 44px rgba(0,0,0,.5); --glow-masthead: radial-gradient(90% 130% at 50% -30%, var(--accent-dim) 0%, transparent 60%); --selection-bg: var(--accent); --selection-fg: var(--bg); } /* ── Light — paper. Derived from the brand's stationery ground (--paper #F4F1EA) and aubergine ink. Gold stays the mark's. ── */ :root[data-app-theme="light"] { color-scheme: light; --bg: #F4F1EA; --bg-2: #ECE7DC; --raise: #FBF9F4; --field: rgba(43,26,35,.045); --hover: rgba(43,26,35,.04); --active: rgba(43,26,35,.08); --scrim: rgba(43,26,35,.4); --fg: #2B1A23; --muted: #6E5560; --dim: #9D848C; --line: rgba(43,26,35,.15); --line-2: rgba(43,26,35,.07); --accent: #A85B2C; /* the orange, carried to ink depth */ --accent-ink: #F4F1EA; --accent-dim: rgba(168,91,44,.1); --accent-deep: #A6473B; --focus: rgba(168,91,44,.45); --ok: #5E7A55; --warn: #8F6B2D; --danger: #A6473B; --ok-dim: rgba(94,122,85,.1); --warn-dim: rgba(143,107,45,.1); --danger-dim: rgba(166,71,59,.1); --grain-opacity: .025; --shadow-menu: 0 14px 44px rgba(43,26,35,.16); --glow-masthead: radial-gradient(90% 130% at 50% -30%, var(--accent-dim) 0%, transparent 60%); --selection-bg: var(--accent); --selection-fg: var(--accent-ink); } :root { /* ── Type — the brand duet, at tool sizes (fixed, not fluid) ── Cormorant is rationed: mastheads, page titles, and Brief headlines. Schibsted Grotesk does everything else. */ --font-display: "Cormorant", Georgia, "Times New Roman", serif; --font-sans: "Schibsted Grotesk", system-ui, -apple-system, sans-serif; --display-weight: 400; --display-tracking: -0.015em; --app-display-1: clamp(34px, 4.4vw, 50px); /* the Brief masthead */ --app-display-2: 28px; /* page / section title */ --app-headline: 22px; /* Brief item headline */ --app-title: 15px; /* row titles, sans 500 */ --app-body: 15px; /* paragraphs */ --app-sm: 13px; /* meta, captions */ --app-xs: 12px; /* fine print, counts */ --leading-display: 1.05; --leading-body: 1.6; --leading-tight: 1.4; /* the signature eyebrow, one step quieter for app chrome */ --eyebrow-size: 10.5px; --eyebrow-tracking: 0.3em; --eyebrow-weight: 500; --nav-tracking: 0.08em; /* ── Space — a denser ladder than the site, still generous ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 72px; --bar-h: 64px; /* app top bar */ --app-max: 1160px; /* working shell */ --app-pad: 32px; --measure: 640px; /* the reading column */ /* ── Radius — the pill survives; controls get a soft square ── */ --r-pill: 100px; /* buttons, chips */ --r-ctl: 7px; /* inputs, toggles */ --r-menu: 10px; /* popovers, menus */ --r-panel: 4px; /* the rare panel */ /* ── Motion — the house easing, at tool tempo ── */ --ease: cubic-bezier(.2,.7,.2,1); --dur-1: .15s; /* hover, toggles */ --dur-2: .25s; /* menus, theme cross */ --dur-3: .45s; /* page-level reveals */ } /* ── Registers — one skin, two densities ────────────────────── staff: the working tool. client: the reading room. */ :root { --row-y: 16px; --row-gap: var(--sp-3); } [data-register="staff"] { --row-y: 12px; --row-gap: var(--sp-2); } [data-register="client"] { --row-y: 20px; --row-gap: var(--sp-4); } /* ── Base ─────────────────────────────────────────────────────── */ * { box-sizing: border-box; } html, body { margin: 0; } /* Paint the canvas explicitly: without this, the area below a short page falls back to the browser canvas (which ignored the theme switch and rendered the dark floor under light pages). */ html { background: var(--bg); } body { background: var(--bg); color: var(--fg); font-family: var(--font-sans); font-size: var(--app-body); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease); } a { color: inherit; text-decoration: none; } ::selection { background: var(--selection-bg); color: var(--selection-fg); } /* numerals in data positions are always tabular */ .num, .sg-score, .sg-count, time { font-variant-numeric: tabular-nums; } /* ── Grain — the brand surface, one notch quieter for a tool. No vignette in working views; clarity is the point. ── */ .app-grain::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 60; opacity: var(--grain-opacity); mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } }