/* ============================================================ vibn-ai-templates · tokens.css ------------------------------------------------------------ The whole library is themed through CSS custom properties. The :root block holds the DEFAULT theme (minimal). Each .theme-* class below overrides a subset to flip aesthetics. ------------------------------------------------------------ To use: → glass theme app-wide
…
→ scope to one block ============================================================ */ :root { /* ── Typography ─────────────────────────────────────────── */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; --font-display: var(--font-sans); /* themes may override */ --font-mono: ui-monospace, 'JetBrains Mono', 'SF Mono', Menlo, monospace; --text-xs: 11px; --text-sm: 12px; --text-md: 13px; --text-lg: 16px; --text-xl: 20px; --text-2xl: 28px; --text-3xl: 38px; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* ── Spacing (4 px base) ────────────────────────────────── */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; /* ── Radii ──────────────────────────────────────────────── */ --radius-xs: 3px; --radius-sm: 5px; --radius: 8px; --radius-lg: 14px; --radius-xl: 22px; --radius-pill: 999px; --button-radius: var(--radius); --field-radius: 7px; --card-radius: 12px; --modal-radius: 16px; /* ── Colors · MINIMAL (default light theme) ────────────── */ --bg: #f5f5f2; --surface: #ffffff; --surface-2: #fafaf8; --surface-alt: #f1f0eb; /* sidebar / muted regions */ --border: #e8e8e3; --border-strong:#d8d8d2; --divider: #ededea; --text: #111111; --text-2: #5a5a5e; --text-3: #8a8a90; --text-on-accent: #ffffff; --accent: #5e5cff; --accent-2: #b15bff; --accent-soft: #eeedff; --accent-ring: rgba(94,92,255,0.22); --success: #16a34a; --success-soft: #dcfce7; --warn: #d97706; --warn-soft: #fef3c7; --danger: #dc2626; --danger-soft: #fee2e2; /* ── Surfaces & effects ────────────────────────────────── */ --surface-blur: 0px; /* glass theme overrides */ --backdrop: transparent; /* glass theme overrides */ --grain: none; /* maximalist themes can use */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.04); --shadow: 0 4px 12px -4px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.04); --shadow-lg: 0 24px 48px -20px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.05); --shadow-modal: 0 40px 80px -20px rgba(0,0,0,0.28), 0 2px 8px rgba(0,0,0,0.08); --shadow-focus: 0 0 0 3px var(--accent-ring); /* ── Buttons ───────────────────────────────────────────── */ --button-bg: #111111; --button-fg: #ffffff; --button-border: #111111; --button-hover: #2a2a2a; --button-press: #000000; --button-secondary-bg: #ffffff; --button-secondary-fg: #111111; --button-secondary-border: var(--border); --button-secondary-hover: #f6f5f0; --button-ghost-fg: var(--text); --button-ghost-hover: #00000008; /* ── Inputs ────────────────────────────────────────────── */ --field-bg: #ffffff; --field-border: var(--border); --field-text: var(--text); --field-placeholder: var(--text-3); --field-focus-ring: var(--shadow-focus); /* ── Animation ─────────────────────────────────────────── */ --duration-fast: 120ms; --duration: 180ms; --duration-slow: 260ms; --ease: cubic-bezier(0.2, 0.7, 0.3, 1); } /* ============================================================ THEME: minimal (default, same as :root) The class exists so consumers can name-toggle. ============================================================ */ .theme-minimal {} /* ============================================================ THEME: dark — Vercel / Stripe / Linear web school ============================================================ */ .theme-dark { --bg: #0a0a0a; --surface: #101015; --surface-2: #16161d; --surface-alt: #0a0a0d; --border: #1f1f25; --border-strong:#2a2a32; --divider: #1a1a20; --text: #fafafa; --text-2: #a8a8b0; --text-3: #6a6a72; --text-on-accent: #0a0a0a; --accent: #ffffff; --accent-2: #b15bff; --accent-soft: rgba(255,255,255,0.08); --accent-ring: rgba(255,255,255,0.24); --success: #4ade80; --success-soft: rgba(74,222,128,0.14); --warn: #f59e0b; --warn-soft: rgba(245,158,11,0.14); --danger: #ff4d5e; --danger-soft: rgba(255,77,94,0.16); --shadow-sm: 0 1px 2px rgba(0,0,0,0.5); --shadow: 0 4px 12px rgba(0,0,0,0.4); --shadow-lg: 0 24px 60px -20px rgba(0,0,0,0.6), 0 0 0 1px rgba(255,255,255,0.04); --shadow-modal: 0 40px 100px -20px rgba(0,0,0,0.8); --button-bg: #ffffff; --button-fg: #0a0a0a; --button-border: #ffffff; --button-hover: #e8e8e8; --button-press: #d4d4d4; --button-secondary-bg: #16161d; --button-secondary-fg: #fafafa; --button-secondary-border: var(--border); --button-secondary-hover: #1f1f28; --button-ghost-fg: var(--text); --button-ghost-hover: rgba(255,255,255,0.05); --field-bg: #16161d; --field-border: var(--border); --field-placeholder: var(--text-3); } /* ============================================================ THEME: glass — vibrant aurora bg + frosted surfaces ============================================================ */ .theme-glass { --bg: #08081a; --surface: rgba(255,255,255,0.06); --surface-2: rgba(255,255,255,0.10); --surface-alt: rgba(255,255,255,0.04); --border: rgba(255,255,255,0.14); --border-strong:rgba(255,255,255,0.22); --divider: rgba(255,255,255,0.08); --text: #ffffff; --text-2: rgba(255,255,255,0.70); --text-3: rgba(255,255,255,0.50); --text-on-accent: #08081a; --accent: #ffffff; --accent-2: #b15bff; --accent-soft: rgba(255,255,255,0.12); --accent-ring: rgba(122,120,255,0.40); --success: #7aff66; --success-soft: rgba(122,255,102,0.14); --warn: #ffce5b; --warn-soft: rgba(255,206,91,0.14); --danger: #ff5b6b; --danger-soft: rgba(255,91,107,0.14); --button-radius: var(--radius-pill); --field-radius: 10px; --card-radius: 22px; --modal-radius: 22px; --surface-blur: 20px; --backdrop: radial-gradient(60% 50% at 20% 20%, rgba(122,120,255,0.55), transparent 60%), radial-gradient(50% 50% at 80% 30%, rgba(177,91,255,0.50), transparent 60%), radial-gradient(70% 60% at 50% 100%, rgba(0,229,179,0.35), transparent 60%), #08081a; --shadow-sm: 0 1px 2px rgba(0,0,0,0.4); --shadow: 0 10px 40px -10px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.10); --shadow-lg: 0 30px 80px -30px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.12); --shadow-modal: 0 40px 100px -30px rgba(0,0,0,0.7), inset 0 1px 0 rgba(255,255,255,0.14); --button-bg: #ffffff; --button-fg: #08081a; --button-border: transparent; --button-hover: rgba(255,255,255,0.92); --button-press: rgba(255,255,255,0.84); --button-secondary-bg: rgba(255,255,255,0.08); --button-secondary-fg: #ffffff; --button-secondary-border: var(--border); --button-secondary-hover: rgba(255,255,255,0.14); --button-ghost-fg: #ffffff; --button-ghost-hover: rgba(255,255,255,0.06); --field-bg: rgba(255,255,255,0.06); --field-border: var(--border); --field-placeholder: var(--text-3); } /* ============================================================ THEME: editorial — warm paper, serif display, hairline rules ============================================================ */ .theme-editorial { --font-display: 'DM Serif Display', 'Times New Roman', Times, serif; --bg: #f3eee2; --surface: #fbf8f0; --surface-2: #f7f2e6; --surface-alt: #ece6d6; --border: #d8d0bc; --border-strong:#b8a988; --divider: #e2d9c4; --text: #1c1a14; --text-2: #5a5044; --text-3: #8a7d6a; --text-on-accent: #fbf8f0; --accent: #1c1a14; --accent-2: #b85c28; /* terracotta */ --accent-soft: #e8e1cd; --accent-ring: rgba(28,26,20,0.18); --success: #3f7a3a; --success-soft: #dde9d4; --warn: #a86b14; --warn-soft: #f3e7c4; --danger: #a32a1e; --danger-soft: #f1d6cf; --button-radius: 3px; --field-radius: 3px; --card-radius: 4px; --modal-radius: 4px; --shadow-sm: 0 1px 0 rgba(28,26,20,0.06); --shadow: 0 1px 0 rgba(28,26,20,0.06), 0 6px 24px -12px rgba(28,26,20,0.12); --shadow-lg: 0 14px 36px -16px rgba(28,26,20,0.18), 0 1px 0 rgba(28,26,20,0.06); --shadow-modal: 0 30px 60px -20px rgba(28,26,20,0.28); --button-bg: #1c1a14; --button-fg: #fbf8f0; --button-border: #1c1a14; --button-hover: #2f2a20; --button-press: #000000; --button-secondary-bg: transparent; --button-secondary-fg: #1c1a14; --button-secondary-border: #1c1a14; /* thick rule */ --button-secondary-hover: rgba(28,26,20,0.06); --button-ghost-fg: var(--text); --button-ghost-hover: rgba(28,26,20,0.06); --field-bg: #fbf8f0; --field-border: #1c1a14; /* hairline rule */ --field-placeholder: var(--text-3); } /* ============================================================ Body backdrop helper — paint --backdrop on the page root. Glass theme uses this to show the aurora wash. ============================================================ */ .vibn-app { font-family: var(--font-sans); color: var(--text); background: var(--bg); min-height: 100%; position: relative; } .vibn-app::before { content: ""; position: absolute; inset: 0; background: var(--backdrop); z-index: 0; pointer-events: none; } .vibn-app > * { position: relative; z-index: 1; }