/* ============================================================ BRAND SYSTEM · Panda Brand Studio · בית הספר של Claude ------------------------------------------------------------ Single source of truth for brand colors, type scale, spacing rhythm, radii, elevation, motion, and layout. Loaded early so every component inherits consistent tokens. Usage: reference via var(--b-*) tokens in component CSS. ============================================================ */ :root { /* ════════════════════════════════════════════════════ 1 · BRAND PALETTE ════════════════════════════════════════════════════ */ /* Primary — Panda Gold (flagship accent) */ --b-gold-50: #FFF8E6; --b-gold-100: #FDECBE; --b-gold-200: #FADB8B; --b-gold-300: #F5C658; --b-gold-400: #EEB22E; --b-gold-500: #E8A020; /* ★ brand hero */ --b-gold-600: #C8870F; --b-gold-700: #A06C09; --b-gold-800: #785107; --b-gold-900: #4D3405; /* Secondary — Claude Teal */ --b-teal-50: #EAFBF8; --b-teal-100: #C6F4EB; --b-teal-200: #92E9D9; --b-teal-300: #58DAC2; --b-teal-400: #2EDEC9; /* ★ secondary */ --b-teal-500: #12BCA7; --b-teal-600: #0B9585; --b-teal-700: #0A746A; --b-teal-800: #08554F; --b-teal-900: #063935; /* Tertiary — Signal Magenta (alerts, CTA contrast) */ --b-magenta-400: #F472B6; --b-magenta-500: #EC4899; /* ★ tertiary */ --b-magenta-600: #DB2777; /* Neutrals — Ink scale (warm-black base) */ --b-ink-950: #050508; /* ★ app bg */ --b-ink-900: #0A0A12; --b-ink-850: #10101A; --b-ink-800: #161622; /* ★ surface */ --b-ink-700: #1F1F2E; --b-ink-600: #2B2B3F; --b-ink-500: #3D3D5C; --b-ink-400: #5A5A7A; --b-ink-300: #8A8AA8; /* Cream — warm-white text (premium feel vs pure white) */ --b-cream-50: #FDFBF5; --b-cream-100: #F5F1E6; /* ★ text-primary */ --b-cream-200: rgba(245,241,230,0.85); /* ~14.3:1 AAA */ --b-cream-300: rgba(245,241,230,0.72); /* ~10.1:1 AAA */ --b-cream-400: rgba(245,241,230,0.6); /* ~7.0:1 AAA body — was 0.45 (failed AA) */ --b-cream-500: rgba(245,241,230,0.42); /* ~4.6:1 AA large text only */ --b-rule: rgba(245,241,230,0.08); /* Semantic */ --b-success: #22C55E; --b-warning: #F59E0B; --b-danger: #EF4444; --b-info: var(--b-teal-400); /* ════════════════════════════════════════════════════ 2 · BRAND GRADIENTS ════════════════════════════════════════════════════ */ /* Hero accent — used for display type + primary CTA */ --b-grad-hero: linear-gradient(115deg, #FCD34D 0%, var(--b-gold-500) 45%, var(--b-magenta-500) 100%); /* Soft brand wash for section backdrops */ --b-grad-wash: linear-gradient(180deg, rgba(232,160,32,0.04) 0%, rgba(236,72,153,0.03) 50%, rgba(46,222,201,0.04) 100%); /* CTA pressable */ --b-grad-cta: linear-gradient(135deg, #FCD34D 0%, var(--b-gold-500) 55%, var(--b-gold-600) 100%); /* Surface-over-bg: faint depth */ --b-grad-surface: linear-gradient(180deg, rgba(22,22,34,0.82), rgba(10,10,18,0.68)); /* ════════════════════════════════════════════════════ 3 · TYPE SYSTEM ════════════════════════════════════════════════════ */ --b-font-sans: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif; --b-font-display: 'Space Grotesk', 'Heebo', system-ui, sans-serif; --b-font-mono: 'JetBrains Mono', 'Menlo', monospace; /* Fluid scale — clamp(min, preferred, max) */ --b-text-xs: clamp(0.78rem, 0.74rem + 0.12vw, 0.85rem); /* floor 12.48px — Hebrew legibility (M-01) */ --b-text-sm: clamp(0.82rem, 0.78rem + 0.15vw, 0.92rem); --b-text-base: clamp(0.95rem, 0.9rem + 0.2vw, 1.05rem); --b-text-md: clamp(1.05rem, 0.98rem + 0.3vw, 1.2rem); --b-text-lg: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); --b-text-xl: clamp(1.5rem, 1.3rem + 0.8vw, 1.85rem); --b-text-2xl: clamp(1.85rem, 1.5rem + 1.4vw, 2.4rem); --b-text-3xl: clamp(2.25rem, 1.75rem + 2vw, 3rem); --b-text-4xl: clamp(2.75rem, 2rem + 3vw, 4rem); --b-text-display: clamp(3rem, 2rem + 4.5vw, 5.5rem); /* Weights */ --b-w-regular: 400; --b-w-medium: 500; --b-w-semi: 600; --b-w-bold: 700; --b-w-black: 900; /* Line heights */ --b-lh-tight: 1.18; /* Hebrew descender clearance — was 1.02 (clipped tag/qof) */ --b-lh-snug: 1.25; --b-lh-normal: 1.5; --b-lh-relaxed: 1.65; /* Tracking */ --b-track-display: -0.045em; --b-track-tight: -0.02em; --b-track-normal: 0em; --b-track-wide: 0.08em; --b-track-wider: 0.14em; --b-track-widest: 0.2em; /* ════════════════════════════════════════════════════ 4 · SPACING (8-point grid) ════════════════════════════════════════════════════ */ --b-space-0: 0; --b-space-1: 4px; --b-space-2: 8px; --b-space-3: 12px; --b-space-4: 16px; --b-space-5: 24px; --b-space-6: 32px; --b-space-7: 48px; --b-space-8: 64px; --b-space-9: 96px; --b-space-10: 128px; --b-space-11: 192px; /* Fluid section padding */ --b-pad-section: clamp(4rem, 2.5rem + 5vw, 8rem); --b-pad-section-sm: clamp(2rem, 1.5rem + 2vw, 4rem); /* ════════════════════════════════════════════════════ 5 · LAYOUT — CONTAINERS ════════════════════════════════════════════════════ */ --b-container-tight: 640px; --b-container-base: 820px; --b-container-wide: 1080px; --b-container-max: 1280px; --b-container-gutter: 2.5rem; /* ════════════════════════════════════════════════════ 6 · RADII ════════════════════════════════════════════════════ */ --b-radius-xs: 6px; --b-radius-sm: 8px; --b-radius-md: 12px; --b-radius-lg: 16px; --b-radius-xl: 20px; --b-radius-2xl: 28px; --b-radius-pill: 999px; /* ════════════════════════════════════════════════════ 7 · ELEVATION (5 tiers) ════════════════════════════════════════════════════ */ --b-shadow-1: 0 1px 2px rgba(0,0,0,0.45); --b-shadow-2: 0 4px 12px rgba(0,0,0,0.45), 0 1px 2px rgba(0,0,0,0.3); --b-shadow-3: 0 10px 28px rgba(0,0,0,0.5), 0 2px 6px rgba(0,0,0,0.35); --b-shadow-4: 0 22px 60px rgba(0,0,0,0.55), 0 6px 16px rgba(0,0,0,0.4); --b-shadow-5: 0 40px 100px rgba(0,0,0,0.6), 0 14px 28px rgba(0,0,0,0.45); /* Brand glow (use sparingly) */ --b-glow-gold: 0 20px 46px -10px rgba(232,160,32,0.55); --b-glow-gold-lg: 0 28px 70px -8px rgba(232,160,32,0.8); --b-glow-teal: 0 20px 46px -10px rgba(46,222,201,0.4); /* ════════════════════════════════════════════════════ 8 · MOTION ════════════════════════════════════════════════════ */ --b-ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --b-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --b-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --b-ease-linear: linear; --b-dur-instant: 80ms; --b-dur-fast: 180ms; --b-dur-base: 260ms; --b-dur-slow: 440ms; --b-dur-slower: 700ms; --b-dur-reveal: 900ms; --b-dur-epic: 1400ms; /* ════════════════════════════════════════════════════ 9 · Z-INDEX SCALE ════════════════════════════════════════════════════ */ --b-z-behind: -1; --b-z-base: 0; --b-z-raised: 10; --b-z-nav: 100; --b-z-overlay: 200; --b-z-modal: 300; --b-z-toast: 400; --b-z-top: 500; /* ════════════════════════════════════════════════════ 10 · SURFACES (glassmorphism defaults) ════════════════════════════════════════════════════ */ --b-glass-bg: rgba(22, 22, 34, 0.58); --b-glass-border: rgba(245, 241, 230, 0.07); --b-glass-blur: blur(18px) saturate(1.15); --b-glass-gold-bg: rgba(19, 19, 30, 0.62); --b-glass-gold-border: rgba(232, 160, 32, 0.22); /* ════════════════════════════════════════════════════ 11 · ORB TOKENS (consumed by HTML inline styles) ════════════════════════════════════════════════════ */ --bg-orb-primary: rgba(232,160,32,0.18); --bg-orb-secondary: rgba(46,222,201,0.12); --bg-orb-tertiary: rgba(236,72,153,0.06); } /* ── Reduced motion — nuke durations ───────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --b-dur-instant: 0ms; --b-dur-fast: 0ms; --b-dur-base: 0ms; --b-dur-slow: 0ms; --b-dur-slower: 0ms; --b-dur-reveal: 0ms; --b-dur-epic: 0ms; --b-ease-spring: linear; } } /* ── Utility classes (sparingly used) ──────────────────── */ .u-container { width: min(100% - var(--b-container-gutter), var(--b-container-wide)); margin-inline: auto; } .u-container-tight{ width: min(100% - var(--b-container-gutter), var(--b-container-tight)); margin-inline: auto; } .u-container-max { width: min(100% - var(--b-container-gutter), var(--b-container-max)); margin-inline: auto; } .u-text-display { font-family: var(--b-font-display); font-weight: var(--b-w-bold); letter-spacing: var(--b-track-display); line-height: var(--b-lh-tight); } .u-text-eyebrow { font-size: var(--b-text-xs); font-weight: var(--b-w-semi); letter-spacing: var(--b-track-wider); text-transform: uppercase; color: var(--b-cream-400); } .u-grad-text { background: var(--b-grad-hero); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }