/* ========================================================================== 3Bee design tokens: the single source of truth (PHASE 24 → P9) Custom properties only. Do not add selectors other than :root here. BREAKPOINT CONTRACT (custom properties cannot be used inside @media): width : max-width 1200px · 768px · 430px · 360px (never others) desktop-only rules : (min-width: 769px) tablet-landscape band, only when a rule must not reach phones: (min-width: 769px) and (max-width: 1200px) capability : (hover: hover) and (pointer: fine) · (pointer: coarse) short desktop : (min-width: 769px) and (max-height: 900px) Shell: sidebar ≥769 · drawer + tab bar ≤768 (the mobile shell owns 768). ========================================================================== */ :root { /* ---- 1. Brand primitives (Figma variable names, already used by builder.css / deploy.css; keep these names) ---------------------- */ --honey-gold: #F4C542; --vibrant-yellow: #E49609; --deep-navy: #0F172A; --steel-blue: #475569; --cloud-white: #F7F8FF; --ice-blue-tint: #F0F7FF; --page-bg: #EDF1F8; --light-gray: #D1D5DB; --soft-slate: #BACBDD; --console-bg: #2E384D; --active-green-bg: #D5FFD8; --active-green-dot: #22C55E; /* The ONE canonical gold gradient (Figma export; every 69-90deg variant maps here). */ --gold-button-gradient: linear-gradient(82.41548deg, #E49609 0%, #F4C542 76.002%); /* ---- 2. Semantic colour (bee-) -------------------------------------- */ --bee-gold-fill: var(--gold-button-gradient); --bee-on-gold: #0F172A; /* D1: label on any gold fill */ --bee-gold-ink: #8A5703; /* gold text/indicator on light, 6.1:1 */ --bee-gold-wash: rgba(244, 197, 66, 0.12); --bee-gold-wash-2: rgba(244, 197, 66, 0.18); --bee-gold-cream: #FFF6D8; --bee-gold-line: rgba(228, 150, 9, 0.40); --bee-bg: var(--page-bg); --bee-bg-mobile: var(--ice-blue-tint); --bee-surface: #FFFFFF; --bee-surface-2: var(--cloud-white); --bee-hover-wash: #F2F5FD; --bee-ink-wash: rgba(15, 23, 42, 0.06); /* icon-button hover wash (eye, toggle) */ --bee-ink: var(--deep-navy); /* all text, headings, labels */ --bee-ink-2: #334155; --bee-ink-3: var(--steel-blue); /* body copy, secondary */ --bee-muted: #5B6B80; /* captions, placeholders (5.1:1 on cloud, 4.8:1 on page-bg) */ --bee-subtle: #94A3B8; /* decorative/disabled only, never meaning */ --bee-icon: #33363F; /* Figma icon tone (strokes/fills only) */ --bee-on-dark: #FFFFFF; --bee-line: #E2E8F0; /* dividers, card borders */ --bee-line-strong: var(--light-gray); /* control borders */ --bee-line-hover: var(--soft-slate); /* control hover border */ --bee-danger: #C42B22; /* 5.5:1 on white */ --bee-danger-ink: #A3241C; --bee-danger-wash: #FEF2F2; --bee-danger-line: #FCA5A5; --bee-ok: #047857; /* success text/icons on light (5.5:1 on white, 4.8:1 on page-bg) */ --bee-ok-dot: var(--active-green-dot); /* status dots */ --bee-ok-wash: #DEF7EC; --bee-warn: #D97706; /* icons only (3.2:1) */ --bee-warn-dot: #F59E0B; --bee-warn-ink: #92400E; /* warning text */ --bee-warn-wash: #FEF3C7; --bee-link: #1F6FDB; /* 4.8:1 */ --bee-link-hover: #1D4ED8; --bee-scrim: rgba(15, 23, 42, 0.45); --bee-scrim-modal: rgba(15, 23, 42, 0.55); --bee-console-bg: var(--console-bg); --bee-console-track: #232A37; --bee-skel-base: #E8ECF4; --bee-skel-hi: #F3F5FA; /* ---- 3. Typography -------------------------------------------------- */ --bee-font-head: 'Manrope', 'Plus Jakarta Sans', sans-serif; --bee-font-body: 'Plus Jakarta Sans', sans-serif; --bee-font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; --bee-fs-11: 11px; /* floor: metadata, tab labels, chips */ --bee-fs-12: 12px; /* body-small, hints */ --bee-fs-13: 13px; --bee-fs-14: 14px; /* body, buttons */ --bee-fs-16: 16px; /* fields on touch (iOS no-zoom), section titles mobile */ --bee-fs-18: 18px; /* card titles */ --bee-fs-20: 20px; --bee-fs-24: 24px; /* page titles */ --bee-fs-28: 28px; --bee-fs-32: 32px; --bee-fs-40: 40px; /* hero */ /* ---- 4. Radius (6/8/12/16/20) ---------------------------------------- */ --bee-r-sm: 6px; /* controls: inputs, buttons, chips; mobile cards */ --bee-r-md: 8px; /* toasts, console, icon tiles, menu rows */ --bee-r-lg: 12px; /* form cards, subcards, popovers, nav pill, action tiles */ --bee-r-xl: 16px; /* showcase cards, dialogs, drawer */ --bee-r-2xl: 20px; /* large panels, OTP boxes */ --bee-r-pill: 999px; /* ---- 5. Elevation (layered, navy-tinted) ------------------------------ */ --bee-e1: 0 1px 2px rgba(15, 23, 42, 0.04), 0 1px 3px rgba(15, 23, 42, 0.04); --bee-e2: 0 1px 2px rgba(15, 23, 42, 0.04), 0 4px 8px -2px rgba(15, 23, 42, 0.06), 0 12px 24px -8px rgba(15, 23, 42, 0.10); --bee-e3: 0 2px 4px rgba(15, 23, 42, 0.06), 0 12px 24px -6px rgba(15, 23, 42, 0.12), 0 32px 64px -16px rgba(15, 23, 42, 0.24); --bee-glow-gold: 0 0 0 1px rgba(228, 150, 9, 0.16), 0 10px 28px -10px rgba(228, 150, 9, 0.45); --bee-shadow-gold: 0 1px 2px rgba(228, 150, 9, 0.24), 0 6px 14px -4px rgba(228, 150, 9, 0.32); /* Danger CTA depth: the --bee-shadow-gold shape in danger red. */ --bee-shadow-danger: 0 1px 2px rgba(196, 43, 34, 0.24), 0 6px 14px -4px rgba(196, 43, 34, 0.32); --bee-shadow-danger-hover: 0 1px 2px rgba(196, 43, 34, 0.24), 0 10px 20px -6px rgba(196, 43, 34, 0.40); --bee-hairline: 0 1px 0 rgba(15, 23, 42, 0.06); --bee-inset-well: inset 0 1px 2px rgba(15, 23, 42, 0.04); /* ---- 6. Spacing (8pt grid, 4px half-steps; index = px / 4) ----------- */ --bee-space-1: 4px; --bee-space-2: 8px; --bee-space-3: 12px; --bee-space-4: 16px; --bee-space-5: 20px; --bee-space-6: 24px; --bee-space-8: 32px; --bee-space-10: 40px; --bee-space-12: 48px; --bee-space-16: 64px; /* ---- 7. Layout -------------------------------------------------------- */ --bee-gutter: 32px; /* page side padding (D4) */ --bee-section-gap: 24px; /* between cards/sections */ --bee-sidebar-w: 258px; --bee-tabbar-h: 69px; --bee-safe-b: env(safe-area-inset-bottom, 0px); --bee-tabbar-clear: calc(var(--bee-tabbar-h) + var(--bee-safe-b)); --bee-toast-bottom: 24px; /* every toast uses this */ /* Toast side offsets: viewport-fit=cover lets a landscape notch cover a fixed toast, so the side safe area is added to the offset. */ --bee-toast-inset-r: calc(var(--bee-space-6) + env(safe-area-inset-right, 0px)); --bee-toast-inset-l: calc(var(--bee-space-6) + env(safe-area-inset-left, 0px)); --bee-touch: 44px; /* min hit target */ --bee-control-h: 40px; /* desktop control height */ --bee-z-sticky: 50; --bee-z-tabbar: 60; --bee-z-scrim: 70; --bee-z-drawer: 80; --bee-z-toast: 100; /* contract from dashboard.css §12 */ /* ---- 8. Motion -------------------------------------------------------- */ --bee-dur-1: 120ms; /* press, micro */ --bee-dur-2: 180ms; /* hover, colour, border */ --bee-dur-3: 280ms; /* drawer, dropup, popover, toast */ --bee-dur-4: 480ms; /* entrance */ --bee-dur-5: 900ms; /* one-shot sheen, gauge fill */ --bee-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* enter / settle */ --bee-ease-standard: cubic-bezier(0.2, 0, 0, 1); /* move */ --bee-ease-in: cubic-bezier(0.4, 0, 1, 1); /* exit */ --bee-stagger: 60ms; --bee-lift: -2px; --bee-press-scale: 0.98; /* ---- 9. Focus (D2) ------------------------------------------------------ */ --bee-focus-color: #8A5703; /* light surfaces: 6.1:1 white, 5.4:1 page-bg */ --bee-focus-color-on-dark: #F4C542; /* navy/console surfaces: 11:1 navy, 7.2:1 console */ --bee-focus-ring: 2px solid var(--bee-focus-color); --bee-focus-offset: 2px; --bee-focus-halo: 0 0 0 3px rgba(228, 150, 9, 0.35); --bee-focus-halo-danger: 0 0 0 3px rgba(196, 43, 34, 0.20); } @media (max-width: 1200px) { :root { --bee-gutter: 24px; } } @media (max-width: 768px) { :root { --bee-gutter: 16px; --bee-section-gap: 16px; --bee-control-h: 44px; --bee-toast-bottom: calc(var(--bee-tabbar-clear) + 16px); --bee-toast-inset-r: calc(var(--bee-gutter) + env(safe-area-inset-right, 0px)); --bee-toast-inset-l: calc(var(--bee-gutter) + env(safe-area-inset-left, 0px)); } } @media (max-width: 360px) { :root { --bee-gutter: 12px; } } @media (pointer: coarse) { :root { --bee-control-h: 44px; } }