/* ============================================================ design-system.css — Sylheti Shadi Design Tokens This file defines the design system as CSS custom properties (variables). It contains NO selectors that style elements, so it's safe to include on any page without visual changes. Usage: Include once via head.php, then reference variables from components.css and page-specific CSS: color: var(--color-green); padding: var(--space-4); font-family: var(--font-bengali); Scope: Phase 1 = tokens only. Font imports and component styles come later. ============================================================ */ :root { /* --------------------------------------------- COLORS — brand palette Core values from MASTER_PLAN.md; variants (dark/light) added for hover states and subtle backgrounds. --------------------------------------------- */ /* Brand greens updated to match legacy live-site values during Phase 3 polish — deeper, richer feel. All three tokens shifted together as a coherent family so dark < base < light hierarchy holds (preserves the .btn-primary:hover behaviour). Originated from legacy 596035f tokens --deep-green (#0A3D2E) and --green-mid (#14654D); the dark variant is a step further down the lightness scale. */ --color-green: #0A3D2E; /* Primary brand green — main CTAs, links */ --color-green-dark: #062B20; /* Darker — hover state for green buttons */ --color-green-light: #14654D; /* Lighter — subtle highlights, hover bg */ --color-gold: #c9a961; /* Accent gold — secondary CTAs, highlights */ --color-gold-dark: #a88943; /* Darker — hover state for gold buttons */ --color-gold-light: #e8d48b; /* Pale gold — text on dark green surfaces (e.g. numbered circles in How It Works) */ --color-coral: #e85a5a; /* Warm romance accent — heart icon, marriage/love cues */ --color-coral-dark: #c44545; /* Darker — hover state for coral elements */ /* --------------------------------------------- COLORS — surfaces (backgrounds) --------------------------------------------- */ --color-cream: #faf7f2; /* Soft cream — default page background */ --color-cream-dark: #f2ede3; /* Slightly deeper — cards on cream pages */ --color-white: #ffffff; /* Pure white — cards, modals */ --color-bg-muted: #f9fafb; /* Neutral gray-white — alternating sections */ /* --------------------------------------------- COLORS — text --------------------------------------------- */ --color-text: #1a1a1a; /* Primary body text */ --color-text-mid: #4a4a4a; /* Confident body copy on cream cards (CTA subtitle, story quotes) */ --color-text-muted: #6b7280; /* Secondary text, captions, helper text */ --color-text-light: #9ca3af; /* Disabled text, placeholders */ --color-text-on-dark: #ffffff; /* Text on green/gold backgrounds */ /* --------------------------------------------- COLORS — state / feedback --------------------------------------------- */ --color-success: #10b981; /* Success messages, "verified" badges */ --color-error: #dc2626; /* Error messages, destructive actions */ --color-warning: #f59e0b; /* Yellow banners (e.g. "verify email") */ --color-info: #3b82f6; /* Informational banners */ /* --------------------------------------------- COLORS — borders --------------------------------------------- */ --color-border: #e5e7eb; /* Subtle borders on inputs, cards */ --color-border-strong: #d1d5db; /* Stronger borders for emphasis */ /* --------------------------------------------- TYPOGRAPHY — font families (Font files loaded in head.php during Phase 3. These variables just name which font to use.) --------------------------------------------- */ --font-bengali: 'Noto Sans Bengali', sans-serif; /* Default site font */ --font-body: 'Inter', 'Hind Siliguri', system-ui, sans-serif; /* English body text */ --font-heading: 'Playfair Display', 'Hind Siliguri', serif; /* Decorative headings */ --font-mono: 'SF Mono', 'Monaco', 'Courier New', monospace; /* Profile IDs, code */ /* --------------------------------------------- TYPOGRAPHY — font sizes (modular scale) rem units scale with user's browser font-size preference (accessibility). --------------------------------------------- */ --text-xs: 0.75rem; /* 12px — small labels, fine print */ --text-sm: 0.875rem; /* 14px — captions, helper text */ --text-base: 1rem; /* 16px — body text (baseline) */ --text-lg: 1.125rem; /* 18px — emphasized body */ --text-xl: 1.25rem; /* 20px — small headings */ --text-2xl: 1.5rem; /* 24px — section headings */ --text-3xl: 1.875rem; /* 30px — page headings */ --text-4xl: 2.25rem; /* 36px — hero headings */ --text-5xl: 3rem; /* 48px — display text */ /* --------------------------------------------- TYPOGRAPHY — line heights --------------------------------------------- */ --leading-tight: 1.25; /* Headings */ --leading-normal: 1.5; /* Body text */ --leading-relaxed: 1.75; /* Long-form reading */ /* --------------------------------------------- TYPOGRAPHY — font weights --------------------------------------------- */ --weight-normal: 400; --weight-medium: 500; --weight-semibold: 600; --weight-bold: 700; /* --------------------------------------------- SPACING — 8px base scale (from MASTER_PLAN.md) Use var(--space-*) for margins, padding, gaps. --------------------------------------------- */ --space-1: 0.25rem; /* 4px — tight inline gaps (icon+text) */ --space-2: 0.5rem; /* 8px — base unit */ --space-3: 0.75rem; /* 12px — tight spacing */ --space-4: 1rem; /* 16px — default padding */ --space-5: 1.5rem; /* 24px — comfortable padding */ --space-6: 2rem; /* 32px — section spacing */ --space-8: 3rem; /* 48px — large section spacing */ --space-10: 4rem; /* 64px — hero padding */ --space-12: 6rem; /* 96px — major section separators */ /* --------------------------------------------- BORDER RADIUS (from MASTER_PLAN.md) --------------------------------------------- */ --radius-sm: 4px; /* Small inputs, chips */ --radius-md: 8px; /* Buttons, cards (default) */ --radius-lg: 16px; /* Large cards, modals */ --radius-pill: 9999px; /* Pills, round CTA buttons */ /* --------------------------------------------- SHADOWS — soft & elegant (not harsh) Tinted slightly with the dark text color for warmth. --------------------------------------------- */ --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.05); /* Subtle — inputs */ --shadow-md: 0 4px 12px rgba(26, 26, 26, 0.08); /* Default — cards */ --shadow-lg: 0 12px 32px rgba(26, 26, 26, 0.12); /* Elevated — modals, hero */ --shadow-focus: 0 0 0 3px rgba(26, 93, 58, 0.15); /* Focus rings (green tint) */ /* --------------------------------------------- Z-INDEX — layering scale Use these instead of random numbers like 999999. --------------------------------------------- */ --z-base: 1; --z-dropdown: 100; --z-sticky: 200; /* Fixed bottom nav */ --z-fixed-header: 300; /* Fixed top menu (sits above bottom nav) */ --z-modal-backdrop: 900; --z-modal: 1000; --z-toast: 1100; /* Toast notifications sit above modals */ /* --------------------------------------------- TRANSITIONS — consistent animation timing Use these instead of hand-rolled durations per-component. --------------------------------------------- */ --transition-fast: 150ms ease; /* Quick hovers, button presses */ --transition-base: 250ms ease; /* Default — most transitions */ --transition-slow: 400ms ease; /* Deliberate — menu slide, page fades */ } /* ============================================================ BREAKPOINTS — REFERENCE ONLY (CSS vars can't be used in @media) Mobile: 375px – 767px (primary design target — iPhone SE width) Tablet: 768px – 1023px Desktop: 1024px+ Use in media queries like: @media (min-width: 768px) { ... } // tablet up @media (min-width: 1024px) { ... } // desktop up ============================================================ */