/* ============================================================ BEINN DESIGN SYSTEM — TOKENS ============================================================ Single source of truth for every design decision. Import this file first, before components.css. RTL (Hebrew) is the default direction. ============================================================ */ :root { /* ---------------------------------------------------------- COLOR — PRIMITIVES Natural, organic palette drawn from the Beinn app identity. ---------------------------------------------------------- */ /* Sand & paper — light surfaces */ --color-sand: #E7E1D6; /* page canvas */ --color-sand-deep: #DED7CB; /* alt section */ --color-paper: #FBF8F1; /* card / screen surface */ --color-paper-warm: #F5F0E8; /* slightly warmer surface */ /* Blue — brand header / selected state */ --color-blue: #ADCCE6; /* primary brand blue */ --color-blue-deep: #7AAED4; /* darker blue for pressed */ --color-blue-mute: rgba(173,204,230,.22); --color-blue-rim: rgba(173,204,230,.45); --color-blue-glow: rgba(173,204,230,.18); /* Peach — CTA / accent warm */ --color-peach: #F2C9A6; /* primary CTA background */ --color-peach-deep: #E8B48C; /* pressed CTA */ --color-peach-soft: #F9DFC6; /* hover / light fill */ --color-peach-mute: rgba(242,201,166,.22); --color-peach-glow: rgba(242,201,166,.18); /* Gold — secondary accent / brand warmth */ --color-gold: #C9975E; --color-gold-deep: #B07A40; --color-gold-soft: #E0B98C; --color-gold-mute: rgba(201,151,94,.18); --color-gold-rim: rgba(201,151,94,.28); /* Ink — dark text on light surfaces */ --color-ink: #37453C; /* primary text */ --color-ink-mid: #4E5E55; /* secondary text */ --color-muted: #6D7A70; /* muted text */ --color-muted-light: #96A49A; /* placeholder / hint */ /* Dark surfaces (retained for dark-mode sections) */ --color-dark: #1E2E2B; --color-dark-panel: #162421; --color-dark-hi: #243730; --color-on-dark: #F0EDE6; --color-on-dark-mute:#8BA49A; /* Accent blue tint used in selected choices */ --color-choice: #ADCCE6; /* selected option bg */ --color-choice-text: #16324A; /* text on blue choice */ /* ---------------------------------------------------------- COLOR — SEMANTIC ALIASES ---------------------------------------------------------- */ /* Surfaces */ --bg-page: var(--color-sand); --bg-page-alt: var(--color-sand-deep); --bg-card: var(--color-paper); --bg-dark: var(--color-dark); --bg-panel: var(--color-dark-panel); --bg-panel-elevated: var(--color-dark-hi); /* Text */ --text-primary: var(--color-ink); --text-secondary: var(--color-ink-mid); --text-muted: var(--color-muted); --text-hint: var(--color-muted-light); --text-on-dark: var(--color-on-dark); --text-on-dark-mute: var(--color-on-dark-mute); /* Accent — peach is the primary CTA accent */ --accent: var(--color-peach); --accent-deep: var(--color-peach-deep); --accent-soft: var(--color-peach-soft); /* Gold accent (secondary warmth) */ --gold: var(--color-gold); --gold-deep: var(--color-gold-deep); --gold-soft: var(--color-gold-soft); /* Blue accent (header, selected, brand) */ --blue: var(--color-blue); --blue-deep: var(--color-blue-deep); /* Borders */ --line: rgba(55,69,60,.14); --line-soft: rgba(55,69,60,.08); --line-card: rgba(255,255,255,.68); --line-on-dark: rgba(240,237,230,.14); --line-on-dark-soft: rgba(240,237,230,.08); /* State stripe colors */ --state-anxious: #C9975E; --state-heavy: #7A9BB0; --state-auto: #A3B4BF; --state-open: #ADCCE6; /* ---------------------------------------------------------- TYPOGRAPHY ---------------------------------------------------------- */ /* Font stacks */ --font-display: 'Marcellus', 'Frank Ruhl Libre', Georgia, serif; /* display / headings */ --font-display-he: 'Frank Ruhl Libre', 'Marcellus', Georgia, serif; /* Hebrew display */ --font-body: 'Heebo', system-ui, sans-serif; /* Hebrew + English body */ --font-body-en: 'Heebo', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'Courier New', monospace; --font-script: 'Caveat', cursive; /* handwritten accent */ /* Active aliases */ --display: var(--font-display-he); --body: var(--font-body); --mono: var(--font-mono); /* Scale — fluid where possible */ --text-xs: 11px; --text-sm: 13px; --text-base: 15px; --text-md: 17px; --text-lg: clamp(19px, 2.2vw, 22px); --text-xl: clamp(22px, 2.8vw, 28px); --text-2xl: clamp(28px, 4vw, 44px); --text-3xl: clamp(36px, 5.2vw, 62px); --text-hero: clamp(36px, 5.2vw, 62px); /* Weight */ --weight-light: 300; --weight-regular: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* Leading */ --leading-tight: 1.1; --leading-snug: 1.35; --leading-normal: 1.6; --leading-relaxed: 1.72; /* Tracking */ --tracking-tight: -.01em; --tracking-normal: 0; --tracking-wide: .05em; --tracking-wider: .08em; --tracking-widest: .14em; /* ---------------------------------------------------------- SPACING ---------------------------------------------------------- */ --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; --space-20: 80px; --space-24: 96px; --space-32: 128px; /* Fluid section padding */ --section-y: clamp(56px, 8vw, 100px); --section-y-sm: clamp(28px, 4.5vw, 52px); --section-y-lg: clamp(64px, 10vw, 120px); /* Inline layout padding */ --pad: clamp(20px, 5vw, 52px); /* ---------------------------------------------------------- LAYOUT ---------------------------------------------------------- */ --max-width: 1080px; --max-width-text: 680px; --max-width-prose: 64ch; --max-width-tight: 46ch; /* ---------------------------------------------------------- SHAPE ---------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 8px; --radius-md: 12px; --radius-lg: 18px; --radius-card: 24px; /* rounded card corners like mockup */ --radius-xl: 28px; --radius-screen:38px; /* phone screen shell */ --radius-pill: 999px; --radius-full: 50%; /* ---------------------------------------------------------- ELEVATION / SHADOW ---------------------------------------------------------- */ /* Softer, organic shadows (warm tint) */ --shadow-xs: 0 1px 4px rgba(46,65,60,.05); --shadow-sm: 0 2px 8px rgba(46,65,60,.07); --shadow-soft: 0 4px 18px rgba(46,65,60,.08); --shadow-card: 0 8px 28px rgba(46,65,60,.10); --shadow-lg: 0 18px 52px rgba(37,63,80,.18); --shadow-xl: 0 28px 80px rgba(37,63,80,.26); /* Peach glow for CTA buttons */ --shadow-peach: 0 10px 24px rgba(210,160,110,.30); /* ---------------------------------------------------------- MOTION ---------------------------------------------------------- */ --ease-out: cubic-bezier(.22,.68,0,1.2); --ease-in-out: cubic-bezier(.4,0,.2,1); --ease-spring: cubic-bezier(.34,1.56,.64,1); --duration-fast: 150ms; --duration-base: 200ms; --duration-slow: 350ms; --duration-reveal: 400ms; /* ---------------------------------------------------------- Z-INDEX ---------------------------------------------------------- */ --z-base: 0; --z-raised: 10; --z-overlay: 20; --z-modal: 30; --z-header: 50; --z-toast: 60; } /* Hebrew RTL — default */ html[dir="rtl"] { --display: var(--font-display-he); } /* English LTR overrides */ html[dir="ltr"] { --display: var(--font-display); --body: var(--font-body-en); } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }