/* ============================================================================= CSS v2 TOKENS - Single Source of Truth 4-LAYER HIERARCHY: 1. PRIMITIVES - Raw values (colors, spacing, fonts) 2. SEMANTIC - Meaning-based tokens (surfaces, text, accents) 3. COMPONENT - Per-component variables 4. THEME - House overrides (applied via [data-house-theme]) ============================================================================= */ /* ============================================================================= LAYER 1: PRIMITIVES Raw design values. Change these for global updates. ============================================================================= */ /* Plus Jakarta Sans: geometric display font for Paper layer headings */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700&family=Literata:opsz,wght@7..72,300;7..72,400;7..72,500;7..72,600&family=Sarabun:wght@400;500;600;700&display=swap'); :root { /* -------------------- Colors: Grayscale -------------------- */ --color-white: #ffffff; --color-black: #000000; --color-gray-50: #fafafa; --color-gray-100: #f4f4f5; --color-gray-200: #e4e4e7; --color-gray-300: #d4d4d8; --color-gray-400: #a1a1aa; --color-gray-500: #71717a; --color-gray-600: #52525b; --color-gray-700: #3f3f46; --color-gray-800: #27272a; --color-gray-900: #18181b; --color-gray-950: #09090b; /* -------------------- Colors: Brand -------------------- */ --color-teal-50: #f0fdfa; --color-teal-100: #ccfbf1; --color-teal-200: #99f6e4; --color-teal-300: #5eead4; --color-teal-400: #2dd4bf; --color-teal-500: #14b8a6; --color-teal-600: #1A8F80; --color-teal-700: #156B60; --color-purple-50: #faf5ff; --color-purple-100: #f3e8ff; --color-purple-200: #e9d5ff; --color-purple-500: #a855f7; --color-purple-600: #9333ea; --color-purple-700: #7c3aed; --color-orange-50: #fff7ed; --color-orange-100: #ffedd5; --color-orange-400: #F4884A; --color-orange-500: #F26A2C; --color-orange-600: #ea580c; --color-red-50: #fef2f2; --color-red-100: #fee2e2; --color-red-400: #f87171; --color-red-500: #ef4444; --color-red-600: #dc2626; --color-green-50: #f0fdf4; --color-green-100: #dcfce7; --color-green-400: #4ade80; --color-green-500: #22c55e; --color-green-600: #16a34a; --color-yellow-50: #fefce8; --color-yellow-100: #fef9c3; --color-yellow-400: #facc15; --color-yellow-500: #eab308; --color-blue-50: #eff6ff; --color-blue-100: #dbeafe; --color-blue-500: #3b82f6; --color-blue-600: #2563eb; /* -------------------- Colors: Cyan (Book of Houses Brand) -------------------- */ --color-cyan-400: #22d3ee; --color-cyan-500: #00f3ff; --color-cyan-600: #00c4cc; --color-cyan-700: #0891b2; /* -------------------- Colors: Extended Palette -------------------- */ --color-magenta-500: #db1cd0; --color-sky-500: #62c5e2; --color-brightcyan-500: #60e8fc; /* -------------------- Colors: Dark Theme -------------------- */ --color-dark-900: #030308; --color-dark-800: #0a0e1a; --color-dark-700: #0c1424; --color-dark-600: #141c2e; --color-dark-500: #1e2a3e; /* -------------------- Spacing Scale -------------------- */ --space-0: 0; --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; --space-16: 64px; /* -------------------- Typography: Font Stacks -------------------- */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-body: var(--font-sans); --font-heading: 'Plus Jakarta Sans', 'Inter', -apple-system, sans-serif; --font-serif: 'Literata', Georgia, serif; --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; --font-sarabun: 'Sarabun', 'Inter', -apple-system, sans-serif; /* -------------------- Typography: Size Scale -------------------- */ --text-xs: 0.75rem; /* 12px */ --text-sm: 0.875rem; /* 14px */ --text-base: 1rem; /* 16px */ --text-lg: 1.125rem; /* 18px */ --text-xl: 1.25rem; /* 20px */ --text-2xl: 1.5rem; /* 24px */ --text-3xl: 1.875rem; /* 30px */ --text-4xl: 2rem; /* 32px */ --text-5xl: 3.5rem; /* 56px */ /* -------------------- Typography: Weights -------------------- */ --font-light: 300; --font-normal: 400; --font-medium: 500; --font-semibold: 600; --font-bold: 700; /* -------------------- Typography: Line Heights -------------------- */ --leading-tight: 1.1; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed: 1.6; /* -------------------- Typography: Letter Spacing -------------------- */ --tracking-tight: -0.03em; --tracking-snug: -0.02em; --tracking-normal: 0; --tracking-wide: 0.05em; /* -------------------- Sizing -------------------- */ --size-4: 16px; --size-5: 20px; --size-6: 24px; --size-8: 32px; --size-10: 40px; --size-12: 48px; --size-14: 56px; --size-16: 64px; --size-20: 80px; --size-24: 96px; --size-32: 128px; /* -------------------- Border Radius -------------------- */ --radius-xs: 2px; /* Near-square: tooltips, sharp UI */ --radius-sm: 6px; /* Tags, badges, chips */ --radius-md: 12px; /* Inputs, list items */ --radius-lg: 16px; /* Cards, panels */ --radius-xl: 20px; /* Modals, large panels */ --radius-2xl: 24px; /* Feed cards (unchanged) */ --radius-card: 20px; /* Standard card */ --radius-hero: 28px; /* Hero sections */ --radius-full: 9999px; /* -------------------- Shadows -------------------- */ --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.05); --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.06); --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.06); /* -------------------- Gallery Layer -------------------- */ --gallery-canvas: #0B1120; --gallery-card: #141c2f; --gallery-text-primary: #f8fafc; --gallery-text-secondary: #94a3b8; --gallery-border: rgba(255,255,255,0.06); --gallery-accent-emerald: #10b981; --gallery-accent-cyan: #00f3ff; --gallery-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.05); --gallery-shadow-hover: 0 30px 60px -10px rgba(0, 0, 0, 0.8), inset 0 1px 0 0 rgba(255, 255, 255, 0.1); --gallery-drawer-bg: #141c2f; --gallery-houndstooth: linear-gradient(45deg, rgba(255,255,255,0.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.06) 75%), linear-gradient(45deg, rgba(255,255,255,0.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.06) 75%), linear-gradient(-45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%), linear-gradient(-45deg, rgba(255,255,255,0.04) 25%, transparent 25%, transparent 75%, rgba(255,255,255,0.04) 75%); --gallery-houndstooth-size: 20px 20px; --gallery-houndstooth-pos: 0 0, 10px 10px, 0 0, 10px 10px; --houndstooth-light: linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.04) 75%), linear-gradient(45deg, rgba(0,0,0,0.04) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.04) 75%), linear-gradient(-45deg, rgba(0,0,0,0.03) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.03) 75%), linear-gradient(-45deg, rgba(0,0,0,0.03) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.03) 75%); --houndstooth-light-size: 20px 20px; --houndstooth-light-pos: 0 0, 10px 10px, 0 0, 10px 10px; /* -------------------- Transitions -------------------- */ --duration-fast: 150ms; --duration-normal: 200ms; --duration-slow: 300ms; --ease-default: cubic-bezier(0.4, 0, 0.2, 1); --ease-in: cubic-bezier(0.4, 0, 1, 1); --ease-out: cubic-bezier(0, 0, 0.2, 1); --ease-spring: cubic-bezier(0.32, 0.72, 0, 1); /* -------------------- Z-Index Scale -------------------- -1 behind Pseudo-elements behind parent 0 base Default stacking 50 rail/topbar House rail, app top bar 100 dropdown Dropdown menus 150 essence Essence effects, discussion drawer 200 sticky Sticky headers, top bar pill 300 overlay Mobile menus, context overlays 400 modal Standard modals, dialogs 500 toast Toast notifications, popovers 1000 fab Floating action buttons, bottom nav 1001 fab-above FAB menu, items above FAB 1100 panel Sidebar panels, persistent drawers 9000 fullscreen Full-screen mobile modals 9349-9450 Content/utility/detail overlay pairs 9998 effect-pre Essence sprites, Lumina toasts 9999 spectacle Cosmetic effects layer 10000 critical Evolution flow, voice, design review 10001 critical+ Above critical (shop PDP, 3D) 999999 emergency Bug capture — absolute last resort -------------------------------------------------------- */ --z-behind: -1; --z-base: 0; --z-rail: 50; --z-topbar: 50; --z-dropdown: 100; --z-essence: 150; --z-sticky: 200; --z-overlay: 300; --z-modal: 400; --z-toast: 500; --z-fab: 1000; --z-fab-above: 1001; --z-panel: 1100; --z-fullscreen: 9000; --z-content-overlay: 9350; --z-content-overlay-backdrop: 9349; --z-utility-overlay: 9400; --z-utility-overlay-backdrop: 9399; --z-detail-overlay: 9450; --z-detail-overlay-backdrop: 9449; --z-effect-pre: 9998; --z-spectacle: 9999; --z-critical: 10000; --z-critical-above: 10001; --z-emergency: 999999; /* -------------------- Circle-Reveal Animation -------------------- */ --reveal-duration-open: 0.4s; --reveal-duration-close: 0.3s; --reveal-easing-open: cubic-bezier(.4, .0, .2, 1); --reveal-easing-close: cubic-bezier(.4, .0, .8, 1); --reveal-radius: 150%; } /* ============================================================================= LAYER 2: SEMANTIC TOKENS - LIGHT THEME Meaning-based tokens. Swap these for themes. ============================================================================= */ /* Formally claim the theme class applied to */ .theme-book-of-houses { color-scheme: light; } :root { /* -------------------- Surfaces --------------------------------- */ --surface-app: #e8edf4; --surface-primary: #FFFFFF; --surface-secondary: #F1F5F9; --surface-tertiary: #e8ecf1; --surface-elevated: #FFFFFF; --surface-overlay: rgba(0, 0, 0, 0.5); --surface-card: rgba(255, 255, 255, 0.95); /* -------------------- Text ------------------------------------- */ --text-primary: #2C3444; --text-secondary: #475569; --text-muted: #94a3b8; --text-inverse: #ffffff; --text-link: #2C3444; --text-link-hover: #0112f7; --text-accent: #2C3444; /* Links and accent text use primary color — green is for backgrounds only */ /* -------------------- Borders ---------------------------------- */ --border-default: #e2e8f0; --border-subtle: rgba(0, 0, 0, 0.06); --border-strong: #cbd5e1; /* -------------------- Accent ----------------------------------- */ --accent-primary: #33e658; --accent-primary-hover: #2bd04e; --accent-primary-subtle: rgba(51, 230, 88, 0.12); --accent-secondary: #0112f7; --accent-secondary-subtle: rgba(1, 18, 247, 0.12); --accent-dark: #2C3444; --accent-tertiary: #6355eb; --accent-tertiary-subtle: rgba(99, 85, 235, 0.12); --accent-neon: #33e658; /* -------------------- Highlight -------------------- */ --highlight-yellow: #f2e841; --highlight-purple: #6355eb; --highlight-neon: #33e658; --highlight-blue: #0112f7; --highlight-pad: 4px 12px; /* -------------------- Status ----------------------------------- */ --status-success: #10B981; --status-success-subtle: rgba(16, 185, 129, 0.12); --status-warning: #0112f7; --status-warning-subtle: rgba(1, 18, 247, 0.12); --status-error: #EF4444; --status-error-subtle: rgba(239, 68, 68, 0.12); --status-info: var(--color-blue-500); --status-info-subtle: rgba(59, 130, 246, 0.12); /* -------------------- Instructional Card (purple) --------- */ --instructional-card-bg: var(--accent-tertiary); --instructional-card-border: var(--accent-tertiary); --instructional-card-radius: var(--radius-card); --instructional-card-padding: var(--space-6); --instructional-card-title-color: #fff; --instructional-card-title-size: var(--text-xl); --instructional-card-text-color: rgba(255, 255, 255, 0.80); --instructional-card-text-size: var(--text-base); --instructional-card-cta-bg: #000; --instructional-card-cta-color: #fff; --instructional-card-cta-radius: var(--radius-lg); --instructional-card-cta-hover-bg: var(--accent-neon); --instructional-card-cta-hover-color: #000; /* -------------------- Hint -------------------- */ --hint-border-width: 3px; --hint-border-color: var(--highlight-purple); --hint-border: var(--hint-border-width) solid var(--hint-border-color); --hint-bg: rgba(99, 85, 235, 0.06); --hint-radius: var(--radius-md); --hint-padding: var(--space-3) var(--space-4); /* -------------------- Interactive -------------------- */ --interactive-hover: rgba(44, 52, 68, 0.06); --interactive-active: rgba(44, 52, 68, 0.10); --interactive-focus-ring: var(--highlight-purple); /* -------------------- Points/Rewards -------------------- */ --points-color: var(--color-yellow-400); --points-bg: rgba(250, 204, 21, 0.15); /* -------------------- Indicators -------------------- */ --indicator-unread: var(--highlight-neon); --indicator-points: var(--color-orange-500); --indicator-online: var(--color-green-500); /* -------------------- Legacy Aliases -------------------- */ --bg-primary: var(--surface-app); --bg-secondary: var(--surface-primary); --bg-tertiary: var(--surface-secondary); --bg-hover: var(--interactive-hover); --bg-card: var(--surface-card); --accent: var(--accent-primary); --accent-rgb: 255, 255, 255; --border-color: var(--border-default); --transition-fast: 0.15s ease; --transition-normal: 0.2s ease; --transition-slow: 0.3s ease; /* Legacy: Status colors for templates using old naming */ --success: var(--status-success); --warning: var(--status-warning); --error: var(--status-error); } /* ============================================================================= LAYER 3: COMPONENT TOKENS Per-component variables referencing semantic tokens. ============================================================================= */ :root { /* -------------------- Layout -------------------- */ --layout-rail-width: 88px; --layout-sidebar-width: 280px; --layout-topbar-height: 56px; --layout-mobile-rail-width: 56px; --layout-mobile-topbar-height: 40px; /* -------------------- Top Bar -------------------- */ --topbar-bg: var(--surface-primary); --topbar-border: var(--border-default); --topbar-btn-size: var(--size-8); --topbar-btn-color: var(--text-secondary); --topbar-btn-hover-bg: var(--interactive-hover); --topbar-btn-hover-color: var(--text-primary); --topbar-icon-glyph: var(--size-5); /* 20px icon render size */ --topbar-house-max-width: none; /* Allow full house name display */ --topbar-house-icon-size: var(--size-6); /* 24px house icon */ --topbar-chip-bg: var(--surface-elevated); --topbar-chip-border: var(--border-subtle); --topbar-chip-shadow: var(--shadow-md); --topbar-chip-radius: var(--radius-full); --topbar-chip-height: var(--size-8); /* 32px chip height */ --topbar-chip-hover-border: rgba(74, 222, 128, 0.3); --topbar-coiny-color: var(--color-green-500); --topbar-coiny-highlight: var(--color-green-100); --topbar-pill-mobile-height: 30px; /* -------------------- House Rail -------------------- */ --rail-bg: var(--surface-primary); --rail-icon-size: var(--size-12); --rail-icon-bg: var(--surface-primary); --rail-icon-color: var(--text-secondary); --rail-icon-radius: 50%; --rail-icon-hover-radius: 50%; --rail-icon-active-bg: var(--accent-primary); --rail-icon-active-color: var(--color-black); --rail-icon-active-radius: 50%; --rail-divider-color: var(--border-default); --rail-divider-width: 2px; --rail-gap: var(--space-3); --rail-padding: var(--space-3); /* -------------------- Sidebar -------------------- */ --sidebar-bg: var(--surface-primary); --sidebar-border: var(--border-default); --sidebar-header-height: 88px; --sidebar-header-bg: var(--surface-primary); --sidebar-header-border: var(--border-subtle); --sidebar-nav-gap: var(--space-1); --sidebar-nav-item-height: 36px; --sidebar-nav-item-padding: var(--space-3); --sidebar-nav-item-radius: 0; --sidebar-nav-item-color: var(--text-secondary); --sidebar-nav-item-hover-bg: rgba(99, 85, 235, 0.08); --sidebar-nav-item-hover-color: var(--highlight-purple); --sidebar-nav-item-active-bg: var(--highlight-purple); --sidebar-nav-item-active-color: var(--text-inverse); --sidebar-footer-bg: var(--surface-secondary); --sidebar-footer-height: 52px; /* -------------------- Tooltip (Design System) -------------------- */ --ds-tooltip-bg: var(--accent-primary); --ds-tooltip-color: var(--color-black); --ds-tooltip-font-size: var(--text-sm); --ds-tooltip-font-weight: 700; --ds-tooltip-padding: var(--space-2) var(--space-3); --ds-tooltip-radius: var(--radius-xs); --ds-tooltip-glow: rgba(51, 230, 88, 0.35); /* Rail tooltip overrides (sidebar house icons — larger variant) */ --rail-tooltip-bg: var(--ds-tooltip-bg); --rail-tooltip-color: var(--ds-tooltip-color); --rail-tooltip-font-size: var(--text-lg); --rail-tooltip-font-weight: 800; --rail-tooltip-padding: var(--space-3) var(--space-5); --rail-tooltip-radius: var(--ds-tooltip-radius); --rail-tooltip-glow: var(--ds-tooltip-glow); /* -------------------- Main Area -------------------- */ --main-bg: var(--surface-app); --main-padding: var(--space-6); --main-max-width: 1200px; /* -------------------- Cards -------------------- */ --card-bg: var(--surface-card); --card-border: var(--border-default); --card-radius: var(--radius-lg); --card-padding: var(--space-4); --card-gradient: linear-gradient(145deg, #1e1e1e 0%, #161616 100%); /* -------------------- Feed Card (Editorial / Paper Layer) ---- */ --feed-card-bg: var(--surface-primary); --feed-card-radius: var(--radius-2xl); --feed-card-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.3); --feed-card-border: 1px solid var(--border-subtle); --feed-card-padding: var(--space-6) var(--space-8) var(--space-8); --feed-card-avatar-size: var(--avatar-lg); /* 48px */ --feed-card-avatar-badge-size: var(--size-8); /* 32px house logo — must be readable */ --feed-card-author-size: var(--text-base); /* 16px */ --feed-card-author-weight: var(--font-bold); /* 700 */ --feed-card-channel-size: 13px; --feed-card-body-size: 17px; --feed-card-body-leading: 1.6; --feed-card-grand-size: var(--text-3xl); /* 30px — short posts <140 chars */ --feed-card-grand-weight: var(--font-semibold); --feed-card-grand-tracking: -0.02em; --feed-card-action-size: 13px; --feed-card-action-weight: var(--font-semibold); --feed-card-action-color: var(--text-muted); --feed-card-action-border: var(--border-default); --feed-card-action-radius: var(--radius-full); --feed-card-action-padding: var(--space-2) 14px; /* Vote active state — split pill: only the voted side turns green */ --vote-active-bg: var(--accent-neon); --vote-active-color: var(--color-black); /* Image post overlay — "long first" variable-aspect media */ --feed-card-image-height: 400px; /* landscape / square max */ --feed-card-tall-max: 600px; /* portrait / tall max */ --feed-card-image-min-height: 280px; /* hero mode minimum */ --feed-card-image-title-size: var(--feed-card-grand-size); /* Same grand size as non-image short text */ --feed-card-image-title-weight: var(--font-semibold); --feed-card-image-gradient: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.15) 25%, transparent 55%, rgba(0,0,0,0.8) 100%); --feed-card-image-gradient-light: linear-gradient(to bottom, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0.25) 25%, rgba(0,0,0,0.2) 55%, rgba(0,0,0,0.85) 100%); --feed-card-image-gradient-busy: linear-gradient(to bottom, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.2) 25%, rgba(0,0,0,0.25) 50%, rgba(0,0,0,0.88) 100%); --feed-card-glass-bg: rgba(255,255,255,0.15); --feed-card-glass-border: rgba(255,255,255,0.3); --feed-card-glass-bg-dark: rgba(0,0,0,0.3); --feed-card-glass-border-dark: rgba(255,255,255,0.2); --feed-card-clamp-lines: 3; /* -------------------- Shop Cards (Shared) -------------------- */ --shop-card-base-width: 340px; --shop-card-base-width-mobile: 280px; --shop-card-bg: var(--surface-primary); --shop-card-border: 1px solid var(--border-subtle); --shop-card-radius: var(--radius-card); --shop-card-shadow: var(--shadow-sm); --shop-card-shadow-hover: 0 4px 20px rgba(0, 0, 0, 0.12); --shop-card-hover-lift: none; --shop-card-text-primary: var(--text-primary); --shop-card-text-secondary: var(--text-muted); --shop-card-text-meta: var(--text-secondary); --shop-card-transition: box-shadow var(--duration-normal) var(--ease-default); /* Shop: Grid layout */ --shop-grid-gap: var(--space-4); --shop-grid-gap-mobile: var(--space-3); --shop-grid-min-col: 320px; --shop-grid-min-col-mobile: 280px; /* Shop: Card variant min-widths (wider for breathing room) */ --shop-card-event-min-w: 360px; --shop-card-event-min-w-mobile: 280px; --shop-card-app-min-w: 300px; --shop-card-app-min-w-mobile: 260px; --shop-card-quest-min-w: 280px; --shop-card-quest-min-w-mobile: 260px; --shop-card-effect-min-w: 200px; --shop-card-effect-min-w-mobile: 160px; --shop-card-coiny-min-w: 200px; --shop-card-coiny-min-w-mobile: 160px; /* Shop: App card */ --shop-app-width: var(--shop-card-base-width); --shop-app-width-mobile: var(--shop-card-base-width-mobile); --shop-app-icon-size: var(--size-20); /* 80px */ --shop-app-icon-radius: var(--radius-xl); --shop-app-name-size: 28px; --shop-app-name-size-mobile: 24px; --shop-app-desc-size: 13px; --shop-app-badge-size: 10px; --shop-app-cta-radius: var(--radius-full); --shop-app-badge-radius: var(--radius-full); /* ── Art Collection Grid (Gallery Layer) ── */ --collection-grid-cols: 2; --collection-grid-cols-wide: 3; --collection-grid-gap: var(--space-3); --collection-card-bg: var(--gallery-card); --collection-card-border: var(--gallery-border); --collection-card-radius: var(--radius-md); --collection-card-hover-border: rgba(250, 204, 21, 0.2); --collection-img-aspect: 1; --collection-title-size: var(--text-xs); --collection-title-weight: var(--font-bold); --collection-title-color: var(--gallery-text-primary); --collection-body-padding: var(--space-3) var(--space-3) var(--space-1); --collection-body-gap: var(--space-1); --collection-rarity-size: 10px; --collection-rarity-weight: var(--font-bold); --collection-rarity-tracking: 0.08em; --collection-rarity-padding: 2px var(--space-2); --collection-rarity-radius: var(--radius-xs); --collection-rarity-original-bg: rgba(139, 92, 246, 0.12); --collection-rarity-original-color: var(--color-purple-500); --collection-rarity-limited-bg: rgba(250, 204, 21, 0.12); --collection-rarity-limited-color: var(--color-yellow-400); --collection-btn-margin: var(--space-2) var(--space-3) var(--space-3); --collection-btn-padding: var(--space-2) 0; --collection-btn-size: var(--btn-sm-font-size); --collection-btn-weight: var(--font-bold); --collection-btn-tracking: 0.03em; --collection-btn-bg: var(--btn-glass-bg); --collection-btn-bg-hover: var(--btn-glass-bg-hover); --collection-btn-color: var(--gallery-text-primary); --collection-btn-border: var(--btn-glass-border); --collection-btn-border-hover: var(--btn-glass-border-hover); --collection-btn-radius: var(--radius-sm); /* ── Ticket component (global — used by .app-ticket, .ds-ticket) ── */ --ticket-max-width: 520px; --ticket-min-height: var(--size-32); /* 128px */ --ticket-bg: var(--accent-dark); --ticket-radius: var(--radius-card); --ticket-image-width: 160px; --ticket-image-width-mobile: 120px; --ticket-body-padding: var(--space-5); --ticket-body-padding-mobile: var(--space-4); --ticket-notch-size: var(--space-5); /* 20px */ --ticket-notch-bg: var(--surface-secondary); --ticket-eyebrow-size: var(--text-xs); --ticket-eyebrow-weight: 700; --ticket-eyebrow-tracking: 0.12em; --ticket-eyebrow-color: rgba(255, 255, 255, 0.45); --ticket-title-size: var(--text-xl); --ticket-title-size-mobile: var(--text-lg); --ticket-title-weight: 800; --ticket-sub-color: rgba(255, 255, 255, 0.5); --ticket-status-color: var(--accent-primary); /* Shop: Event Ticket card (shop-specific overrides) */ --shop-event-width: 300px; --shop-event-width-mobile: var(--shop-card-base-width-mobile); --shop-event-min-height: 140px; --shop-event-min-height-mobile: 130px; --shop-event-img-width: 40%; --shop-event-bg: var(--accent-dark, #2C3444); --shop-event-accent: var(--color-pink-700, #be185d); --shop-event-accent-subtle: rgba(190, 24, 93, 0.1); --shop-event-type-size: var(--text-xs); --shop-event-type-weight: 700; --shop-event-type-tracking: 0.12em; --shop-event-type-color: rgba(255, 255, 255, 0.45); --shop-event-name-size: var(--text-base); --shop-event-name-size-mobile: var(--text-sm); --shop-event-name-weight: 800; --shop-event-venue-size: 11px; --shop-event-venue-color: rgba(255, 255, 255, 0.4); --shop-event-capacity-bar-height: 3px; --shop-event-capacity-bar-bg: rgba(255, 255, 255, 0.1); --shop-event-capacity-text-size: 10px; --shop-event-capacity-text-color: rgba(255, 255, 255, 0.35); --shop-event-fallback-icon-size: 36px; --shop-event-fallback-icon-color: rgba(255, 255, 255, 0.12); --shop-event-fallback-bg: rgba(255, 255, 255, 0.05); --shop-event-notch-size: 18px; --shop-event-notch-offset: -9px; /* Shop: Ticket card (compact/grid) */ --shop-ticket-width: 200px; --shop-ticket-img-height: 100px; --shop-ticket-accent: var(--color-pink-700, #be185d); --shop-ticket-accent-subtle: rgba(190, 24, 93, 0.1); --shop-ticket-type-size: 10px; --shop-ticket-name-size: 15px; /* Shop: Quest card */ --shop-quest-width: 160px; --shop-quest-height: 190px; --shop-quest-icon-size: var(--size-14); /* 56px */ --shop-quest-icon-radius: var(--radius-card); --shop-quest-accent: var(--color-amber-600, #d97706); --shop-quest-accent-subtle: rgba(217, 119, 6, 0.1); /* Shop: Effect card */ --shop-effect-width: 150px; --shop-effect-min-height: 200px; --shop-effect-preview-size: var(--size-14); /* 56px */ /* Shop: Coiny card */ --shop-coiny-width: 150px; --shop-coiny-min-height: 200px; --shop-coiny-accent: var(--color-green-600); --shop-coiny-accent-subtle: rgba(16, 185, 129, 0.15); /* Shop: Featured Carousel (full-width colored slides) */ --shop-carousel-min-height: 243px; --shop-carousel-min-height-desktop: 324px; --shop-carousel-padding: var(--space-8) var(--space-6); --shop-carousel-padding-desktop: var(--space-10) var(--space-12); --shop-carousel-gap: var(--space-5); --shop-carousel-color: var(--text-inverse); /* Slide color gradients */ --shop-carousel-bg-purple: linear-gradient(135deg, var(--color-purple-700) 0%, var(--color-purple-600) 40%, var(--color-purple-500) 100%); --shop-carousel-bg-blue: linear-gradient(135deg, var(--color-blue-600) 0%, var(--color-blue-500) 40%, #60a5fa 100%); --shop-carousel-bg-green: linear-gradient(135deg, #059669 0%, #10b981 40%, #34d399 100%); --shop-carousel-bg-yellow: linear-gradient(135deg, #d97706 0%, #f59e0b 40%, #fbbf24 100%); /* Eyebrow */ --shop-carousel-eyebrow-size: var(--text-xs); --shop-carousel-eyebrow-weight: var(--font-bold); --shop-carousel-eyebrow-tracking: 0.14em; /* Title */ --shop-carousel-title-font: var(--font-serif); --shop-carousel-title-size: var(--text-3xl); --shop-carousel-title-size-desktop: var(--text-5xl); --shop-carousel-title-weight: var(--font-bold); --shop-carousel-title-leading: var(--leading-tight); /* Ad text */ --shop-carousel-ad-size: var(--text-lg); --shop-carousel-ad-leading: var(--leading-normal); /* Image thumbnail */ --shop-carousel-img-size: 160px; --shop-carousel-img-size-desktop: 220px; --shop-carousel-img-radius: var(--radius-card); /* Badge / price */ --shop-carousel-badge-size: var(--text-sm); --shop-carousel-badge-weight: var(--font-semibold); --shop-carousel-price-size: var(--text-base); --shop-carousel-price-weight: var(--font-bold); /* Arrows */ --shop-carousel-arrow-size: 36px; --shop-carousel-arrow-size-desktop: 44px; --shop-carousel-arrow-bg: rgba(0,0,0,0.35); --shop-carousel-arrow-bg-hover: rgba(0,0,0,0.55); /* Dots */ --shop-carousel-dot-size: 8px; --shop-carousel-dot-bg: var(--color-gray-300); --shop-carousel-dot-active-bg: var(--highlight-purple); /* -------------------- Evolve Card -------------------- */ /* Card structure */ --evo-card-radius: var(--radius-card); --evo-card-border: var(--border-subtle); --evo-card-bg: var(--surface-primary); --evo-card-shadow: var(--shadow-sm); /* Hero region */ --evo-hero-height: 140px; --evo-hero-bg: linear-gradient(135deg, var(--surface-secondary) 0%, var(--surface-tertiary) 50%, var(--surface-secondary) 100%); --evo-hero-icon-color: var(--accent-primary-subtle); --evo-hero-icon-size: var(--size-10); --evo-hero-fade: linear-gradient(to bottom, transparent 30%, rgba(22,22,22,0.95) 100%); /* Type badge */ --evo-badge-size: 9px; --evo-badge-weight: var(--font-bold); --evo-badge-tracking: 0.06em; --evo-badge-radius: 6px; --evo-badge-quest-bg: var(--accent-primary-subtle); --evo-badge-quest-color: var(--accent-primary); --evo-badge-quest-border: rgba(26, 143, 128, 0.2); --evo-badge-app-bg: rgba(139, 92, 246, 0.15); --evo-badge-app-color: var(--color-purple-700); --evo-badge-app-border: rgba(139, 92, 246, 0.2); --evo-badge-item-bg: rgba(250, 204, 21, 0.15); --evo-badge-item-color: #facc15; --evo-badge-item-border: rgba(250, 204, 21, 0.2); --evo-badge-prompt-bg: var(--status-success-subtle); --evo-badge-prompt-color: var(--color-green-500); --evo-badge-prompt-border: rgba(16, 185, 129, 0.2); /* Reward badge */ --evo-reward-bg: var(--status-success-subtle); --evo-reward-color: var(--color-green-600); --evo-reward-border: rgba(34, 197, 94, 0.18); --evo-reward-radius: var(--radius-full); /* Body region */ --evo-body-height: 130px; --evo-body-padding: 14px var(--space-4); --evo-icon-size: 38px; --evo-icon-radius: 10px; --evo-icon-bg: var(--accent-primary-subtle); --evo-icon-color: var(--accent-primary); --evo-name-size: 15px; --evo-name-weight: var(--font-bold); --evo-name-color: var(--text-primary); --evo-desc-size: var(--text-xs); --evo-desc-color: var(--text-muted); --evo-desc-lines: 3; /* CTA button */ --evo-cta-radius: var(--radius-full); --evo-cta-bg: linear-gradient(135deg, var(--accent-primary), var(--accent-primary-hover)); --evo-cta-color: var(--color-black); --evo-cta-shadow: 0 4px 16px rgba(200, 230, 78, 0.25); --evo-done-bg: var(--status-success-subtle); --evo-done-color: var(--color-green-600); --evo-done-border: rgba(34, 197, 94, 0.2); /* State: current */ --evo-current-border: rgba(200, 230, 78, 0.3); /* State: completed */ --evo-completed-opacity: 0.55; --evo-completed-saturation: saturate(0.3); /* State: locked */ --evo-locked-opacity: 0.4; --evo-locked-filter: saturate(0) brightness(0.85); /* Glow: brand teal ↔ spice oscillation */ --evo-glow-brand: rgba(200, 230, 78, 0.35); --evo-glow-brand-spread: rgba(200, 230, 78, 0.12); --evo-glow-spice: rgba(242, 106, 44, 0.35); --evo-glow-spice-spread: rgba(242, 106, 44, 0.12); --evo-glow-done: rgba(16, 185, 129, 0.25); --evo-glow-locked: rgba(148, 163, 184, 0.15); /* Flash (sticky gate) */ --evo-flash-color: var(--accent-primary); --evo-flash-glow: rgba(200, 230, 78, 0.3); --evo-flash-inset: rgba(200, 230, 78, 0.06); /* Status overlay */ --evo-overlay-done-bg: rgba(34, 197, 94, 0.15); --evo-overlay-done-color: var(--color-green-600); --evo-overlay-locked-bg: rgba(0, 0, 0, 0.2); --evo-overlay-locked-color: var(--text-muted); /* Evolve Feed Card (grand hero card on house feed) */ --evo-feed-radius: var(--radius-card); --evo-feed-height: 400px; --evo-feed-bg: var(--surface-primary); --evo-feed-padding: var(--space-6); --evo-feed-title-size: 30px; --evo-feed-title-weight: var(--font-semibold); --evo-feed-title-tracking: -0.02em; --evo-feed-title-color: var(--text-primary); --evo-feed-desc-color: var(--text-secondary); --evo-feed-reward-color: var(--color-green-600); --evo-feed-badge-bg: var(--evo-badge-quest-bg); --evo-feed-badge-color: var(--evo-badge-quest-color); --evo-feed-badge-border: var(--evo-badge-quest-border); --evo-feed-cta-bg: var(--highlight-purple); --evo-feed-cta-color: #fff; --evo-feed-icon-color: var(--accent-primary-subtle); /* Shop: PDP (Product Detail Page) — overlay (legacy) */ --shop-pdp-bg: #f5f5f7; --shop-pdp-hero-height: 280px; --shop-pdp-body-max-width: 520px; --shop-pdp-title-size: var(--text-2xl); --shop-pdp-buy-bg: var(--accent-primary); --shop-pdp-buy-bg-hover: var(--accent-primary-hover); /* Shop: PDP Page (standalone full-screen layout) */ --pdp-bg: #f3f2f7; --pdp-text-primary: #1e1e2e; --pdp-text-secondary: #4a4a5a; --pdp-text-muted: #8e8e9e; --pdp-surface: #ffffff; --pdp-border: rgba(0, 0, 0, 0.06); --pdp-page-max-width: 1080px; --pdp-page-padding: 80px 40px 60px; --pdp-page-gap: 48px; --pdp-nav-inset: 20px; --pdp-nav-size: 40px; --pdp-nav-bg: rgba(255, 255, 255, 0.7); --pdp-nav-border: rgba(0, 0, 0, 0.08); --pdp-nav-color: var(--pdp-text-primary); --pdp-photo-radius: 16px; --pdp-photo-aspect: 9 / 16; --pdp-icon-size: 48px; --pdp-info-gap: 20px; --pdp-badge-bg: rgba(99, 85, 235, 0.08); --pdp-badge-color: #6355eb; --pdp-badge-size: 11px; --pdp-badge-radius: 20px; --pdp-title-size: 28px; --pdp-desc-size: 15px; --pdp-price-size: 24px; --pdp-buy-bg: var(--accent-primary, #33e658); --pdp-buy-color: #000; --pdp-buy-radius: 12px; --pdp-creator-avatar-size: 28px; --pdp-modal-bg: var(--pdp-surface); --pdp-modal-border: var(--pdp-border); /* PDP — Top bar */ --pdp-topbar-height: 56px; --pdp-topbar-bg: rgba(255, 255, 255, 0.85); --pdp-topbar-border: var(--pdp-border); --pdp-topbar-logo-size: 20px; --pdp-topbar-wordmark-size: 13px; --pdp-topbar-wordmark-spacing: 3px; /* PDP — Book variant */ --pdp-book-photo-bg: var(--pdp-bg); --pdp-buy-alt-bg: rgba(5, 150, 105, 0.1); --pdp-buy-alt-color: #059669; --pdp-hint-size: 13px; /* PDP — Zine variant */ --pdp-zine-cover-aspect: 2 / 3; --pdp-zine-cover-position: top; --pdp-zine-editions-gap: var(--space-3); --pdp-zine-edition-height: 72px; --pdp-zine-edition-cover-width: 48px; --pdp-zine-edition-cover-radius: var(--radius-sm); --pdp-zine-edition-name-size: var(--text-sm); --pdp-zine-edition-name-weight: var(--font-semibold); --pdp-zine-edition-brand-size: var(--text-xs); --pdp-zine-edition-brand-color: var(--text-muted); --pdp-zine-edition-border: 1px solid var(--border-subtle); --pdp-zine-edition-radius: var(--radius-md); --pdp-zine-edition-bg: var(--surface-primary); --pdp-zine-edition-bg-hover: var(--surface-secondary); /* PDP: Art Tier List */ --pdp-tier-gap: var(--space-3); --pdp-tier-padding: var(--space-4) var(--space-5); --pdp-tier-bg: var(--pdp-surface); --pdp-tier-border: var(--pdp-border); --pdp-tier-border-hover: rgba(0, 0, 0, 0.14); --pdp-tier-radius: var(--radius-md); --pdp-tier-icon-size: var(--size-10); --pdp-tier-icon-radius: var(--radius-md); --pdp-tier-icon-bg: var(--accent-tertiary-subtle); --pdp-tier-icon-color: var(--accent-tertiary); --pdp-tier-icon-font-size: var(--text-xl); --pdp-tier-name-size: var(--text-sm); --pdp-tier-name-weight: var(--font-semibold); --pdp-tier-detail-size: var(--text-xs); --pdp-tier-price-size: var(--text-base); --pdp-tier-price-weight: var(--font-bold); --pdp-tier-btn-padding: var(--space-3) var(--space-5); --pdp-tier-btn-radius: var(--pdp-buy-radius); --pdp-tier-btn-bg: var(--pdp-buy-bg); --pdp-tier-btn-color: var(--pdp-buy-color); --pdp-tier-btn-size: var(--text-xs); --pdp-tier-btn-weight: var(--font-bold); --pdp-stereo-padding: var(--space-4) var(--space-5); --pdp-stereo-bg: var(--pdp-surface); --pdp-stereo-border: var(--pdp-border); --pdp-stereo-radius: var(--radius-md); --pdp-stereo-title-size: var(--text-sm); --pdp-stereo-title-weight: var(--font-semibold); --pdp-stereo-text-size: var(--text-xs); /* -------------------- Buttons -------------------- */ /* Base */ --btn-font: var(--font-sans); --btn-font-size: var(--text-sm); --btn-font-weight: var(--font-medium); --btn-radius: var(--radius-full); --btn-padding: 10px 20px; --btn-gap: var(--space-2); --btn-transition: all 0.2s ease; /* Size: Small */ --btn-sm-padding: 6px 14px; --btn-sm-font-size: 12px; /* Size: Large */ --btn-lg-padding: 14px 28px; --btn-lg-font-size: 16px; /* Disabled */ --btn-disabled-opacity: 0.4; /* Primary: Brand green, hover → purple */ --btn-primary-bg: var(--accent-primary); --btn-primary-bg-hover: var(--highlight-purple); --btn-primary-color: var(--color-black); --btn-primary-color-hover: var(--color-white); --btn-primary-border: var(--accent-primary); --btn-primary-glow: none; /* Secondary: Purple outline (matches house nav) */ --btn-secondary-bg: transparent; --btn-secondary-bg-hover: rgba(99, 85, 235, 0.08); --btn-secondary-color: var(--highlight-purple); --btn-secondary-border: rgba(99, 85, 235, 0.25); --btn-secondary-border-hover: var(--highlight-purple); /* Ghost: Invisible until hover (works on light + dark) */ --btn-ghost-bg: transparent; --btn-ghost-bg-hover: rgba(44, 52, 68, 0.08); --btn-ghost-color: var(--text-secondary); --btn-ghost-color-hover: var(--text-primary); /* Danger: Solid red */ --btn-danger-bg: var(--color-red-500); --btn-danger-bg-hover: var(--color-red-600, #dc2626); --btn-danger-color: var(--color-white); --btn-danger-color-hover: var(--color-white); --btn-danger-border: var(--color-red-500); /* Success: Solid green */ --btn-success-bg: var(--status-success); --btn-success-bg-hover: var(--color-green-600, #059669); --btn-success-color: var(--color-black); --btn-success-color-hover: var(--color-black); --btn-success-border: var(--status-success); /* Dark: Slate solid, hover → green */ --btn-dark-bg: var(--accent-dark); --btn-dark-bg-hover: var(--accent-primary); --btn-dark-color: var(--color-white); --btn-dark-color-hover: var(--color-black); --btn-dark-border: var(--accent-dark); /* Yellow: Highlight CTA, hover → black */ --btn-yellow-bg: var(--highlight-yellow); --btn-yellow-bg-hover: var(--accent-dark); --btn-yellow-color: var(--color-black); --btn-yellow-color-hover: var(--color-white); --btn-yellow-border: var(--highlight-yellow); /* Glass: frosted white tint for dark backgrounds */ --btn-glass-bg: rgba(255, 255, 255, 0.12); --btn-glass-bg-hover: rgba(255, 255, 255, 0.22); --btn-glass-color: var(--text-inverse); --btn-glass-border: rgba(255, 255, 255, 0.25); --btn-glass-border-hover: rgba(255, 255, 255, 0.45); --btn-glass-blur: 12px; /* -------------------- Avatars -------------------- */ --avatar-xs: var(--size-6); /* 24px */ --avatar-sm: var(--size-8); /* 32px */ --avatar-md: var(--size-10); /* 40px */ --avatar-lg: var(--size-12); /* 48px */ --avatar-xl: var(--size-16); /* 64px */ --avatar-2xl: var(--size-32); /* 128px */ /* -------------------- Top Bar Pill (light) ----------------- */ --topbar-pill-bg: #000000; --topbar-pill-blur: 0; --topbar-pill-border: #000000; --topbar-pill-shadow: none; --topbar-pill-radius: 0; --topbar-pill-py: 8px; --topbar-pill-px: 16px; --topbar-pill-gap: 8px; --topbar-pill-font: var(--font-mono); --topbar-pill-font-weight: 700; --topbar-pill-font-size: 13px; --topbar-pill-letter-spacing: 0.05em; --topbar-pill-text-color: #ffffff; --topbar-pill-logo-size: 13px; /* -------------------- Filter Pills (shop/feed category filters) ---- */ --filter-pill-bg: #ffffff; --filter-pill-bg-active: #1e293b; --filter-pill-text: #64748b; --filter-pill-text-active: #ffffff; --filter-pill-border: rgba(0, 0, 0, 0.12); --filter-pill-border-active: #1e293b; --filter-pill-radius: var(--radius-full); --filter-pill-font-size: 13px; --filter-pill-font-weight: 600; --filter-pill-py: 6px; --filter-pill-px: 16px; --filter-pill-gap: 8px; /* -------------------- House Nav (dark) ---- */ /* House Treasury Badge (on house detail banner) */ --house-treasury-bg: rgba(0, 0, 0, 0.55); --house-treasury-border: rgba(255, 255, 255, 0.12); --house-treasury-radius: var(--radius-md); --house-treasury-px: var(--space-2); --house-treasury-py: var(--space-1); --house-treasury-gap: var(--space-1); --house-treasury-font-size: var(--text-xs); --house-treasury-font-weight: var(--font-bold); --house-treasury-color: var(--color-green-400); --house-treasury-icon-size: 14px; /* Kitchen Treasury Card */ --kitchen-treasury-radius: var(--radius-xl); --kitchen-treasury-padding: var(--space-5) var(--space-6); --kitchen-treasury-bg: var(--surface-primary); --kitchen-treasury-border: var(--border-default); --kitchen-treasury-balance-font: var(--font-mono); --kitchen-treasury-balance-size: var(--text-3xl); --kitchen-treasury-balance-weight: var(--font-bold); --kitchen-treasury-balance-color: var(--text-primary); --kitchen-treasury-label-size: 11px; --kitchen-treasury-label-color: var(--text-muted); --kitchen-treasury-label-weight: var(--font-semibold); --kitchen-treasury-change-up: var(--status-success); --kitchen-treasury-change-down: var(--status-error); --kitchen-treasury-change-size: var(--text-xs); --kitchen-treasury-demurrage-size: var(--text-sm); --kitchen-treasury-demurrage-color: var(--text-secondary); --kitchen-treasury-member-size: var(--text-sm); --kitchen-treasury-member-amount-font: var(--font-mono); --kitchen-treasury-avatar-size: var(--avatar-sm); /* House Navigation - Individual Button Style (not connected pills) */ --house-nav-bg: #ffffff; --house-nav-blur: 0px; --house-nav-border: transparent; --house-nav-shadow: none; --house-nav-radius: 0; --house-nav-gap: 12px; --house-nav-padding: 0; --house-nav-item-height: 40px; --house-nav-item-px: 20px; --house-nav-item-radius: 12px; --house-nav-item-font-size: 12px; --house-nav-item-font-weight: 600; --house-nav-item-letter-spacing: 0.04em; --house-nav-item-color: var(--text-primary); --house-nav-item-hover-bg: rgba(99, 85, 235, 0.08); --house-nav-item-hover-color: var(--highlight-purple); --house-nav-item-active-bg: var(--highlight-purple); --house-nav-item-active-color: #ffffff; --house-nav-item-active-shadow: 0 2px 8px rgba(99, 85, 235, 0.3); --house-nav-item-active-icon: #ffffff; --house-nav-item-border: 1px solid transparent; --house-nav-item-active-border: 1px solid var(--highlight-purple); /* -------------------- Icons -------------------- */ --icon-default-size: 1.25em; /* Scale unsized icons 25% larger than text */ /* -------------------- Modals -------------------- */ --modal-bg: var(--surface-primary); --modal-border: var(--border-default); --modal-radius: var(--radius-xl); --modal-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); /* -------------------- Utility Bar (inverted contrast) ---- */ --utility-bar-bg: var(--color-dark-800); --utility-bar-text: #ffffff; --utility-bar-text-muted: rgba(255, 255, 255, 0.5); --utility-bar-border: rgba(255, 255, 255, 0.08); --utility-bar-radius: 0; --utility-bar-height: 56px; --utility-bar-padding: 14px 20px; --utility-bar-title-size: 15px; --utility-bar-title-weight: 800; --utility-bar-title-tracking: 1.2px; --utility-bar-slot-size: 36px; --utility-bar-slot-border: var(--accent-primary); --utility-bar-slot-bg: var(--accent-primary-subtle); --utility-bar-slot-empty: var(--color-gray-400); --utility-bar-balance-bg: #22c55e; --utility-bar-balance-border: #16a34a; --utility-bar-balance-color: #ffffff; /* Balance tab (hangs below utility bar, e.g. Shop) */ --balance-tab-bg: var(--color-dark-800); --balance-tab-radius: var(--radius-md); /* 12px bottom corners */ --balance-tab-padding: var(--space-1) var(--space-3) var(--space-2); --balance-tab-chevron-color: var(--utility-bar-text-muted); --balance-tab-chevron-hover: var(--utility-bar-text); --balance-tab-pill-bg: rgba(34, 197, 94, 0.15); --balance-tab-pill-border: rgba(34, 197, 94, 0.25); --balance-tab-pill-color: var(--color-green-400, #4ade80); --balance-tab-pill-size: var(--text-xs); --balance-tab-pill-weight: 700; --balance-tab-pill-radius: var(--radius-full); --balance-tab-pill-padding: 3px var(--space-2) 3px var(--space-2); --balance-tab-transition: var(--duration-fast) var(--ease-default); /* -------------------- Drawer / Utility Pages ------------ */ --drawer-surface: var(--surface-primary); --drawer-panel-header-height: 60px; --drawer-panel-header-bg: var(--surface-secondary); /* -------------------- Quiz Component -------------------- */ /* Quiz header */ --quiz-logo-height: 40px; --quiz-headline-font: var(--font-heading); --quiz-headline-size: clamp(22px, 5vw, 34px); --quiz-headline-weight: var(--font-bold); --quiz-headline-color: var(--text-primary); --quiz-steps-size: 13px; --quiz-steps-color: var(--text-muted); /* Progress bar */ --quiz-progress-pip-height: 5px; --quiz-progress-pip-radius: 5px; --quiz-progress-pip-bg: var(--border-strong); --quiz-progress-pip-gap: 6px; /* Question card */ --quiz-card-bg: var(--surface-primary); --quiz-card-radius: var(--radius-xl); --quiz-card-shadow: var(--shadow-lg); --quiz-card-border: 1px solid var(--border-subtle); --quiz-card-padding: 36px 32px 32px; /* Question typography */ --quiz-question-font: var(--font-serif); --quiz-question-size: clamp(22px, 4.5vw, 28px); --quiz-question-weight: var(--font-semibold); --quiz-question-color: var(--text-primary); --quiz-hint-size: var(--text-sm); --quiz-hint-color: var(--text-secondary); --quiz-hint-bg: var(--hint-bg); --quiz-hint-border: var(--hint-border); --quiz-hint-radius: var(--hint-radius); /* Question step indicator */ --quiz-step-size: 13px; --quiz-step-weight: var(--font-semibold); --quiz-step-tracking: 1.5px; /* Textarea */ --quiz-textarea-bg: var(--color-yellow-100); --quiz-textarea-bg-focus: var(--color-yellow-50); --quiz-textarea-border: 2px solid var(--border-default); --quiz-textarea-border-focus: var(--color-teal-600); --quiz-textarea-radius: 14px; --quiz-textarea-padding: 16px 54px 16px 16px; --quiz-textarea-font-size: 16px; --quiz-textarea-min-height: 120px; --quiz-textarea-focus-ring: 0 0 0 3px rgba(13, 148, 136, 0.12); /* Mic button */ --quiz-mic-size: 38px; --quiz-mic-bg: rgba(20, 184, 166, 0.1); --quiz-mic-color: var(--color-teal-500); --quiz-mic-recording-color: var(--color-red-500); --quiz-mic-recording-bg: rgba(239, 68, 68, 0.12); /* Loading screen */ --quiz-loading-bg: var(--color-dark-900); --quiz-loading-quote-font: var(--font-heading); --quiz-loading-quote-size: clamp(24px, 5vw, 48px); --quiz-loading-quote-weight: var(--font-semibold); --quiz-loading-quote-color: var(--color-white); --quiz-loading-attr-size: clamp(13px, 2vw, 16px); --quiz-loading-attr-color: var(--color-gray-400); --quiz-loading-progress-bg: var(--color-dark-600); --quiz-loading-progress-height: 36px; --quiz-loading-progress-gradient: var(--accent-neon); /* -------------------- Auth Component -------------------- */ /* Auth page */ --auth-page-bg: var(--surface-secondary); --auth-card-bg: var(--surface-primary); --auth-card-radius: var(--radius-xl); --auth-card-shadow: var(--shadow-lg); --auth-card-padding: var(--space-6); --auth-card-max-width: 400px; /* Auth header */ --auth-logo-height: 40px; --auth-title-font: var(--font-heading); --auth-title-size: var(--text-2xl); --auth-title-weight: var(--font-semibold); --auth-title-color: var(--text-primary); --auth-subtitle-size: var(--text-sm); --auth-subtitle-color: var(--text-muted); /* Form elements */ --auth-label-size: 12px; --auth-label-weight: var(--font-semibold); --auth-label-color: var(--text-secondary); --auth-label-tracking: 0.02em; --auth-input-height: 40px; --auth-input-padding: 0 12px; --auth-input-radius: var(--radius-sm); --auth-input-bg: var(--surface-primary); --auth-input-border: 1px solid var(--border-default); --auth-input-border-focus: var(--color-teal-600); --auth-input-font-size: 15px; --auth-input-color: var(--text-primary); /* Auth footer */ --auth-footer-border: 1px solid var(--border-default); --auth-footer-text-size: var(--text-sm); --auth-footer-text-color: var(--text-muted); --auth-footer-link-color: var(--color-teal-600); /* ── Zine flipbook ── */ --zine-aspect: 2 / 3; --zine-aspect-mult: 1.5; /* Backgrounds */ --zine-bg-dark: #1a1a2e; --zine-bg-black: #0a0a0f; --zine-bg-warm: #f5f0eb; --zine-bg-gray: #e8e3de; --zine-bg-page: var(--surface-primary); /* Text */ --zine-text-primary: #1a1a1a; --zine-text-body: #2a2a2a; --zine-text-em: #444; --zine-text-on-dark: #fff; --zine-text-on-dark-muted: rgba(255, 255, 255, 0.85); --zine-text-on-dark-subtle: rgba(255, 255, 255, 0.5); --zine-text-on-dark-faint: rgba(255, 255, 255, 0.35); --zine-text-muted: rgba(0, 0, 0, 0.35); --zine-text-faint: rgba(0, 0, 0, 0.12); /* Glass (buttons on dark / light backgrounds) */ --zine-glass-dark: rgba(0, 0, 0, 0.4); --zine-glass-dark-hover: rgba(0, 0, 0, 0.6); --zine-glass-light: rgba(255, 255, 255, 0.15); --zine-glass-light-hover: rgba(255, 255, 255, 0.3); --zine-glass-light-border: rgba(255, 255, 255, 0.15); /* Spacing */ --zine-padding-x: 28px; --zine-padding-x-desktop: var(--space-8); --zine-close-top: var(--space-3); --zine-close-right: var(--space-4); --zine-close-size: var(--space-8); --zine-close-icon: var(--space-4); --zine-footer-bottom: var(--space-5); --zine-footer-right: var(--space-6); --zine-footer-gap: var(--space-3); --zine-rail-inset: var(--space-3); --zine-credits-gap: var(--space-4); --zine-credits-padding: var(--space-10) var(--zine-padding-x); /* Pips */ --zine-pip-size: 6px; --zine-pip-gap: var(--space-2); --zine-pip-bottom: 28px; --zine-pip-bottom-desktop: var(--space-5); --zine-pip-bg: rgba(255, 255, 255, 0.35); --zine-pip-bg-active: #fff; --zine-pip-bg-dark: rgba(0, 0, 0, 0.2); --zine-pip-bg-dark-active: var(--zine-text-primary); /* Typography */ --zine-body-size: 17px; --zine-body-lh: 1.75; --zine-body-size-sm: 15px; --zine-body-lh-sm: 1.65; --zine-eyebrow-size: 11px; --zine-eyebrow-ls: 2px; --zine-eyebrow-color: var(--color-teal-500, #14b8a6); --zine-footer-size: 11px; --zine-rail-size: 9px; --zine-rail-ls: 3px; --zine-hint-size: 10px; /* Radii */ --zine-card-radius: var(--radius-xl); /* Transitions */ --zine-ease-depart: 0.25s cubic-bezier(0.4, 0, 0.2, 1); --zine-ease-arrive: 0.3s cubic-bezier(0.0, 0, 0.2, 1); --zine-ease-settle: 0.2s cubic-bezier(0.0, 0, 0.2, 1); /* Modal */ --zine-modal-backdrop: rgba(0, 0, 0, 0.9); --zine-modal-radius: var(--radius-xl); --zine-modal-close-size: var(--space-10); --zine-modal-close-top: var(--space-5); --zine-modal-close-right: var(--space-6); --zine-modal-close-font-size: var(--text-2xl); --zine-modal-max-height: 85vh; } /* ============================================================================= LAYER 4: HOUSE THEME OVERRIDES Apply via data-house-theme attribute on .app-shell ============================================================================= */ /* Courage House - Red/Orange theme */ [data-house-theme="courage"] { --accent-primary: var(--color-red-500); --accent-primary-hover: var(--color-red-400); --accent-primary-subtle: rgba(239, 68, 68, 0.12); --accent-secondary: var(--color-orange-500); --avatar-ring-color: var(--color-red-500); --avatar-glow-color: rgba(220, 38, 38, 0.4); } /* Integrity House - Purple/Blue theme */ [data-house-theme="integrity"] { --accent-primary: var(--color-purple-600); --accent-primary-hover: var(--color-purple-700); --accent-primary-subtle: rgba(147, 51, 234, 0.12); --accent-secondary: var(--color-blue-500); --avatar-ring-color: var(--color-purple-600); --avatar-glow-color: rgba(147, 51, 234, 0.4); } /* Focus House - Green/Teal theme */ [data-house-theme="focus"] { --accent-primary: var(--color-green-500); --accent-primary-hover: var(--color-green-400); --accent-primary-subtle: rgba(34, 197, 94, 0.12); --accent-secondary: var(--color-teal-500); --avatar-ring-color: var(--color-green-500); --avatar-glow-color: rgba(22, 163, 74, 0.4); } /* Wisdom House - Purple/Pink theme */ [data-house-theme="wisdom"] { --accent-primary: var(--color-purple-500); --accent-primary-hover: var(--color-purple-600); --accent-primary-subtle: rgba(168, 85, 247, 0.12); --accent-secondary: var(--color-pink-500); --avatar-ring-color: var(--color-purple-500); --avatar-glow-color: rgba(147, 51, 234, 0.4); } /* ============================================================================= HOUSE NAV ON-IMAGE OVERRIDE Use class="house-nav--on-image" when nav overlays a banner image. Restores dark frosted-glass appearance for legibility over photos. ============================================================================= */ .house-nav--on-image { --house-nav-item-color: rgba(255, 255, 255, 0.65); --house-nav-item-hover-bg: rgba(255, 255, 255, 0.1); --house-nav-item-hover-color: rgba(255, 255, 255, 0.85); --house-nav-item-active-bg: rgba(44, 52, 68, 0.95); --house-nav-item-active-color: #ffffff; --house-nav-item-active-shadow: 0 2px 8px rgba(0, 0, 0, 0.2); --house-nav-item-active-icon: var(--color-teal-400); --house-nav-item-border: 1px solid rgba(255, 255, 255, 0.15); --house-nav-item-active-border: 1px solid rgba(255, 255, 255, 0.25); } /* ============================================================================= WORKSPACE COLOR PALETTE 8 colors that auto-rotate for new build workspaces. Set via data-palette attribute, no inline styles needed. ============================================================================= */ [data-palette="0"] { --workspace-color: var(--color-cyan-500); } [data-palette="1"] { --workspace-color: var(--color-orange-500); } [data-palette="2"] { --workspace-color: var(--color-purple-500); } [data-palette="3"] { --workspace-color: var(--color-green-500); } [data-palette="4"] { --workspace-color: var(--color-red-500); } [data-palette="5"] { --workspace-color: var(--color-teal-500); } [data-palette="6"] { --workspace-color: var(--color-yellow-400); } [data-palette="7"] { --workspace-color: var(--color-blue-500); } /* ============================================================================= DS CARD COMPONENT TOKENS Tokenised card families for the Design System pages. ============================================================================= */ :root { /* ── House Result Card ── */ --result-card-bg: linear-gradient(180deg, var(--color-dark-600) 0%, var(--color-dark-800) 100%); --result-card-radius: var(--radius-2xl); --result-card-border: 1px solid rgba(51, 230, 88, 0.08); --result-card-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6); --result-card-padding: var(--space-5) var(--space-8) var(--space-8); --result-card-edge: linear-gradient(90deg, transparent, var(--accent-neon), transparent); --result-badge-bg: var(--accent-primary-subtle); --result-badge-color: var(--accent-neon); --result-badge-font: var(--font-heading); --result-badge-size: var(--text-xs); --result-badge-weight: var(--font-semibold); --result-badge-radius: var(--radius-full); --result-badge-padding: var(--space-1) var(--space-4); --result-badge-tracking: 0.15em; --result-label-color: var(--color-white); --result-label-size: var(--text-sm); --result-label-weight: var(--font-light); --result-identity-font: var(--font-serif); --result-identity-size: clamp(18px, 4vw, 24px); --result-identity-weight: var(--font-medium); --result-identity-color: var(--color-gray-300); --result-identity-tracking: 0.12em; --result-value-font: var(--font-heading); --result-value-size: clamp(44px, 10vw, 72px); --result-value-weight: var(--font-bold); --result-value-color: var(--color-white); --result-value-gradient: linear-gradient(135deg, var(--accent-neon), var(--accent-neon)); --result-divider-color: var(--color-dark-500); --result-divider-width: 60px; --result-body-color: var(--color-gray-300); --result-body-size: var(--text-base); --result-body-weight: var(--font-light); --result-body-leading: 1.8; --result-quote-color: var(--color-gray-400); --result-quote-size: var(--text-sm); --result-quote-weight: var(--font-normal); --result-bar-bg: rgba(0, 0, 0, 0.25); --result-bar-border: 1px solid rgba(255, 255, 255, 0.06); --result-bar-padding: var(--space-4) var(--space-5); --result-bar-name-font: var(--font-heading); --result-bar-name-size: var(--text-sm); --result-bar-name-color: var(--color-white); --result-bar-role-size: var(--text-xs); --result-bar-role-color: var(--color-gray-500); --result-bar-logo-size: var(--size-10); --result-bar-logo-radius: var(--radius-md); --result-action-padding: var(--space-3) var(--space-5); --result-action-font: var(--font-heading); --result-action-size: var(--text-sm); --result-action-weight: var(--font-medium); --result-action-tracking: 0.1em; --result-action-radius: var(--radius-full); --result-action-color: var(--color-white); --result-action-bg: transparent; --result-action-border: 1px solid rgba(255, 255, 255, 0.25); --result-action-hover-bg: var(--accent-primary); --result-action-hover-color: var(--color-dark-900); --result-action-hover-border: 1px solid var(--accent-primary); --result-action-primary-bg: var(--color-white); --result-action-primary-color: var(--color-dark-900); --result-action-primary-border: 1px solid var(--color-white); --result-logo-width: 120px; --result-logo-margin: var(--space-3) auto var(--space-4); --result-badge-border: 1px solid rgba(51, 230, 88, 0.12); /* ── Auth page ── */ --auth-logo-size: var(--text-base); --auth-logo-weight: var(--font-semibold); --auth-logo-tracking: 0.08em; --auth-logo-color: var(--accent-primary); --auth-logo-icon-size: 18px; --auth-subtitle-color: var(--text-muted); --auth-subtitle-size: var(--text-sm); /* ── Result Card — Light (Sorted) variant ── */ --result-light-bg: var(--color-white); --result-light-border: 1px solid var(--color-gray-200); --result-light-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.12); --result-light-edge: linear-gradient(90deg, transparent, var(--highlight-purple), transparent); --result-light-label-color: var(--text-secondary); --result-light-header-padding: var(--space-3) var(--space-6); --result-light-header-logo-size: 18px; --result-light-header-text-size: var(--text-base); --result-light-house-name-color: var(--text-primary); --result-light-house-name-size: clamp(22px, 4.5vw, 28px); --result-light-belief-color: var(--text-secondary); --result-light-belief-size: var(--text-base); --result-light-bottom-padding: var(--space-3) var(--space-5) var(--space-2); /* ── Result Card — Flip mechanics ── */ --result-flip-perspective: 1200px; --result-flip-duration: 0.7s; --result-flip-easing: cubic-bezier(0.4, 0.0, 0.2, 1); /* ── Result Card — "You are a" seer label ── */ --result-seer-size: 15px; --result-seer-weight: var(--font-light); --result-seer-color: var(--color-gray-500); --result-seer-tracking: 0.03em; /* ── Result Card — Bar flip-trigger button ── */ --result-bar-btn-font: var(--font-heading); --result-bar-btn-size: 13px; --result-bar-btn-weight: var(--font-medium); --result-bar-btn-tracking: 0.1em; --result-bar-btn-color: var(--color-white); --result-bar-btn-bg: rgba(51, 230, 88, 0.08); --result-bar-btn-border: 1px solid rgba(51, 230, 88, 0.2); --result-bar-btn-radius: var(--radius-sm); --result-bar-btn-padding: var(--space-2) var(--space-5); --result-bar-btn-hover-bg: rgba(51, 230, 88, 0.14); --result-bar-btn-hover-border: 1px solid rgba(51, 230, 88, 0.35); --result-bar-btn-hover-shadow: 0 0 16px rgba(51, 230, 88, 0.1); /* ── Result Card — Back side ── */ --result-back-hero-bg: var(--color-dark-800); --result-back-hero-gradient: linear-gradient(to top, var(--color-dark-800) 0%, rgba(10, 16, 32, 0.85) 35%, transparent 100%); --result-back-hero-aspect: 16 / 10; --result-back-house-font: var(--font-heading); --result-back-house-size: clamp(28px, 7vw, 40px); --result-back-house-weight: var(--font-bold); --result-back-house-tracking: 0.04em; --result-back-house-color: var(--color-white); --result-back-motto-size: 15px; --result-back-motto-color: var(--color-gray-300); --result-back-section-font: var(--font-heading); --result-back-section-size: 11px; --result-back-section-weight: var(--font-normal); --result-back-section-tracking: 0.2em; --result-back-section-color: var(--color-gray-500); --result-back-goal-size: var(--text-base); --result-back-goal-weight: var(--font-light); --result-back-goal-color: var(--color-gray-300); --result-back-goal-leading: 1.7; --result-back-cta-font: var(--font-heading); --result-back-cta-size: var(--text-base); --result-back-cta-weight: var(--font-medium); --result-back-cta-tracking: 0.1em; --result-back-cta-color: var(--color-dark-900); --result-back-cta-bg: var(--accent-neon); --result-back-cta-radius: var(--radius-full); --result-back-cta-padding: var(--space-4) var(--space-10); --result-back-cta-hover-shadow: 0 8px 32px rgba(51, 230, 88, 0.3); --result-back-flipback-color: var(--accent-neon); --result-back-flipback-font: var(--font-heading); --result-back-flipback-size: 14px; --result-back-flipback-weight: var(--font-medium); --result-back-flipback-tracking: 0.12em; --result-back-flipback-border: 1px solid rgba(51, 230, 88, 0.08); --result-back-flipback-hover-bg: rgba(51, 230, 88, 0.04); /* ── Result Strip (sticky action bar) ── */ --result-strip-bg: var(--surface-app); --result-strip-border: 1px solid rgba(0, 0, 0, 0.08); --result-strip-padding: var(--space-4) var(--space-5); --result-strip-gap: var(--space-3); --result-strip-z: var(--z-sticky); --result-strip-btn-font: var(--font-heading); --result-strip-btn-size: 14px; --result-strip-btn-weight: var(--font-medium); --result-strip-btn-tracking: 0.1em; --result-strip-btn-radius: var(--radius-full); --result-strip-btn-padding: var(--space-3) var(--space-5); --result-strip-share-color: var(--color-gray-600); --result-strip-share-bg: var(--color-white); --result-strip-share-border: 1px solid rgba(0, 0, 0, 0.1); --result-strip-share-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); --result-strip-cta-color: var(--color-dark-900); --result-strip-cta-bg: var(--accent-neon); --result-strip-cta-shadow: 0 2px 12px rgba(51, 230, 88, 0.25); /* ── Passport / Onboarding Card ── */ --passport-card-bg: linear-gradient(180deg, var(--color-dark-600) 0%, var(--color-dark-800) 100%); --passport-card-radius: var(--radius-2xl); --passport-card-border: 1px solid rgba(51, 230, 88, 0.1); --passport-card-shadow: 0 24px 48px -12px rgba(0, 0, 0, 0.6), 0 0 60px -20px rgba(51, 230, 88, 0.04); --passport-card-corner-color: rgba(51, 230, 88, 0.25); --passport-card-corner-size: 28px; --passport-card-edge: linear-gradient(90deg, transparent, var(--accent-neon), transparent); --passport-banner-min-h: 520px; --passport-banner-gradient: linear-gradient(to bottom, rgba(10, 16, 32, 0.45) 0%, rgba(10, 16, 32, 0.55) 35%, rgba(10, 16, 32, 0.75) 65%, rgba(10, 16, 32, 0.92) 100%); --passport-avatar-size: 72px; --passport-avatar-ring: var(--accent-neon); --passport-handle-font: var(--font-heading); --passport-handle-size: clamp(24px, 6vw, 34px); --passport-handle-weight: var(--font-bold); --passport-handle-color: var(--color-white); --passport-three-words-color: var(--accent-neon); --passport-three-words-size: var(--text-sm); --passport-three-words-tracking: 0.08em; --passport-pill-bg: rgba(255, 255, 255, 0.08); --passport-pill-border: 1px solid rgba(255, 255, 255, 0.12); --passport-pill-color: var(--color-gray-300); --passport-pill-primary-color: var(--accent-neon); --passport-pill-primary-bg: rgba(51, 230, 88, 0.1); --passport-action-color: var(--color-gray-400); --passport-action-hover: var(--accent-neon); --passport-house-logo-size: 72px; /* ── Profile Card ── */ --profile-card-bg: var(--surface-primary); --profile-card-radius: var(--radius-xl); --profile-card-shadow: var(--shadow-lg); --profile-card-border: 1px solid var(--border-default); --profile-card-padding: var(--space-6); --profile-card-avatar-size: var(--size-20); --profile-card-name-font: var(--font-heading); --profile-card-name-size: var(--text-2xl); --profile-card-name-weight: var(--font-bold); --profile-card-name-color: var(--text-primary); --profile-card-handle-size: var(--text-sm); --profile-card-handle-color: var(--text-muted); --profile-card-bio-size: var(--text-base); --profile-card-bio-color: var(--text-secondary); --profile-card-bio-leading: var(--leading-relaxed); --profile-card-stat-value-font: var(--font-heading); --profile-card-stat-value-size: var(--text-2xl); --profile-card-stat-value-weight: var(--font-bold); --profile-card-stat-value-color: var(--text-primary); --profile-card-stat-label-size: var(--text-xs); --profile-card-stat-label-color: var(--text-muted); --profile-card-stat-label-tracking: 0.08em; /* ── House Info Card ── */ --house-info-card-bg: var(--surface-primary); --house-info-card-radius: var(--radius-xl); --house-info-card-shadow: var(--shadow-md); --house-info-card-border: 1px solid var(--border-default); --house-info-card-padding: var(--space-6); --house-info-card-banner-h: 200px; --house-info-card-banner-radius: var(--radius-lg); --house-info-card-name-font: var(--font-heading); --house-info-card-name-size: var(--text-2xl); --house-info-card-name-weight: var(--font-bold); --house-info-card-name-color: var(--text-primary); --house-info-card-motto-font: var(--font-serif); --house-info-card-motto-size: var(--text-base); --house-info-card-motto-color: var(--text-secondary); --house-info-card-desc-size: var(--text-base); --house-info-card-desc-color: var(--text-secondary); --house-info-card-desc-leading: var(--leading-relaxed); --house-info-card-stat-bg: var(--surface-secondary); --house-info-card-stat-radius: var(--radius-md); --house-info-card-stat-padding: var(--space-4); --house-info-card-stat-value-font: var(--font-heading); --house-info-card-stat-value-size: var(--text-xl); --house-info-card-stat-value-weight: var(--font-bold); --house-info-card-stat-value-color: var(--text-primary); --house-info-card-stat-label-size: var(--text-xs); --house-info-card-stat-label-color: var(--text-muted); /* ── Lockup tokens ──────────────────────────────────────────────── HARD RULE: mark height MUST equal text cap-height in single-line lockup. For two-line lockup, mark spans both lines. ────────────────────────────────────────────────────────────── */ --lockup-font: var(--font-mono); --lockup-font-weight: 700; --lockup-tracking: 0.05em; --lockup-gap: var(--space-3); /* Single-line lockup */ --lockup-text-size: var(--text-sm); /* 14px — mark matches this */ --lockup-mark-size: var(--text-sm); /* HARD: must equal --lockup-text-size */ /* Two-line lockup */ --lockup-2l-brand-size: var(--text-sm); /* 14px line 1: BOOK OF HOUSES */ --lockup-2l-tagline-size: var(--text-xs); /* 12px line 2: INTENT CREATES THE FUTURE */ --lockup-2l-tagline-font: var(--font-serif); --lockup-2l-tagline-weight: 400; --lockup-2l-tagline-color-light: var(--text-muted); --lockup-2l-tagline-color-dark: rgba(255, 255, 255, 0.6); --lockup-2l-mark-size: calc(var(--lockup-2l-brand-size) + var(--lockup-2l-tagline-size) + var(--space-1)); --lockup-2l-gap: var(--space-3); --lockup-2l-line-gap: var(--space-1); /* Light variant colors */ --lockup-text-color-light: var(--text-primary); --lockup-mark-fill-light: var(--text-primary); /* Dark variant colors */ --lockup-text-color-dark: #FFFFFF; --lockup-mark-fill-dark: #FFFFFF; --lockup-dark-bg: var(--accent-dark); /* ── Dictation Field (textarea + mic) ── */ --dictation-min-height: 120px; --dictation-max-height: 320px; --dictation-mic-size: 36px; --dictation-mic-offset: var(--space-2); } /* ============================================================================= DICTATION FIELD — shared textarea + mic-button component Usage: .boho-dictation-field > textarea + button.boho-dictation-mic Textarea auto-grows during voice input, cursor always stays visible. ============================================================================= */ .boho-dictation-field { position: relative; } .boho-dictation-field textarea { width: 100%; min-height: var(--dictation-min-height); max-height: var(--dictation-max-height); padding: var(--space-3); padding-right: calc(var(--dictation-mic-size) + var(--dictation-mic-offset) * 2 + var(--space-1)); border: 1px solid var(--border-default); border-radius: var(--radius-md); background: var(--surface-primary); color: var(--text-primary); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; resize: none; overflow-y: auto; box-sizing: border-box; transition: border-color var(--duration-fast) var(--ease-default); } .boho-dictation-field textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 20%, transparent); } .boho-dictation-field textarea::placeholder { color: var(--text-muted); } .boho-dictation-mic { position: absolute; top: var(--dictation-mic-offset); right: var(--dictation-mic-offset); width: var(--dictation-mic-size); height: var(--dictation-mic-size); border: none; border-radius: var(--radius-full); background: var(--surface-secondary); color: var(--text-muted); font-size: 18px; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all var(--duration-fast) var(--ease-default); } .boho-dictation-mic:hover { background: var(--surface-primary); color: var(--text-primary); box-shadow: var(--shadow-sm); } .boho-dictation-mic.recording, .boho-dictation-mic.dm-mic-btn--recording { background: var(--status-error); color: #fff; animation: bohoDictationPulse 1.5s ease-in-out infinite; } .boho-dictation-mic .dm-mic-btn__timer { position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%); font-size: 10px; color: var(--status-error); white-space: nowrap; } @keyframes bohoDictationPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status-error) 40%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }