/* Adeul Intelligence — Design System entry point. Consumers link ONLY this file. It is an @import manifest: the first line ships the webfonts, the rest pull in every token layer. */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap'); /* ===== tokens/colors.css ===== */ /* Adeul Intelligence — Color tokens Primary brand system = "Seoul" agent dark. An editorial light theme (the founder/brand site) is provided as a scoped alternate at the bottom. */ :root { /* ---- Base palette: Agent Dark (signature) ---- */ --ai-bg: #05070b; /* near-black blue, the stage */ --ai-bg-2: #070a12; /* raised panel base */ --ai-ink: #eaf6ff; /* primary text on dark */ --ai-ink-2: #cfe0ef; /* softer body text */ --ai-muted: #8aa0b6; /* captions, labels, kickers */ /* ---- Signature accents ---- */ --ai-cyan: #48f5db; /* primary accent — Seoul */ --ai-blue: #69b9ff; /* secondary accent */ --ai-violet: #9d86ff; /* tertiary / "listening" state */ --ai-amber: #ffce8a; /* attention / proposal */ --ai-gold: #b8884a; /* editorial accent (shared brand) */ --ai-danger: #ff8a8a; /* destructive / reject */ /* ---- Glass + structural ---- */ --ai-glass: rgba(12, 20, 30, 0.55); /* card fill */ --ai-glass-2: rgba(10, 16, 24, 0.60); /* input fill */ --ai-panel: rgba(12, 20, 30, 0.60); /* solid-ish panel */ --ai-line: rgba(120, 180, 220, 0.16); /* hairline border */ --ai-line-2: rgba(120, 180, 220, 0.40); /* hover border */ /* ---- Semantic aliases ---- */ --surface-page: var(--ai-bg); --surface-raised: var(--ai-bg-2); --surface-card: var(--ai-glass); --surface-input: var(--ai-glass-2); --border-hairline: var(--ai-line); --border-strong: var(--ai-line-2); --text-strong: #f3fbff; --text-body: var(--ai-ink); --text-soft: var(--ai-ink-2); --text-muted: var(--ai-muted); --text-on-accent: #04121a; --accent-primary: var(--ai-cyan); --accent-secondary: var(--ai-blue); --accent-active: var(--ai-violet); /* ---- Lead / run stage colors (CRM + cockpit) ---- */ --stage-new: var(--ai-blue); --stage-contacted: var(--ai-violet); --stage-proposal: var(--ai-amber); --stage-won: var(--ai-cyan); --stage-lost: #94a3b8; color-scheme: dark; } /* ---- Editorial Light theme (founder / brand site) ---- Apply with: or any scope. */ .theme-editorial { --paper-bg: #faf7f2; /* warm cream */ --paper-ink: #1a1a1f; /* deep slate */ --paper-ink-2: #4a4a52; /* soft slate */ --paper-line: #e5e0d7; /* warm hairline */ --paper-gold: #b8884a; /* single gold accent */ --surface-page: var(--paper-bg); --surface-card: #ffffff; --border-hairline: var(--paper-line); --text-strong: var(--paper-ink); --text-body: var(--paper-ink); --text-soft: var(--paper-ink-2); --text-muted: var(--paper-ink-2); --text-on-accent: var(--paper-bg); --accent-primary: var(--paper-ink); color-scheme: light; } /* ===== tokens/typography.css ===== */ /* Adeul Intelligence — Typography tokens Inter for everything human-readable; JetBrains Mono for kickers, labels, command/console text. Both shipped via the Google Fonts @import at the top of styles.css. */ :root { /* ---- Families ---- */ --font-sans: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, 'Roboto Mono', monospace; --font-display: var(--font-sans); --font-body: var(--font-sans); --font-label: var(--font-mono); /* ---- Weights ---- */ --fw-light: 300; /* @kind font */ --fw-regular: 400; /* @kind font */ --fw-medium: 500; /* @kind font */ --fw-semibold: 600; /* @kind font */ --fw-bold: 700; /* @kind font */ /* ---- Type scale (fluid, dark-stage friendly) ---- */ --fs-display: clamp(2.3rem, 6.4vw, 4rem); /* @kind font */ --fs-h1: clamp(2rem, 9vw, 3.4rem); /* @kind font */ --fs-h2: clamp(1.7rem, 4vw, 2.4rem); /* @kind font */ --fs-h3: 1.18rem; /* @kind font */ --fs-lede: clamp(1.05rem, 2.4vw, 1.28rem); /* @kind font */ --fs-body: 1rem; /* @kind font */ --fs-sm: 0.92rem; /* @kind font */ --fs-caption: 0.78rem; /* @kind font */ --fs-kicker: 0.72rem; /* @kind font */ --fs-micro: 0.62rem; /* @kind font */ /* ---- Line heights ---- */ --lh-tight: 1.03; /* @kind font */ --lh-snug: 1.2; /* @kind font */ --lh-body: 1.55; /* @kind font */ /* ---- Letter-spacing ---- */ --ls-display: -0.025em; /* @kind font */ --ls-tight: -0.02em; /* @kind font */ --ls-normal: 0; /* @kind font */ --ls-kicker: 0.28em; /* @kind font */ --ls-label: 0.18em; /* @kind font */ } /* ---- Reusable type primitives ---- */ .ai-kicker { font: var(--fw-semibold) var(--fs-kicker)/1 var(--font-mono); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--text-muted); } .ai-eyebrow { font: var(--fw-semibold) var(--fs-kicker)/1 var(--font-mono); letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-primary); } .ai-display { font-weight: var(--fw-semibold); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--text-strong); } /* ===== tokens/spacing.css ===== */ /* Adeul Intelligence — Spacing, radii, sizing tokens 8px-based rhythm; generous pill radii are a brand signature. */ :root { /* ---- Spacing scale ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; /* ---- Radii ---- */ --r-sm: 9px; /* chips, small controls */ --r-md: 14px; /* cards, inputs */ --r-lg: 18px; /* feature cards */ --r-xl: 22px; /* modals, big panels */ --r-2xl: 26px; /* glass hero panels */ --r-pill: 999px; /* buttons, pills, mic */ /* ---- Control sizes ---- */ --control-h: 46px; /* inputs / standard buttons */ --control-h-sm: 34px; --mic-size: 66px; /* ---- Layout widths ---- */ --w-prose: 760px; /* chat / reading column */ --w-content: 1080px; /* marketing wrap */ } /* ===== tokens/effects.css ===== */ /* Adeul Intelligence — Effects: gradients, shadows, blur, motion The look is "aurora glass": translucent panels over a near-black stage lit by cyan/violet radial glows. */ :root { /* ---- Brand gradients ---- */ --grad-accent: linear-gradient(90deg, var(--ai-cyan), var(--ai-blue)); /* primary button */ --grad-accent-v: linear-gradient(180deg, var(--ai-cyan), var(--ai-blue)); /* vertical variant */ --grad-brand: linear-gradient(135deg, var(--ai-cyan), var(--ai-violet)); /* brand dot / icon tile */ --grad-band: linear-gradient(135deg, rgba(72,245,219,0.10), rgba(157,134,255,0.10)); /* @kind color */ /* Aurora page wash — drop onto a dark body background */ --aurora: radial-gradient(60vw 50vh at 18% -5%, rgba(72, 245, 219, 0.10), transparent 60%), radial-gradient(55vw 45vh at 95% 8%, rgba(157, 134, 255, 0.10), transparent 55%); /* @kind color */ /* ---- Shadows ---- */ --shadow-sm: 0 10px 30px rgba(0, 0, 0, 0.45); --shadow-card: 0 24px 70px rgba(0, 0, 0, 0.35); --shadow-modal: 0 30px 80px rgba(0, 0, 0, 0.60); --glow-cyan: 0 12px 36px rgba(72, 245, 219, 0.28); --glow-cyan-lg: 0 16px 44px rgba(72, 245, 219, 0.36); --inset-top: inset 0 1px rgba(255, 255, 255, 0.12); /* ---- Blur ---- */ --blur-glass: blur(8px); /* @kind other */ --blur-nav: blur(14px); /* @kind other */ --blur-heavy: blur(22px); /* @kind other */ /* ---- Motion ---- */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); /* @kind other */ --ease-std: ease; /* @kind other */ --dur-fast: 0.15s; /* @kind other */ --dur-mid: 0.3s; /* @kind other */ --dur-slow: 0.5s; /* @kind other */ } /* ---- Signature keyframes ---- */ @keyframes ai-rise { from { opacity: 0; transform: translateY(14px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } @keyframes ai-pulse { 0% { box-shadow: 0 0 0 0 rgba(157, 134, 255, 0.50), var(--shadow-sm); } 70% { box-shadow: 0 0 0 22px rgba(157, 134, 255, 0), var(--shadow-sm); } 100% { box-shadow: 0 0 0 0 rgba(157, 134, 255, 0), var(--shadow-sm); } } @keyframes ai-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }