/* ========================================================================= רובוטיקל — Design Tokens (theme.css) Version: 2.0.0 ------------------------------------------------------------------------- Single source of truth. Direction: "שולחן סדנת קרטון שזורם בו חשמל" — a cardboard workshop table with electricity running through it. The palette is sampled from the hero photograph: warm kraft paper, corrugated browns, and the neon LED glow (cyan / violet) of the robots. LIGHT-WARM-FIRST. Neon colors are for glow, borders, pads and chips — text always uses the deep variants (AA on kraft). ========================================================================= */ :root { /* ---- Cardboard world ---------------------------------------------- */ --kraft-rgb: 224 199 155; /* #E0C79B page canvas */ --kraft-2-rgb: 209 180 131; /* #D1B483 raised panel */ --kraft-3-rgb: 193 162 114; /* #C1A272 inset / hover */ --paper-rgb: 248 240 224; /* #F8F0E0 warm-white card face */ --corrug-rgb: 169 137 91; /* #A9895B corrugation flute */ --brown-rgb: 107 82 49; /* #6B5231 deep cardboard / muted text */ --ink-rgb: 56 41 24; /* #382918 primary text (warm ink) */ /* ---- Electricity (from the hero LEDs) ------------------------------ */ --cyan-rgb: 53 214 234; /* #35D6EA glow, pads, traces */ --cyan-deep-rgb: 10 108 126; /* #0A6C7E cyan TEXT on kraft (AA) */ --violet-rgb: 124 92 255; /* #7C5CFF glow, brand accent */ --violet-deep-rgb: 84 54 209; /* #5436D1 violet TEXT on kraft (AA) */ --violet-btn-rgb: 100 66 230; /* #6442E6 button fill + white text */ --lime-rgb: 168 224 74; /* #A8E04A glow (track: young) */ --lime-deep-rgb: 74 116 16; /* #4A7410 lime TEXT on kraft (AA) */ --led-rgb: 226 55 55; /* #E23737 micro:bit LED red */ --gold-rgb: 240 180 30; /* #F0B41E star / highlight */ /* ---- Resolved ------------------------------------------------------ */ --kraft: rgb(var(--kraft-rgb)); --kraft-2: rgb(var(--kraft-2-rgb)); --kraft-3: rgb(var(--kraft-3-rgb)); --paper: rgb(var(--paper-rgb)); --corrug: rgb(var(--corrug-rgb)); --brown: rgb(var(--brown-rgb)); --ink: rgb(var(--ink-rgb)); --cyan: rgb(var(--cyan-rgb)); --cyan-deep:rgb(var(--cyan-deep-rgb)); --violet: rgb(var(--violet-rgb)); --violet-deep: rgb(var(--violet-deep-rgb)); --violet-btn: rgb(var(--violet-btn-rgb)); --lime: rgb(var(--lime-rgb)); --lime-deep:rgb(var(--lime-deep-rgb)); --led: rgb(var(--led-rgb)); --gold: rgb(var(--gold-rgb)); /* ---- Semantic aliases ---------------------------------------------- */ --bg: var(--kraft); --bg-raised: var(--kraft-2); --card: var(--paper); --text: var(--ink); --text-2: rgb(var(--ink-rgb) / 0.8); --text-muted: var(--brown); --accent: var(--violet); --accent-text:var(--violet-deep); --on-accent: #ffffff; --rule: rgb(var(--brown-rgb) / 0.22); --rule-strong:rgb(var(--brown-rgb) / 0.4); --link: var(--cyan-deep); /* ---- Typography ----------------------------------------------------- Display: Secular One — chunky, rounded, unmistakably Hebrew, reads like cardboard letters cut with a knife. Body: Rubik. Data: JetBrains Mono for micro:bit-flavored chips and numbers. */ --font-display: 'Secular One', 'Rubik', system-ui, sans-serif; --font-sans: 'Rubik', -apple-system, 'Segoe UI', sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace; --fs-base: 17px; --lh-base: 1.65; --lh-tight: 1.08; /* ---- Paper grain + faint trace grid -------------------------------- */ --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.42 0 0 0 0 0.32 0 0 0 0 0.19 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); /* ---- Corrugation stripe (exposed cardboard edge) -------------------- */ --flutes: repeating-linear-gradient(90deg, transparent 0 7px, rgb(var(--corrug-rgb) / 0.55) 7px 9px); /* ---- Spacing / layout ----------------------------------------------- */ --space-1: 0.5rem; --space-2: 1rem; --space-3: 1.5rem; --space-4: 2rem; --space-5: 3rem; --space-6: 4.5rem; --space-7: 7rem; --container: 1180px; --container-text: 760px; --gutter: 40px; --gutter-mobile: 20px; --section-y: 104px; /* ---- Radius ---------------------------------------------------------- */ --radius-xs: 6px; --radius-sm: 10px; --radius: 16px; --radius-lg: 22px; --radius-xl: 30px; --radius-pill: 999px; /* ---- Shadows: warm paper depth + "cut edge" + neon glows ------------- */ --shadow-sm: 0 2px 0 rgb(var(--brown-rgb) / 0.18); --shadow: 0 18px 44px -20px rgb(var(--brown-rgb) / 0.55); --shadow-lg: 0 34px 70px -30px rgb(var(--brown-rgb) / 0.6); --cut: 0 4px 0 rgb(var(--brown-rgb) / 0.45); /* cardboard button edge */ --glow-cyan: 0 0 0 2px rgb(var(--cyan-rgb) / 0.55), 0 10px 34px -10px rgb(var(--cyan-rgb) / 0.55); --glow-violet: 0 0 0 2px rgb(var(--violet-rgb) / 0.5), 0 10px 34px -10px rgb(var(--violet-rgb) / 0.6); --glow-lime: 0 0 0 2px rgb(var(--lime-rgb) / 0.6), 0 10px 34px -10px rgb(var(--lime-rgb) / 0.55); /* ---- Motion ----------------------------------------------------------- */ --ease: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 0.18s; --dur: 0.32s; --dur-slow: 0.7s; /* ---- Z ---------------------------------------------------------------- */ --z-nav: 100; --z-progress: 120; --z-modal: 1000; /* ---- Legacy compat aliases for apps/marketing/register.html ------------ The B2B contact form was built against an older token set. Alias so the page reads the kraft palette without touching its inline styles. */ --bg-1: var(--kraft); --bg-2: var(--paper); --text-1: var(--ink); --accent-1: var(--violet); --accent-2: var(--cyan-deep); --accent-3: var(--lime-deep); --border-1: var(--rule); }