/* ============================================================ PWA LAYER — Емигрирай в Австралия Includes base tokens (colors_and_type) inline so only this one file needs to be linked. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&family=Open+Sans:wght@400;600&display=swap'); /* ---------------------------------------------------------- BASE TOKENS (colors, type, spacing, motion, radius) ---------------------------------------------------------- */ :root { /* Brand colours */ --brand-orange: #FF8000; --brand-blue: #0252A3; --brand-green: #01A34F; --danger: #990300; --link: #0252A3; /* Orange palette */ --orange-50: #FFF3E0; --orange-100: #FFE0B2; --orange-300: #FFB74D; --orange-600: #E57200; --orange-700: #BF5E00; /* Green palette */ --green-50: #E8F5E9; --green-100: #C8E6C9; --green-300: #81C784; --green-700: #388E3C; /* Blue palette */ --blue-50: #E3F2FD; --blue-300: #64B5F6; --blue-600: #013D7A; --blue-700: #01317A; /* Misc named colours used in components */ --ink-400: #555555; --cream-50: #FAFAF7; /* Light-mode semantic surface / text / border tokens */ --bg-page: #FAFAF7; --bg-surface: #FFFFFF; --bg-surface-2: #FFFCF7; --bg-inset: #F3EFE6; --fg-primary: #1A1A1A; --fg-secondary: #555555; --fg-tertiary: #888888; --fg-on-brand: #FFFFFF; --fg-inverse: #FAFAF7; --border-subtle: rgba(26, 22, 20, 0.08); --border-default: rgba(26, 22, 20, 0.14); --border-strong: rgba(26, 22, 20, 0.28); --shadow-sm: 0 1px 2px rgba(26,22,20,.04), 0 1px 3px rgba(26,22,20,.06); --shadow-md: 0 4px 12px rgba(26,22,20,.06), 0 12px 32px rgba(26,22,20,.08); --shadow-lg: 0 20px 60px rgba(26,22,20,.18); --shadow-focus: 0 0 0 4px rgba(255, 128, 0, 0.28); /* Typography */ --font-display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif; --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif; --fs-micro: 11px; --fs-caption: 13px; --fs-body-sm: 15px; --fs-body: 17px; --fs-h4: 20px; --fs-h3: 24px; --fs-h2: 28px; --fs-h1: 36px; --lh-snug: 1.2; --lh-normal: 1.4; --lh-relaxed: 1.55; --tracking-caps: 0.08em; --tracking-tight: -0.01em; /* Spacing scale (4 px base) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 24px; --space-6: 32px; --space-7: 40px; --space-8: 48px; --space-9: 64px; /* Border-radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-pill: 999px; /* Motion */ --dur-fast: 120ms; --dur-base: 200ms; --ease-out: cubic-bezier(0.0, 0.0, 0.2, 1); } /* ---------------------------------------------------------- DARK MODE SEMANTIC OVERRIDES Triggers: 1. OS preference → @media (prefers-color-scheme: dark) 2. Manual toggle → / "light" JS toggle pattern at bottom of file. ---------------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { --bg-page: #0D0A08; --bg-surface: #1A1614; --bg-surface-2: #28231F; --bg-inset: #3A3531; --fg-primary: #FFFCF7; --fg-secondary: #EFE3D0; --fg-tertiary: #6E6862; --fg-on-brand: #FFFFFF; --fg-inverse: #1A1614; --border-subtle: rgba(255, 252, 247, 0.08); --border-default: rgba(255, 252, 247, 0.14); --border-strong: rgba(255, 252, 247, 0.30); --shadow-sm: 0 1px 2px rgba(0,0,0,.32), 0 1px 3px rgba(0,0,0,.40); --shadow-md: 0 4px 12px rgba(0,0,0,.40), 0 12px 32px rgba(0,0,0,.48); --shadow-lg: 0 20px 60px rgba(0,0,0,.72); --shadow-focus: 0 0 0 4px rgba(255, 128, 0, 0.36); } } :root[data-theme="dark"] { --bg-page: #0D0A08; --bg-surface: #1A1614; --bg-surface-2: #28231F; --bg-inset: #3A3531; --fg-primary: #FFFCF7; --fg-secondary: #EFE3D0; --fg-tertiary: #6E6862; --fg-on-brand: #FFFFFF; --fg-inverse: #1A1614; --border-subtle: rgba(255, 252, 247, 0.08); --border-default: rgba(255, 252, 247, 0.14); --border-strong: rgba(255, 252, 247, 0.30); --shadow-sm: 0 1px 2px rgba(0,0,0,.32), 0 1px 3px rgba(0,0,0,.40); --shadow-md: 0 4px 12px rgba(0,0,0,.40), 0 12px 32px rgba(0,0,0,.48); --shadow-lg: 0 20px 60px rgba(0,0,0,.72); --shadow-focus: 0 0 0 4px rgba(255, 128, 0, 0.36); } /* Light mode restore — overrides the @media block when user forces light */ :root[data-theme="light"] { --bg-page: #FFF8EF; --bg-surface: #FFFFFF; --bg-surface-2: #FFFCF7; --bg-inset: #FAEFE0; --fg-primary: #1A1614; --fg-secondary: #3A3531; --fg-tertiary: #6E6862; --fg-on-brand: #FFFFFF; --fg-inverse: #FFFCF7; --border-subtle: rgba(26, 22, 20, 0.08); --border-default: rgba(26, 22, 20, 0.14); --border-strong: rgba(26, 22, 20, 0.28); --shadow-sm: 0 1px 2px rgba(26,22,20,.04), 0 1px 3px rgba(26,22,20,.06); --shadow-md: 0 4px 12px rgba(26,22,20,.06), 0 12px 32px rgba(26,22,20,.08); --shadow-lg: 0 20px 60px rgba(26,22,20,.18); --shadow-focus: 0 0 0 4px rgba(255, 128, 0, 0.28); } /* ---------------------------------------------------------- PWA SHELL TOKENS ---------------------------------------------------------- */ :root { --pwa-header-height: 56px; --pwa-header-bg: var(--brand-orange); --pwa-header-fg: #FFFFFF; --pwa-safe-top: env(safe-area-inset-top, 0px); --pwa-safe-bottom: env(safe-area-inset-bottom, 0px); --pwa-safe-left: env(safe-area-inset-left, 0px); --pwa-safe-right: env(safe-area-inset-right, 0px); --pwa-max-width: 640px; --pwa-content-px: var(--space-5); /* 24px */ } /* ---------------------------------------------------------- GLOBAL RESET (PWA-safe) ---------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--bg-page); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; background: var(--bg-page); color: var(--fg-primary); font-family: var(--font-body); font-size: var(--fs-body); line-height: var(--lh-relaxed); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; min-height: 100dvh; text-wrap: pretty; } /* Prevent FOUC: apply stored theme before paint */ /* Add this inline