/* ============================================================================ DESIGN TOKENS · Postgres Table Browser ---------------------------------------------------------------------------- Single source of truth for the whole UI. Every component reads these CSS custom properties; nothing hard-codes a colour, size, or duration. LOCKED FOUNDATION · Type : Inter (UI; Schibsted Grotesk optional in Books) + JetBrains Mono (data / code) · Neutrals : "Blueprint" (default), light + dark · Accent : "Azure" (default theme); every other theme has its OWN tuned accent · Contrast : WCAG AA for all text · Delivery : web-first, installable PWA THEMING Two attributes on : data-theme = blueprint|slate|graphite|warm|carbon|dusk|stripe|solarized|newsprint|terminal data-mode = light | dark Default (no data-theme) is Blueprint. Each theme now ships its own accent (chosen per foundation), AA-computed against that theme's surfaces: blueprint=Azure slate=Teal graphite=Violet warm=Teal carbon=Coral dusk=Amber stripe=Teal solarized=Emerald newsprint=Amber terminal=Emerald Initialise data-mode from the OS on first load (see snippet at the bottom). Semantic colours (success/warning/danger/info) are shared across all themes and switch only by light/dark. ============================================================================ */ /* ============================================================================ FONT FACES — self-hosted (no third-party CDN; PWA-friendly, fast, private). Place the .woff2 under /static/fonts/. Only the used weights are loaded. ============================================================================ */ @font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/schibsted-grotesk-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/schibsted-grotesk-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("/static/fonts/schibsted-grotesk-latin-600-normal.woff2") format("woff2"); } @font-face { font-family: "Schibsted Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/schibsted-grotesk-latin-700-normal.woff2") format("woff2"); } /* Inter — the app-wide UI face (user 08-30): the VARIABLE font, v4.x from rsms.me — every weight 100–900 plus the opsz axis (optical sizing is on by default), upright and true italic. One file per style. */ @font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-variable.woff2") format("woff2-variations"); } @font-face { font-family: "Inter"; font-style: italic; font-weight: 100 900; font-display: swap; src: url("/static/fonts/inter-variable-italic.woff2") format("woff2-variations"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/static/fonts/jetbrains-mono-latin-400-normal.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/static/fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2"); } @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 700; font-display: swap; src: url("/static/fonts/jetbrains-mono-latin-700-normal.woff2") format("woff2"); } /* ============================================================================ :root — THEME-INDEPENDENT TOKENS + DEFAULT (Blueprint light) ============================================================================ */ :root { color-scheme: light dark; /* Typography: families */ --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Typography: weights (refinement drop): headers sit at MEDIUM — the lightness gap against the muted grays carries hierarchy, not boldness. 600 stays available as --fw-strong for rare, true emphasis. */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 500; --fw-strong: 600; /* Typography: scale — one step smaller across the board (refinement drop). AA is a contrast property and the palettes are unchanged. */ --fs-display: 27px; --lh-display: 1.10; --fs-h1: 21px; --lh-h1: 1.20; --fs-h2: 18px; --lh-h2: 1.25; --fs-h3: 16px; --lh-h3: 1.30; --fs-body: 14px; --lh-body: 1.55; --fs-sm: 12px; --lh-sm: 1.45; --fs-xs: 11px; --lh-xs: 1.40; --fs-mono: 12px; --lh-mono: 1.50; --tracking-tight: -0.01em; /* Spacing (4px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* Radii — Arena calibration, round 2: radius reads RELATIVE to element size, so smaller elements need smaller radii than Arena's big cards. Controls 10 · medium 12 · surfaces/cards 14 · sheets keep 22px tops. */ --radius-sm: 8px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; /* Borders + layout */ --border-width: 1px; --container-max: 1200px; --tap-min: 44px; --bp-sm: 640px; --bp-md: 940px; --z-sticky: 100; --z-overlay: 900; --z-modal: 1000; --z-toast: 1100; /* Motion */ --motion-fast: 120ms; --motion-base: 200ms; --motion-slow: 320ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); --ease-emphasized: cubic-bezier(0.2, 1, 0.2, 1); /* Semantic colours — light (shared across themes) */ --color-success-bg: #E3F3EB; --color-success-text: #0F7A53; --color-warning-bg: #FBEFD6; --color-warning-text: #8A5A00; --color-danger-bg: #FCE9E9; --color-danger-text: #B42318; --color-info-bg: #E6F0FE; --color-info-text: #1D4ED8; /* Elevation — light (soft, low-opacity, Blueprint-tinted) */ --shadow-card: 0 1px 2px rgba(11,30,59,0.06), 0 1px 3px rgba(11,30,59,0.05); --shadow-hover: 0 4px 12px rgba(11,30,59,0.10), 0 2px 4px rgba(11,30,59,0.06); --shadow-overlay: 0 12px 32px rgba(11,30,59,0.18); /* Focus ring (uses the active theme's accent ring) */ --focus-ring: 0 0 0 3px var(--color-accent-ring); /* DEFAULT neutral foundation — Blueprint (light) */ --color-bg: #ECF1FA; --color-surface: #FFFFFF; --color-surface-2: #E3EBF7; --color-border: #D2DEF0; --color-border-strong: #B3C5E2; --color-text: #0B1E3B; --color-text-secondary: #36507B; --color-text-tertiary: #6B82A6; /* accent — Azure */ --color-accent: #1C7DF3; --color-accent-fill: #1366D6; --color-accent-fill-text: #FFFFFF; --color-accent-text: #1366D6; --color-accent-ring: rgba(28, 125, 243, 0.30); } /* ============================================================================ DARK MODE (default theme = Blueprint). Shared dark semantics + shadows live here; per-theme dark neutrals/accents are in THEME OVERRIDES. ============================================================================ */ [data-mode="dark"] { /* semantic colours — dark */ --color-success-bg: #0E2E22; --color-success-text: #6EE7B0; --color-warning-bg: #332710; --color-warning-text: #F4C064; --color-danger-bg: #34191B; --color-danger-text: #FCA5A5; --color-info-bg: #10254A; --color-info-text: #93B4FD; /* elevation — dark */ --shadow-card: 0 1px 2px rgba(0,0,0,0.40), 0 1px 3px rgba(0,0,0,0.30); --shadow-hover: 0 6px 16px rgba(0,0,0,0.50); --shadow-overlay: 0 14px 36px rgba(0,0,0,0.60); /* neutral foundation — Blueprint (dark) */ --color-bg: #07142B; --color-surface: #0B1E3B; --color-surface-2: #122A4D; --color-border: #1E3A63; --color-border-strong: #2F5288; --color-text: #E3ECFA; --color-text-secondary: #9DB4D8; --color-text-tertiary: #6C84AC; /* accent link — Blueprint dark */ --color-accent-text: #6FAEFA; } /* ============================================================================ THEME OVERRIDES — each foundation's neutrals AND its own tuned accent. ============================================================================ */ /* --- Blueprint (default) · accent: Azure --- */ [data-theme="blueprint"] { --color-bg: #ECF1FA; --color-surface: #FFFFFF; --color-surface-2: #E3EBF7; --color-border: #D2DEF0; --color-border-strong: #B3C5E2; --color-text: #0B1E3B; --color-text-secondary: #36507B; --color-text-tertiary: #6B82A6; /* accent — Azure */ --color-accent: #1C7DF3; --color-accent-fill: #1366D6; --color-accent-fill-text: #FFFFFF; --color-accent-text: #1366D6; --color-accent-ring: rgba(28, 125, 243, 0.30); } [data-theme="blueprint"][data-mode="dark"] { --color-bg: #07142B; --color-surface: #0B1E3B; --color-surface-2: #122A4D; --color-border: #1E3A63; --color-border-strong: #2F5288; --color-text: #E3ECFA; --color-text-secondary: #9DB4D8; --color-text-tertiary: #6C84AC; --color-accent-text: #6FAEFA; } /* --- Slate · accent: Teal --- */ [data-theme="slate"] { --color-bg: #F5F7FA; --color-surface: #FFFFFF; --color-surface-2: #EEF2F7; --color-border: #E3E8EF; --color-border-strong: #CBD5E1; --color-text: #0F2133; --color-text-secondary: #475569; --color-text-tertiary: #7C8B9C; /* accent — Teal */ --color-accent: #14A88F; --color-accent-fill: #0B6F62; --color-accent-fill-text: #FFFFFF; --color-accent-text: #0B6F62; --color-accent-ring: rgba(20, 168, 143, 0.30); } [data-theme="slate"][data-mode="dark"] { --color-bg: #0B1220; --color-surface: #121C2E; --color-surface-2: #1B2740; --color-border: #26344B; --color-border-strong: #3A4D6B; --color-text: #E7EEF6; --color-text-secondary: #A2B2C6; --color-text-tertiary: #6E8095; --color-accent-text: #6FE0C6; } /* --- Graphite (achromatic) · accent: Violet --- */ [data-theme="graphite"] { --color-bg: #FAFAFA; --color-surface: #FFFFFF; --color-surface-2: #F2F2F2; --color-border: #E4E4E4; --color-border-strong: #CFCFCF; --color-text: #111111; --color-text-secondary: #525252; --color-text-tertiary: #8A8A8A; /* accent — Violet */ --color-accent: #8B5CF6; --color-accent-fill: #7C3AED; --color-accent-fill-text: #FFFFFF; --color-accent-text: #7C3AED; --color-accent-ring: rgba(139, 92, 246, 0.30); } [data-theme="graphite"][data-mode="dark"] { --color-bg: #0A0A0A; --color-surface: #161616; --color-surface-2: #1F1F1F; --color-border: #2C2C2C; --color-border-strong: #444444; --color-text: #F4F4F4; --color-text-secondary: #B0B0B0; --color-text-tertiary: #7A7A7A; --color-accent-text: #BFA3FB; } /* --- Warm Stone · accent: Teal --- */ [data-theme="warm"] { --color-bg: #F7F5F1; --color-surface: #FFFFFF; --color-surface-2: #F0ECE5; --color-border: #E7E1D8; --color-border-strong: #D2C9BC; --color-text: #23201B; --color-text-secondary: #5C554B; --color-text-tertiary: #8E8579; /* accent — Teal */ --color-accent: #14A88F; --color-accent-fill: #0B6F62; --color-accent-fill-text: #FFFFFF; --color-accent-text: #0B6F62; --color-accent-ring: rgba(20, 168, 143, 0.30); } [data-theme="warm"][data-mode="dark"] { --color-bg: #14110D; --color-surface: #1E1A15; --color-surface-2: #272219; --color-border: #332D24; --color-border-strong: #4A4234; --color-text: #F2EEE7; --color-text-secondary: #B7AE9F; --color-text-tertiary: #80776A; --color-accent-text: #6FE0C6; } /* --- Carbon (brutalist) · accent: Coral --- */ [data-theme="carbon"] { --color-bg: #FFFFFF; --color-surface: #FFFFFF; --color-surface-2: #F4F4F4; --color-border: #000000; --color-border-strong: #000000; --color-text: #000000; --color-text-secondary: #383838; --color-text-tertiary: #6E6E6E; /* accent — Coral */ --color-accent: #DE3F22; --color-accent-fill: #B82F17; --color-accent-fill-text: #FFFFFF; --color-accent-text: #B82F17; --color-accent-ring: rgba(222, 63, 34, 0.30); } [data-theme="carbon"][data-mode="dark"] { --color-bg: #000000; --color-surface: #000000; --color-surface-2: #0E0E0E; --color-border: #3A3A3A; --color-border-strong: #5A5A5A; --color-text: #FFFFFF; --color-text-secondary: #C4C4C4; --color-text-tertiary: #8A8A8A; --color-accent-text: #FB8267; } /* --- Dusk (tinted) · accent: Amber --- */ [data-theme="dusk"] { --color-bg: #F6F4F9; --color-surface: #FFFFFF; --color-surface-2: #F0EDF6; --color-border: #E6E1EF; --color-border-strong: #CFC7DD; --color-text: #1E1830; --color-text-secondary: #544B6B; --color-text-tertiary: #8B83A0; /* accent — Amber */ --color-accent: #C2870E; --color-accent-fill: #9E6D09; --color-accent-fill-text: #FFFFFF; --color-accent-text: #9E6D09; --color-accent-ring: rgba(194, 135, 14, 0.30); } [data-theme="dusk"][data-mode="dark"] { --color-bg: #120F1C; --color-surface: #1B1726; --color-surface-2: #241F33; --color-border: #322B45; --color-border-strong: #473E5F; --color-text: #ECE8F5; --color-text-secondary: #ADA3C2; --color-text-tertiary: #776E8C; --color-accent-text: #F2C14E; } /* --- Stripe (navy reference) · accent: Teal --- */ [data-theme="stripe"] { --color-bg: #F6F9FC; --color-surface: #FFFFFF; --color-surface-2: #F2F6FB; --color-border: #E3E8EE; --color-border-strong: #C1CCD9; --color-text: #0A2540; --color-text-secondary: #425466; --color-text-tertiary: #6B7C93; /* accent — Teal */ --color-accent: #14A88F; --color-accent-fill: #0B6F62; --color-accent-fill-text: #FFFFFF; --color-accent-text: #0B6F62; --color-accent-ring: rgba(20, 168, 143, 0.30); } [data-theme="stripe"][data-mode="dark"] { --color-bg: #07182B; --color-surface: #0C2238; --color-surface-2: #143049; --color-border: #21405C; --color-border-strong: #355A7B; --color-text: #E6EEF7; --color-text-secondary: #9FB4CB; --color-text-tertiary: #6E8499; --color-accent-text: #6FE0C6; } /* --- Solarized · accent: Emerald --- */ [data-theme="solarized"] { --color-bg: #FDF6E3; --color-surface: #FFFCF2; --color-surface-2: #F4ECD6; --color-border: #EEE8D5; --color-border-strong: #DCD4BC; --color-text: #073642; --color-text-secondary: #586E75; --color-text-tertiary: #7A8C8C; /* accent — Emerald */ --color-accent: #12B76A; --color-accent-fill: #027A48; --color-accent-fill-text: #FFFFFF; --color-accent-text: #027A48; --color-accent-ring: rgba(18, 183, 106, 0.30); } [data-theme="solarized"][data-mode="dark"] { --color-bg: #002B36; --color-surface: #073642; --color-surface-2: #0A4250; --color-border: #0E4B5A; --color-border-strong: #1A6477; --color-text: #EEE8D5; --color-text-secondary: #93A1A1; --color-text-tertiary: #6C8A8E; --color-accent-text: #6CE9A6; } /* --- Newsprint (sepia) · accent: Amber --- */ [data-theme="newsprint"] { --color-bg: #F4EAD6; --color-surface: #FBF4E6; --color-surface-2: #EFE3CC; --color-border: #E4D7BE; --color-border-strong: #CDBE9F; --color-text: #211B12; --color-text-secondary: #5A4F3C; --color-text-tertiary: #8A7C63; /* accent — Amber */ --color-accent: #C2870E; --color-accent-fill: #9E6D09; --color-accent-fill-text: #FFFFFF; --color-accent-text: #7C5506; --color-accent-ring: rgba(194, 135, 14, 0.30); } [data-theme="newsprint"][data-mode="dark"] { --color-bg: #14110B; --color-surface: #1D1810; --color-surface-2: #271F14; --color-border: #352B1C; --color-border-strong: #4A3D28; --color-text: #F1E9D8; --color-text-secondary: #B8A98C; --color-text-tertiary: #847660; --color-accent-text: #F2C14E; } /* --- Terminal (phosphor) · accent: Emerald --- */ [data-theme="terminal"] { --color-bg: #EDF3EC; --color-surface: #FFFFFF; --color-surface-2: #E6EFE4; --color-border: #D7E3D4; --color-border-strong: #B6C7B2; --color-text: #0E1F16; --color-text-secondary: #3C5347; --color-text-tertiary: #6E847A; /* accent — Emerald */ --color-accent: #12B76A; --color-accent-fill: #027A48; --color-accent-fill-text: #FFFFFF; --color-accent-text: #027A48; --color-accent-ring: rgba(18, 183, 106, 0.30); } [data-theme="terminal"][data-mode="dark"] { --color-bg: #04120B; --color-surface: #08180F; --color-surface-2: #0E2417; --color-border: #16351F; --color-border-strong: #245235; --color-text: #D7F5DF; --color-text-secondary: #8FC9A2; --color-text-tertiary: #5E8E6E; --color-accent-text: #6CE9A6; } /* ============================================================================ REDUCED MOTION ============================================================================ */ @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0.01ms; --motion-base: 0.01ms; --motion-slow: 0.01ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================================================ OPTIONAL BASE — minimal element defaults wired to the tokens. ============================================================================ */ html { font-family: var(--font-sans); } /* the Books font toggle (user 08-30): Inter is the app-wide default now; the Books pages can still flip BACK to Schibsted via the Font row */ html[data-bookfont="schibsted"] body.books-mode { --font-sans: "Schibsted Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-family: var(--font-sans); } body { margin: 0; background: var(--color-bg); color: var(--color-text); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-regular); -webkit-font-smoothing: antialiased; transition: background-color var(--motion-base) var(--ease-standard), color var(--motion-base) var(--ease-standard); } :where(h1,h2,h3) { letter-spacing: var(--tracking-tight); font-weight: var(--fw-semibold); } code, kbd, samp, .mono { font-family: var(--font-mono); font-size: var(--fs-mono); } a { color: var(--color-accent-text); } :where(a,button,input,select,textarea):focus-visible { outline: none; box-shadow: var(--focus-ring); } /* ============================================================================ THEME SWITCHER (reference snippet — copy into the app's JS) ---------------------------------------------------------------------------- function setTheme(t){ document.documentElement.dataset.theme = t; localStorage.setItem("theme", t); } function setMode(m){ document.documentElement.dataset.mode = m; localStorage.setItem("mode", m); } const sysDark = matchMedia("(prefers-color-scheme: dark)").matches; setTheme(localStorage.getItem("theme") || "blueprint"); setMode(localStorage.getItem("mode") || (sysDark ? "dark" : "light")); ============================================================================ */ /* ============================================================================ EXPRESSIVE LAYER — BLUEPRINT ONLY (added for the full "NextEra-style" hierarchy) ---------------------------------------------------------------------------- Adds the roles the base tokens lacked: a fuller ACCENT scale (tint/strong/ overlay), TWO inverted "punctuation" surfaces (accent + dark-neutral) each with an on-surface text ramp, a quarantined 6-series CHART palette, and a 3-tone SENTIMENT scale. Scoped to Blueprint (the default): values live on :root and are flipped under [data-mode="dark"]. Other themes inherit these until they get their own expressive layer. ============================================================================ */ :root { /* --- extra neutral step --- */ --color-border-subtle: #EDF1F8; /* --- accent (Azure) extended roles --- */ --color-accent-strong: #0F52AC; /* stronger emphasis / hover */ --color-accent-tint: #EAF4FF; /* soft fill: selected rows, tint cards */ --color-accent-tint-strong: #D0E6FF; /* hover on tint */ --color-on-accent-tint: #0C3F84; /* text on the tint (AA on #EAF4FF) */ --color-accent-overlay: rgba(28, 125, 243, 0.12); /* scrim / hover wash */ /* --- inverted surface A: ACCENT (azure fill; identical in both modes) --- */ --color-surface-accent: #1366D6; --color-on-accent: #FFFFFF; --color-on-accent-secondary: rgba(255, 255, 255, 0.82); --color-on-accent-tertiary: rgba(255, 255, 255, 0.64); --color-on-accent-border: rgba(255, 255, 255, 0.22); /* --- inverted surface B: DARK-NEUTRAL (deep navy in light mode) --- */ --color-surface-inverted: #0A2138; --color-on-inverted: #FFFFFF; --color-on-inverted-secondary: rgba(255, 255, 255, 0.80); --color-on-inverted-tertiary: rgba(255, 255, 255, 0.60); --color-on-inverted-border: rgba(255, 255, 255, 0.16); --color-on-inverted-accent: #6FAEFA; /* accent link on the dark surface */ /* --- chart palette (quarantined; desaturated, Blueprint-harmonized) --- */ --color-chart-1: #2E6FB0; /* blue */ --color-chart-2: #2C8C86; /* teal */ --color-chart-3: #C08A2E; /* gold */ --color-chart-4: #C0603F; /* terracotta */ --color-chart-5: #7A6FC0; /* violet */ --color-chart-6: #4E9E68; /* green */ --color-chart-grid: #E3EBF7; --color-chart-axis: #6B82A6; --color-chart-track: #EEF2F9; /* --- sentiment (3-tone): solid (chart) + soft bg/text (pills) --- */ --color-sentiment-positive: #2F8F5F; --color-sentiment-positive-bg: #E4F3EB; --color-sentiment-positive-text: #1E6B45; --color-sentiment-neutral: #9FA9B8; --color-sentiment-neutral-bg: #ECEFF3; --color-sentiment-neutral-text: #566475; --color-sentiment-negative: #C0473A; --color-sentiment-negative-bg: #FBE9E7; --color-sentiment-negative-text: #A5382C; } [data-mode="dark"] { --color-border-subtle: #16283F; /* accent extended — dark */ --color-accent-strong: #6FAEFA; --color-accent-tint: #12243D; --color-accent-tint-strong: #17314F; --color-on-accent-tint: #CFE3FF; --color-accent-overlay: rgba(111, 174, 250, 0.16); /* inverted A (accent) — on-accent ramp is inherited from :root (constant) */ /* inverted B (dark-neutral) — FLIPS to a bright panel with dark text in dark mode */ --color-surface-inverted: #E7EEF8; --color-on-inverted: #0A2138; --color-on-inverted-secondary: rgba(10, 33, 56, 0.72); --color-on-inverted-tertiary: rgba(10, 33, 56, 0.52); --color-on-inverted-border: rgba(10, 33, 56, 0.12); --color-on-inverted-accent: #1366D6; /* chart palette — dark (lighter, so series read on dark surfaces) */ --color-chart-1: #6FA8DE; --color-chart-2: #5FBDB4; --color-chart-3: #E0B25E; --color-chart-4: #E08A6B; --color-chart-5: #A99BE0; --color-chart-6: #7FC894; --color-chart-grid: #1E3A63; --color-chart-axis: #6C84AC; --color-chart-track: #122A4D; /* sentiment — dark */ --color-sentiment-positive: #5FBE8E; --color-sentiment-positive-bg: #12301F; --color-sentiment-positive-text: #7FD6A6; --color-sentiment-neutral: #8A94A4; --color-sentiment-neutral-bg: #232A34; --color-sentiment-neutral-text: #AEB8C6; --color-sentiment-negative: #D97567; --color-sentiment-negative-bg: #34191B; --color-sentiment-negative-text: #F0A79C; } /* --- Dropbox · accent: Dropbox Blue #0061FE (brand.dropbox.com/color) ------ The 11th theme and the DEFAULT (Changes round 1, CH1). Its signature rule, learned from Dropbox's product UI: NO demarcation lines — borders go transparent and structure is carried by spacing + surface contrast. Light surfaces use Dropbox's off-white "Coconut" (#F7F5F2); dark surfaces its warm near-blacks (#1E1919 family). ---------------------------------- */ [data-theme="dropbox"] { --color-bg: #FFFFFF; --color-surface: #F7F5F2; --color-surface-2: #EFECE8; --color-border: transparent; --color-border-strong: transparent; --color-text: #1E1919; --color-text-secondary: #52514E; --color-text-tertiary: #8A8783; /* accent — Dropbox Blue */ --color-accent: #0061FE; --color-accent-fill: #0061FE; --color-accent-fill-text: #FFFFFF; --color-accent-text: #0057E5; --color-accent-ring: rgba(0, 97, 254, 0.30); } [data-theme="dropbox"][data-mode="dark"] { --color-bg: #0D0C0B; --color-surface: #1E1919; --color-surface-2: #2B2626; --color-border: transparent; --color-border-strong: transparent; --color-text: #F7F5F2; --color-text-secondary: #BBB5AE; --color-text-tertiary: #8F8A84; --color-accent-text: #5A93FF; } /* Dropbox de-lining: with borders transparent, interactive/less-elevated pieces need filled surfaces and rounder shapes to keep their affordance. */ [data-theme="dropbox"] .input, [data-theme="dropbox"] .select { background: var(--color-surface); border-radius: 10px; } [data-theme="dropbox"] .card, [data-theme="dropbox"] .detail-card { background: var(--color-surface); border-radius: 14px; } [data-theme="dropbox"] .btn-secondary, [data-theme="dropbox"] .btn-ghost { background: var(--color-surface); border-radius: 10px; } [data-theme="dropbox"] .btn-primary { border-radius: 10px; } [data-theme="dropbox"] table.data thead th { border-bottom: 1px solid var(--color-surface-2); /* one soft rule, not a grid */ } [data-theme="dropbox"] .banner { border-radius: 14px; }