/* ============================================ פנקס הקטן — Design Tokens Source: brand/03_color_type_system.md Load this FIRST, before base.css and style.css. These are the canonical design tokens. Use them for ALL new code. Legacy variables in base.css remain for backward compatibility but should be migrated over time. ============================================ */ :root { /* ============================================ COLORS — Ink (text, borders) ============================================ */ --color-ink-900: #1A1814; /* main text on light bg, borders */ --color-ink-700: #3D362C; /* secondary text on light bg */ /* ============================================ COLORS — Paper (cream surfaces, cards) ============================================ */ --color-paper-50: #FBF6E9; /* main card / surface background */ --color-paper-100: #F4ECD8; /* secondary card / hover state */ --color-paper-200: #E9DEC1; /* dividers, subtle borders */ /* ============================================ COLORS — Felt (dark backgrounds, the "table") ============================================ */ --color-felt-900: #0B3D2E; /* main app background */ --color-felt-800: #155442; /* dividers on felt */ --color-felt-700: #1F6B53; /* avatars, subtle accents on felt */ /* ============================================ COLORS — Accent (brand voice, CTAs) ============================================ */ --color-accent-600: #E85D2C; /* primary CTA — the brand's voice */ --color-accent-700: #C84715; /* CTA hover/active */ /* ============================================ COLORS — Gold (achievement only — use sparingly) ============================================ */ --color-gold-500: #C99B3A; /* leader, achievement, streak */ /* ============================================ COLORS — Status (numbers only) ============================================ */ --color-success-600: #3D7A4C; /* profit indicator (+₪) */ --color-danger-700: #9A2A1E; /* loss indicator (-₪) */ /* ============================================ COLORS — Muted (secondary text) ============================================ */ --color-muted-500: #8A8276; /* secondary text on paper */ --color-muted-300: #C8C2B0; /* secondary text on felt */ /* ============================================ P023-UX — derived tokens (contrast-checked, WCAG AA for text) Brand hues unchanged; these are darker/lighter steps of them. ============================================ */ --color-paper-300: #D9CCA8; /* input borders on paper (was referenced, never defined) */ --color-muted-600: #71695D; /* small secondary text on paper: 5.0:1 on paper-50, 4.6:1 on paper-100 */ --color-accent-cta: #C4440F; /* text-bearing CTA fill: paper text 4.65:1 (accent-600 is 3.2:1) */ --color-accent-cta-hover: #A9390B; --color-accent-50: #FCE9DF; /* pending/changed tint behind ink text */ --color-danger-50: #F6E3DF; /* error tint behind danger-700 text */ --color-danger-800: #7A201A; /* danger hover */ --color-success-50: #E7EFE6; --color-felt-100: #DCE9E2; /* light felt tint for tags on paper */ --color-text-2: var(--color-muted-300); /* legacy alias used in templates */ --color-felt-glass: rgba(251, 246, 233, 0.06); /* paper at 6% over felt: quiet control fill */ /* ============================================ TYPOGRAPHY — Families Heebo = body text. Rubik = headlines + logo. Rubik Dirt = decorative stamps ONLY. ============================================ */ --font-body: 'Heebo', system-ui, -apple-system, "Segoe UI", sans-serif; --font-headline: 'Rubik', system-ui, -apple-system, "Segoe UI", sans-serif; --font-logo: 'Rubik', system-ui, -apple-system, "Segoe UI", sans-serif; --font-decor: 'Rubik Dirt', cursive; /* USE SPARINGLY */ /* ============================================ TYPOGRAPHY — Weights 900 (Black) is reserved for the logo ONLY. ============================================ */ --fw-regular: 400; --fw-medium: 500; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* ============================================ TYPOGRAPHY — Type Scale (desktop) Mobile responsive sizes handled in component CSS. ============================================ */ --fs-logo-big: 56px; --fs-logo-topbar: 18px; --fs-h1: 42px; --fs-h2: 28px; --fs-h3: 20px; --fs-kpi: 28px; --fs-body: 16px; --fs-sub: 15px; --fs-small: 13px; --fs-tag: 11px; --fs-sm: 14px; /* legacy alias used in templates */ --fs-xs: 12px; /* legacy alias used in templates */ /* ============================================ TYPOGRAPHY — Line Heights ============================================ */ --lh-tight: 1.1; /* headlines */ --lh-snug: 1.2; /* sub-headlines */ --lh-normal: 1.5; /* body text */ /* ============================================ SPACING — 4px grid ============================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px; /* ============================================ RADII ============================================ */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-pill: 999px; /* ============================================ SHADOWS ============================================ */ --shadow-card: 0 4px 16px rgba(26, 24, 20, 0.20); --shadow-elev: 0 6px 24px rgba(26, 24, 20, 0.32); --shadow-deep: 0 8px 36px rgba(0, 0, 0, 0.45); --shadow-mark: 0 2px 8px rgba(0, 0, 0, 0.35); /* logo / raised round control on felt */ --shadow-fab: 0 4px 12px rgba(0, 0, 0, 0.35); /* centre action in the tab bar */ --shadow-dock: 0 -6px 18px rgba(0, 0, 0, 0.25); /* bottom tab bar lifting off content */ --shadow-sheet: 0 -10px 40px rgba(0, 0, 0, 0.45); /* bottom sheet over content */ /* ============================================ BORDERS ============================================ */ --border-thin: 1px solid var(--color-paper-200); --border-bold: 2px solid var(--color-ink-900); --border-dash: 1px dashed var(--color-paper-200); /* ============================================ Z-INDEX SCALE ============================================ */ --z-base: 0; --z-raised: 10; --z-sticky: 100; --z-modal: 1000; --z-toast: 2000; /* ============================================ TRANSITIONS ============================================ */ --transition-fast: 0.15s ease; --transition-base: 0.25s ease; --transition-slow: 0.4s ease; } /* ============================================ GOOGLE FONTS IMPORT Loaded via @import to ensure availability. In production, prefer in base.html for performance. ============================================ */ @import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;700;900&family=Rubik:wght@400;500;700;800;900&family=Rubik+Dirt&display=swap');