/* AML design tokens — the deck is the source of truth for "Original". Apply on or : data-theme="original" | "day" | "night" data-accent="green" | "emerald" | "amber" | "sky" | "violet" | "rose" Defaults: original + green. */ :root { --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-pill: 999px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --shadow-card: 0 14px 32px rgba(0, 0, 0, 0.4); --noise-opacity: 0.55; } /* ===== Themes ===== */ [data-theme="original"], :root:not([data-theme]) { color-scheme: dark; --bg: #07100c; --bg-2: #0b1a14; --bg-elev: rgba(18, 24, 21, 0.85); --ink: #f1ede2; --ink-soft: #c9d1c5; --ink-dim: #8a9890; --line: rgba(241, 237, 226, 0.08); --line-strong: rgba(241, 237, 226, 0.18); --char: #121815; --ambient: radial-gradient(1200px 800px at 20% 10%, rgba(47, 107, 84, 0.18), transparent 60%), radial-gradient(900px 700px at 85% 90%, rgba(127, 200, 155, 0.07), transparent 60%); } [data-theme="day"] { color-scheme: light; --bg: #f5f3ec; --bg-2: #ebe7d8; --bg-elev: rgba(255, 253, 247, 0.86); --ink: #0f2a22; --ink-soft: #2d4940; --ink-dim: #5e6e66; --line: rgba(15, 42, 34, 0.1); --line-strong: rgba(15, 42, 34, 0.22); --char: #e8e3d2; --ambient: radial-gradient(1100px 700px at 20% 5%, rgba(127, 200, 155, 0.22), transparent 60%), radial-gradient(900px 700px at 90% 95%, rgba(47, 107, 84, 0.12), transparent 60%); --noise-opacity: 0.25; --shadow-card: 0 14px 32px rgba(15, 42, 34, 0.08); } [data-theme="night"] { color-scheme: dark; --bg: #000000; --bg-2: #0a0a0a; --bg-elev: rgba(14, 14, 14, 0.9); --ink: #f5f5f7; --ink-soft: rgba(245, 245, 247, 0.78); --ink-dim: rgba(245, 245, 247, 0.5); --line: rgba(245, 245, 247, 0.06); --line-strong: rgba(245, 245, 247, 0.16); --char: #0c0c0c; --ambient: radial-gradient(1400px 900px at 50% 100%, rgba(0, 0, 0, 0.6), transparent 70%); --noise-opacity: 0.2; } /* ===== Accents ===== */ /* Each accent sets --accent (primary), --accent-glow (lighter), --accent-deep (darker). */ :root, [data-accent="green"] { --accent: #7fc89b; --accent-glow: #a8e6c0; --accent-deep: #2f6b54; --accent-on: #061410; } [data-accent="emerald"] { --accent: #34d399; --accent-glow: #6ee7b7; --accent-deep: #047857; --accent-on: #042f1c; } [data-accent="amber"] { --accent: #e89a4a; --accent-glow: #f5b870; --accent-deep: #a25a1d; --accent-on: #1c0f04; } /* Used by the Landscape Designer tool — matches its native #ff7a1a brand. */ [data-accent="orange"] { --accent: #ff7a1a; --accent-glow: #ffa15a; --accent-deep: #c25410; --accent-on: #1a0a02; } [data-accent="sky"] { --accent: #38bdf8; --accent-glow: #7dd3fc; --accent-deep: #0369a1; --accent-on: #04162a; } [data-accent="violet"] { --accent: #a78bfa; --accent-glow: #c4b5fd; --accent-deep: #6d28d9; --accent-on: #16092e; } [data-accent="rose"] { --accent: #fb7185; --accent-glow: #fda4af; --accent-deep: #be123c; --accent-on: #2a050d; }