/* ========================================================= ADYA - Design Tokens Two layers in one file: L1 = Page chrome (homepage hero, phases, bands, footer) L2 = Embedded UI (in-section product illustrations) Import this file FIRST on every page. Layer 2 tokens are namespaced with -eui-* so they can coexist with L1. ========================================================= */ /* - L1: Page chrome (homepage) - */ :root { /* Sandwich gradient stops */ --bg-top: #06081A; /* near-black blue */ --bg-deep: #0B0E22; --bg-mid-blue: #0C1854; /* deep blue middle */ --bg-warm: #1B0F2E; /* transition violet */ --bg-bottom: #2A0E2C; /* red/pink bottom */ --bg-jetblack: #000000; /* Text */ --fg-primary: #FFFFFF; --fg-secondary: rgba(255, 255, 255, 0.85); --fg-muted: rgba(255, 255, 255, 0.70); --fg-dim: #9A9696; --fg-grey: #D0D0D0; /* Accents (warm-side) */ --accent-yellow: #DCE926; /* keyword highlights inside prompt card */ --accent-amber: #FFC936; --accent-pink: #9E2F5B; /* shared bridge with L2 magenta */ --accent-green: rgba(82, 239, 124, 0.7); --tag-green-bg: rgba(138, 255, 123, 0.30); --tag-green-fg: #004508; --tag-blue-bg: rgba(146, 164, 255, 0.31); --tag-blue-fg: #000B89; /* Accents (cool-side, also used by L2) */ --accent-blue: #3395FF; --accent-blue-bright:#00A3FF; --accent-cyan: #BDFCFE; --accent-violet: rgba(84, 72, 243, 0.31); /* Glows */ --glow-pink: rgba(184, 53, 100, 1); --glow-pink-soft: rgba(184, 53, 100, 0.45); --glow-blue: rgba(26, 35, 120, 1); --glow-blue-soft: rgba(26, 35, 120, 0.8); --glow-cyan: rgba(55, 192, 250, 0.6); /* Surfaces */ --surface-card: rgba(255, 255, 255, 0.06); --surface-hi: rgba(255, 255, 255, 0.10); --border-soft: rgba(255, 255, 255, 0.10); --border-hairline: rgba(255, 255, 255, 0.07); /* Type families - corrected to match figma export (the real source of truth) */ --font-display: 'Inter', 'Helvetica Neue', system-ui, sans-serif; /* hero headlines, section heads */ --font-body: 'Geist', system-ui, sans-serif; /* body copy, nav, default */ --font-serif: 'Fraunces', 'Iowan Old Style', Georgia, serif; /* serif accents (studio labels) */ --font-highlight: 'Manrope', 'Inter', system-ui, sans-serif; /* top proof metrics */ --font-secondary: 'Nunito Sans', 'Inter', system-ui, sans-serif; /* embedded prompt/UI body */ --font-small-caps: 'Marcellus SC', Georgia, serif; /* specialized embedded UI label */ --font-apple-ui: 'SF Pro', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; --font-wordmark: 'Cabinet Grotesk', system-ui, sans-serif; /* "Adya" wordmark only */ --font-mono: 'Geist Mono', ui-monospace, monospace; /* L1 technical meta */ --font-mono-eui: 'JetBrains Mono', ui-monospace, monospace; /* L2 metric/meta lines */ /* Type scale (rounded from figma fractionals) */ --fs-eyebrow: 11px; --fs-meta: 12px; --fs-body: 14px; --fs-body-lg: 16px; --fs-subhead: 19px; --fs-headline: 24px; --fs-display: 40px; --fs-display-xl: 64px; /* Radii */ --r-pill: 9999px; --r-md: 12px; --r-lg: 16px; --r-xl: 20px; /* Spacing scale */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px; --s-9: 64px; --s-10: 96px; --s-11: 128px; /* Shadows */ --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.25); --shadow-frame: 0 30px 80px rgba(0, 0, 0, 0.50), 0 0 120px rgba(184, 53, 100, 0.25); } /* Sandwich background - use on the homepage or top wrapper */ .page-bg { background: linear-gradient(180deg, var(--bg-top) 0%, var(--bg-top) 14%, var(--bg-deep) 26%, #08113E 42%, var(--bg-mid-blue) 62%, var(--bg-warm) 86%, var(--bg-bottom) 100% ); color: var(--fg-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; } /* Faint grid overlay used over hero */ .grid-overlay { background-image: linear-gradient(180deg, rgba(255,255,255,0.024) 1.78%, transparent 1.78%), linear-gradient( 90deg, rgba(255,255,255,0.024) 1.78%, transparent 1.78%); background-size: 56px 56px; } /* - L2: Embedded UI (illustration components) - */ :root { --eui-bg-canvas: #040509; --eui-bg-canvas-mid: #0A0E1A; --eui-surface-root: rgba(5, 5, 5, 0.90); --eui-surface-inset: rgba(11, 13, 20, 0.85); --eui-surface-pill: rgba(17, 20, 30, 0.60); --eui-text-primary: #F5F7FF; --eui-text-secondary: #9A9696; --eui-text-muted: rgba(245, 247, 255, 0.45); --eui-blue: #3395FF; --eui-blue-bright: #00A3FF; --eui-blue-deep: #2737CF; --eui-blue-shadow: #131973; --eui-blue-haze: #285299; --eui-cyan: #BDFCFE; --eui-magenta: #9E2F5B; /* bridges to L1 -accent-pink */ --eui-purple: #D782FF; --eui-indigo: #2E335A; --eui-r-xl: 14.6px; --eui-r-lg: 10px; --eui-r-md: 9px; --eui-r-pill: 7.7px; /* Sheen used as second stroke on root/cards/pills */ --eui-sheen: linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.30) 50%, rgba(255,255,255,0) 100%); }