/* * didiaoapi · brand theme * Injected by reverse proxy as * * Target: new-api v1.0.0-rc.40 (Shadcn/Tailwind CSS v4, NOT Semi Design) * Dark mode selector: .dark on (added/removed by app's theme provider) * * Design system: jiojio brand — tokens copied verbatim from brand/index.html * Fawn #A07E58 (accent / interaction) * Fawn-Deep #7A5E3E (logo seal background) * Paper #FAF8F2 (light bg) * Bark #2D271C (dark bg) * Ink #16140F (primary text) * DM Sans (UI) · Source Serif 4 (display h1–h3) · JetBrains Mono (data/numbers) * * Strategy: override CSS custom properties; prefer :root / .dark token overrides * over element rules. Tailwind hard-coded classes get narrow targeted overrides. * Cache-bust: increment ?v= query when deploying changes. */ /* ============================================================ 1 · GOOGLE FONTS ============================================================ */ @import url("https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300..700;1,9..40,300..700&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..700;1,8..60,200..700&family=JetBrains+Mono:wght@400;500;600&family=Noto+Serif+SC:wght@400;600;900&display=swap"); /* ============================================================ 2 · FONT STACK OVERRIDES Override new-api's default "Public Sans" with brand faces. --font-body is the app's UI body variable. ============================================================ */ :root { --font-sans: "DM Sans", "Noto Sans SC", ui-sans-serif, system-ui, sans-serif; --font-serif: "Source Serif 4", "Noto Serif SC", Georgia, serif; /* JetBrains Mono with tabular-nums for all data/numeric contexts */ --font-mono: "JetBrains Mono", ui-monospace, Menlo, Monaco, Consolas, monospace; --font-body: var(--font-sans); } /* Tailwind hard-coded .font-sans utility also picks up the system default; override it to track our brand sans. (Scoped to html for lower specificity.) */ html { font-family: var(--font-sans); } /* ============================================================ 3 · LIGHT MODE TOKENS (:root) Color tokens from brand/index.html :root block — verbatim hex. New-api uses Shadcn-style property names: --background / --foreground / --card / --popover --primary / --secondary / --muted / --accent --border / --input / --ring / --radius --sidebar / --sidebar-* family ============================================================ */ :root { /* Backgrounds & surfaces */ --background: #FAF8F2; /* brand: Paper */ --foreground: #16140F; /* brand: Ink / NEUTRAL-900 */ --card: #FFFFFF; /* brand: surface */ --card-foreground: #16140F; --popover: #FFFFFF; --popover-foreground: #16140F; /* Primary = Fawn (replaces new-api default blue) */ --primary: #A07E58; /* Fawn-400 canonical */ --primary-foreground: #FFFFFF; /* Secondary = warm inset surface */ --secondary: #F3F1E9; /* brand: surface-2 / NEUTRAL-100 */ --secondary-foreground: #5A442C; /* Fawn-700 */ /* Muted = quiet backgrounds */ --muted: #F3F1E9; --muted-foreground: #6B675C; /* brand: text-2 / NEUTRAL-600 */ /* Accent: kept in sync with primary via app's own var(--primary) reference. Override the accent-foreground so text on accent is readable. */ --accent-foreground: #16140F; /* Semantic */ --destructive: #C4453C; /* brand: danger */ --destructive-foreground: #FFFFFF; --success: #788C5D; /* brand: success */ --success-foreground: #FFFFFF; --warning: #C7923E; /* brand: warn */ --warning-foreground: #16140F; --info: #6A9BCC; /* brand: info */ --info-foreground: #FFFFFF; /* Borders & inputs */ --border: #E0DDD1; /* brand: NEUTRAL-200 */ --input: #E0DDD1; /* Focus ring: Fawn to match brand interaction color */ --ring: #A07E58; /* Border radius: brand --r-md = 10px ≈ 0.625rem. New-api uses --radius as a multiplier base; setting 0.625rem brings the default radius in line with brand, but keeps the app's radius scale (md, lg, xl) proportional. */ --radius: 0.625rem; /* Sidebar */ --sidebar: #FAF8F2; /* same as page bg — clean panel */ --sidebar-foreground: #16140F; --sidebar-primary: #A07E58; --sidebar-primary-foreground: #FFFFFF; --sidebar-accent-foreground: #5A442C; --sidebar-border: #E0DDD1; --sidebar-ring: #A07E58; /* Charts — warm analogous palette (functional; less decorative than default) */ --chart-1: #A07E58; /* Fawn */ --chart-2: #788C5D; /* brand success-green */ --chart-3: #6A9BCC; /* brand info-blue */ --chart-4: #C7923E; /* brand warn-amber */ --chart-5: #C4453C; /* brand danger-red */ } /* ============================================================ 4 · DARK MODE TOKENS (.dark on ) brand/index.html [data-theme="dark"] values — verbatim. ============================================================ */ .dark { --background: #2D271C; /* Bark */ --foreground: #F3EEE2; /* brand: text in dark */ --card: #362F24; /* brand: surface dark */ --card-foreground: #F3EEE2; --popover: #362F24; --popover-foreground: #F3EEE2; /* Primary stays Fawn — same hue in both modes per brand rule */ --primary: #A07E58; --primary-foreground: #FFFFFF; --secondary: #3E372B; /* brand: surface-2 dark */ --secondary-foreground: #C2A77E; /* Fawn-300 warm */ --muted: #3E372B; --muted-foreground: #B0A898; /* brand: text-2 dark */ --accent-foreground: #F3EEE2; --destructive: #C4453C; --destructive-foreground: #FFFFFF; --success: #788C5D; --success-foreground: #FFFFFF; --warning: #C7923E; --warning-foreground: #16140F; --info: #6A9BCC; --info-foreground: #FFFFFF; --border: #483F33; /* brand: border dark */ --input: #483F33; --ring: #A07E58; --sidebar: #2D271C; --sidebar-foreground: #F3EEE2; --sidebar-primary: #A07E58; --sidebar-primary-foreground: #FFFFFF; --sidebar-accent-foreground: #C2A77E; --sidebar-border: #483F33; --sidebar-ring: #A07E58; /* Skeleton shimmer on dark */ --skeleton-base: #362F24; --skeleton-highlight: #3E372B; /* Charts same warm palette on dark */ --chart-1: #C2A77E; /* Fawn-300 — lighter on dark */ --chart-2: #96AD78; --chart-3: #8DB5D9; --chart-4: #D9A86A; --chart-5: #D46B65; } /* ============================================================ 5 · TYPOGRAPHY h1–h3: Source Serif 4 weight 300 (brand display style) UI body: DM Sans (via --font-sans already set) Numbers / code / .font-mono / .tabular-nums: JetBrains Mono + tabular-nums (table cells NOT forced to mono: header/empty-state text in mono read wrong on 2026-09-27 review) ============================================================ */ /* Display headings (h1, h2, h3) */ h1, h2, h3 { font-family: var(--font-serif); font-weight: 300; letter-spacing: -0.015em; } /* Sub-headings keep DM Sans per brand spec */ h4, h5, h6 { font-family: var(--font-sans); font-weight: 600; } /* Brand mono + tabular figures for: - explicit code elements - table cells (quota counts, token IDs, timestamps, numbers) - input fields with [type=number] */ code, pre, .font-mono, .tabular-nums, input[type="number"], input[type="text"].tabular { font-family: var(--font-mono) !important; /* override .font-mono Tailwind class */ font-feature-settings: "tnum", "kern", "ss01"; font-variant-numeric: tabular-nums; } /* Tailwind's .font-mono class — ensure brand mono loads */ /* (Tailwind normally maps this to system monospace; we need JetBrains Mono) */ .font-mono { font-family: var(--font-mono) !important; /* narrow: only .font-mono classes */ } /* ============================================================ 6 · DECORATIVE GRADIENT / SHADOW CLEANUP new-api v1.0.0-rc.40 has landing-page classes with animated gradients and a hero section. Tone these down for the brand's "clean over decorated" rule without breaking layout. ============================================================ */ /* Landing / hero section — remove heavy gradient backgrounds. These are .bg-linear-to-* Tailwind classes on the hero wrapper. We can't easily target them without !important because Tailwind utility specificity matches ours. */ /* Light: replace gradient hero bg with plain Paper */ .bg-linear-to-b, .bg-linear-to-r, .bg-linear-to-t, .bg-linear-to-br, .bg-gradient-to-br { /* Only neutralize when the gradient is purely decorative chrome. We don't know which elements use these, so only override the from/to stops to match the background token — keeps layout intact while removing the blue/colored gradient. */ --tw-gradient-from: var(--background); --tw-gradient-to: var(--background); --tw-gradient-via: var(--background); } /* Card shadows — soften to brand shadow scale */ .shadow, .shadow-sm, .shadow-md { --tw-shadow: 0 2px 8px rgba(20, 20, 19, 0.06); } .dark .shadow, .dark .shadow-sm, .dark .shadow-md { --tw-shadow: 0 2px 8px rgba(0, 0, 0, 0.30); } /* Focus rings — brand Fawn instead of blue */ *:focus-visible { outline-color: var(--ring); } /* ============================================================ 7 · TAILWIND HARD-CODED COLOR OVERRIDES These classes emit literal color values not derived from CSS vars. Narrowly scoped; each has a comment explaining why. ============================================================ */ /* .bg-white appears on popover / dialog overlays — replace with surface token */ .bg-white { background-color: var(--card) !important; /* hard-coded #fff bypasses --background */ } .dark .bg-white { background-color: var(--card) !important; } /* .bg-white/95 (popover backdrop-blur container) */ .bg-white\/95 { background-color: color-mix(in oklab, var(--card) 95%, transparent) !important; } .dark .bg-white\/95 { background-color: color-mix(in oklab, var(--card) 95%, transparent) !important; } /* ============================================================ 8 · SELECTION & SCROLLBAR TINT ============================================================ */ ::selection { background: #A07E58; /* Fawn */ color: #FFFFFF; } /* Chromium custom scrollbar — subtle Fawn tint */ ::-webkit-scrollbar { width: 6px; height: 6px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: #C2BFB2; border-radius: 9999px; } ::-webkit-scrollbar-thumb:hover { background: #A07E58; } .dark ::-webkit-scrollbar-thumb { background: #483F33; } .dark ::-webkit-scrollbar-thumb:hover { background: #A07E58; }