/* Arveum Intelligence theme — Astral light aesthetic. Activated by [data-theme="arveum-brand"] on . Reference: www.arveum.ai (Astral) — cream surfaces, charcoal text, crimson accent, Crimson Pro (display) + Karla (body). */ @import url('https://fonts.googleapis.com/css2?family=Crimson+Pro:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Karla:wght@400;500;600;700&display=swap'); [data-theme="arveum-brand"] { /* ─── Brand tokens ───────────────────────────────────────────────── */ --brand-deep: #18181b; /* near-black charcoal (dark fills) */ --brand: #242428; /* charcoal — dark brand / sections */ --brand-soft: #F5F2EC; /* warm off-white tint for cards */ --brand-on-soft: #242428; /* text on the soft tint */ --brand-accent: #AA3C54; /* crimson — primary action / links */ --brand-accent-soft: #F2E4E8; /* pale crimson tint */ /* ─── Surfaces / ink (light scheme) ──────────────────────────────── */ --bg: #ECEAE3; /* page bg — cream-100 */ --bg-2: #E6E2D9; /* alt section — warmer cream */ --surface: #FFFFFF; /* cards */ --surface-2: #F5F2EC; /* subtle alt card */ --surface-accent: #F2E4E8; /* listing-row accent — pale crimson */ --ink: #242428; /* primary text — charcoal */ --ink-2: #45454B; /* secondary text */ --ink-3: #8A8377; /* muted captions — warm grey */ --line: #DFDBD1; /* borders — cream-200 */ --line-2: #E8E4DA; /* lighter divider */ /* ─── Typography ─────────────────────────────────────────────────── */ --font-display: "Crimson Pro", Georgia, "Times New Roman", serif; --font-body: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --type-h0-size: 52px; --type-h0-weight: 600; --type-h1-size: 44px; --type-h1-weight: 600; --type-h2-size: 28px; --type-h2-weight: 600; --type-h3-size: 20px; --type-h3-weight: 600; --type-body-size: 14px; /* ─── Shape ──────────────────────────────────────────────────────── */ --radius-btn-primary: 9999px; --radius-btn-secondary: 9999px; --radius-card: 12px; --radius-chip: 9999px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 20px; /* ─── Shadows tuned for light surfaces ───────────────────────────── */ --shadow-sm: 0 1px 2px rgba(36,36,40,.06); --shadow-md: 0 4px 16px rgba(36,36,40,.08); --shadow-lg: 0 12px 40px rgba(36,36,40,.12); /* ─── Sphere palette (crimson/olive on cream) ────────────────────── */ --sphere-warm: #AA3C54; /* speaking — crimson */ --sphere-cool: #9AC9D7; /* listening — sky */ --sphere-neutral: #BCB6AA; /* idle — taupe */ --sphere-bg-1: #F5F2EC; /* inner radial — warm white */ --sphere-bg-2: #ECEAE3; /* mid radial — cream */ --sphere-bg-3: #DFDBD1; /* outer radial — cream-200 */ /* ─── Legacy aliases ─────────────────────────────────────────────── */ --sand: var(--brand-accent); --sand-soft: var(--surface-accent); --sand-deep: var(--brand-accent); --accent: var(--brand-accent); --accent-soft: var(--surface-accent); --accent-ink: var(--brand-accent); } /* Body sits on cream by default. */ [data-theme="arveum-brand"], [data-theme="arveum-brand"] body { background: var(--bg); color: var(--ink-2); } /* Secondary button (default .hf-btn): outline on light */ [data-theme="arveum-brand"] .hf-btn { background: transparent; color: var(--ink); border-color: #BBB5AA; } [data-theme="arveum-brand"] .hf-btn:hover { background: rgba(36,36,40,.04); border-color: #A2998D; transform: none; box-shadow: none; } /* Primary CTA: crimson fill, white text, full pill. */ [data-theme="arveum-brand"] .hf-btn.hf-btn-primary { background: var(--brand-accent); color: #ffffff; border-color: var(--brand-accent); border-radius: 9999px; } [data-theme="arveum-brand"] .hf-btn.hf-btn-primary:hover { background: #8B2C44; filter: none; transform: none; } /* Ghost stays transparent, inherits ink */ [data-theme="arveum-brand"] .hf-btn-ghost { background: transparent; border-color: transparent; color: var(--ink); } /* Cards: white on cream, hairline border + soft lift. */ [data-theme="arveum-brand"] .hf-card, [data-theme="arveum-brand"] .hf-card-flat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-card); box-shadow: var(--shadow-sm); color: var(--ink-2); } /* Eyebrow labels in crimson accent */ [data-theme="arveum-brand"] .hf-eyebrow { color: var(--brand-accent); font-family: var(--font-display); letter-spacing: .1em; } /* Headlines charcoal serif (Crimson Pro) */ [data-theme="arveum-brand"] .hf-serif, [data-theme="arveum-brand"] .hf-h0, [data-theme="arveum-brand"] .hf-h1, [data-theme="arveum-brand"] .hf-h2, [data-theme="arveum-brand"] .hf-h3 { font-family: var(--font-display); color: var(--ink); } [data-theme="arveum-brand"] a { color: var(--brand-accent); } /* Hero gradient: warm cream with a subtle crimson wash */ [data-theme="arveum-brand"] .hf-aria-bg { background: radial-gradient(ellipse at 50% 30%, rgba(170,60,84,.10) 0, rgba(170,60,84,0) 60%), linear-gradient(180deg, #F5F2EC, #ECEAE3); } /* Chips on light scheme */ [data-theme="arveum-brand"] .hf-chip { background: var(--surface); border-color: var(--line); color: var(--ink-2); } /* Aria stage right-column background — cream gradient with subtle crimson spot. */ [data-theme="arveum-brand"] { --stage-bg: linear-gradient(180deg, #F5F2EC 0%, #ECEAE3 100%); --stage-spot: radial-gradient(circle, rgba(170,60,84,.10) 0%, rgba(170,60,84,0) 60%); }