/* ========================================================================= i-fal Design Tokens — single source of truth for the coded templates. Values noted TODO:figma are provisional (read from screenshots) and will be replaced with exact values pulled via get_design_context. ========================================================================= */ :root { /* ---- Brand (exact, from Figma) ---- */ --c-brand-orange: #FA9720; /* logo mark */ --c-brand-sky: #3BAAE1; /* logo mark / accents */ --c-primary: #1582FF; /* CTA blue ("Download for free") */ --c-primary-600: #1773E0; /* hover / decoration shape */ --c-primary-050: #F4F7FF; /* tint */ --c-blue-4: #D8EAFF; /* language pill bg */ /* ---- Surfaces ---- */ --c-bg: #FFFFFF; --c-bg-hero-1: #F4F7FF; /* hero radial gradient stop 1 */ --c-bg-hero-2: #EDF2FF; /* hero radial gradient stop 2 */ --c-bg-soft: #F5F7FE; --c-footer: #0B1B3F; /* TODO:figma — confirm navy from footer node */ --c-footer-text: #C7CEE0; /* ---- Text (exact) ---- */ --c-ink: #0A2869; /* headings — deep navy */ --c-ink-strong: #19235F; /* emphasis / price / blue-text */ --c-body: #626B96; /* body copy — subtext */ --c-muted: #8A90AB; /* ---- Lines / states ---- */ --c-border: #DEE4FF; /* button stroke */ --c-success: #61CE70; /* ---- Typography ---- */ --font-sans: "Noto Sans Hebrew", system-ui, -apple-system, "Segoe UI", sans-serif; /* design font (EN + HE) */ --font-heb: "Noto Sans Hebrew", system-ui, sans-serif; --fs-hero: clamp(2rem, 3.6vw, 2.5rem); /* 40px */ --fs-h2: clamp(1.75rem, 3vw, 2.25rem); --fs-h3: clamp(1.25rem, 2vw, 1.5rem); --fs-lead: clamp(1.25rem, 2.2vw, 1.75rem); /* 28px subhead */ --fs-body: 1.0625rem; --fs-small: 0.9375rem; --fw-regular: 400; --fw-medium: 500; --fw-semibold:600; --fw-bold: 700; --lh-tight: 1.15; --lh-normal: 1.6; /* ---- Spacing scale (8px base) ---- */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-7: 6rem; --sp-8: 8rem; /* ---- Radius / shadow ---- */ --radius-sm: 8px; --radius: 16px; --radius-lg: 28px; --radius-pill: 999px; --shadow-card: 0 4px 20px rgba(37, 58, 71, 0.08); /* exact: container shadow */ --shadow-btn: 0 4px 12px rgba(117, 173, 209, 0.30); /* exact: primary button */ --shadow-nav: 0 6px 24px rgba(20, 24, 58, 0.06); /* ---- Layout ---- */ --container: 1200px; --container-wide: 1400px; --gutter: clamp(1rem, 4vw, 2.5rem); /* Shared shell — aligns header + hero + all sections to one grid. 120px gutters at the 1920 design width (120/1920 = 6.25vw). */ --shell-max: 1680px; --shell-pad: clamp(24px, 6.25vw, 120px); } /* RTL adjustments hook (Hebrew pages get dir="rtl" on ) */ [dir="rtl"] { --font-sans: var(--font-heb); }