/* ============================================================ Курьерс — Design System Tokens Color + Typography foundations ============================================================ */ /* --- Fonts ------------------------------------------------ */ /* Primary: Onest (Google Fonts). Russian-friendly geometric sans, modern, neutral. Used for everything from body to display. */ @import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&display=swap'); :root { /* ============================================================ COLOR SYSTEM Strategy: white base with a single vibrant CTA accent. Brand stays neutral so partner logos (Magnit red, Samokat coral, Kuper green, Yandex yellow, Ozon blue) never clash with the chrome. ============================================================ */ /* --- Surface (white-first agg. feel) ------------------- */ --surface-0: #FFFFFF; /* page background */ --surface-1: #F6F7F9; /* section break / card on white */ --surface-2: #EEF0F3; /* deeper subsection */ --surface-inverse: #0F1419; /* rare dark blocks (footer, hero photo) */ /* --- Foreground / text -------------------------------- */ --fg-1: #0F1419; /* primary text, h1-h3 */ --fg-2: #3D4753; /* body / secondary */ --fg-3: #6B7280; /* meta, captions, disclaimers */ --fg-4: #9CA3AF; /* placeholder, disabled */ --fg-on-accent: #FFFFFF; /* text on coral CTA */ --fg-on-dark: #FFFFFF; --fg-on-dark-muted: #9CA3AF; /* --- Borders ------------------------------------------ */ --border-1: #E5E7EB; /* default card border */ --border-2: #D1D5DB; /* input border */ --border-3: #B4B9C1; /* hover input */ /* --- Accent (single primary CTA color) ---------------- */ --accent: #FF5436; /* coral-orange — primary CTA */ --accent-hover: #E64525; --accent-press: #C7381C; --accent-soft: #FFE9E2; /* tinted bg for badges */ --accent-soft-fg: #C7381C; /* readable text on soft */ /* --- Money / income highlight ------------------------- */ --money: #14B866; /* green for доход / суммы */ --money-soft: #E5F7EE; --money-fg: #0A8B4B; /* --- Status / semantic -------------------------------- */ --info: #2E66E6; /* informational blue */ --info-soft: #E6EDFD; --warn: #F0A800; /* careful — disclaimers */ --warn-soft: #FFF4D6; --danger: #E0334B; --danger-soft: #FCE4E8; --success: var(--money); --success-soft: var(--money-soft); /* --- Brand partner accent strips (used only inside partner cards or partner pages — never as chrome) - */ --brand-magnit: #E4003A; --brand-samokat: #F92F60; --brand-kuper: #00B956; --brand-yandex-eda: #FFCC00; --brand-yandex-d: #FF4433; --brand-ozon: #1E5BFF; --brand-sdek: #00B956; --brand-wb: #CB11AB; /* ============================================================ TYPOGRAPHY SYSTEM One family (Onest), expressive weight + size scale. ============================================================ */ --font-sans: 'Onest', 'Inter', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', 'JetBrains Mono', 'Menlo', monospace; /* Base size scale */ --fs-12: 12px; /* meta, disclaimer */ --fs-13: 13px; /* badge, micro */ --fs-14: 14px; /* small body */ --fs-15: 15px; /* default secondary */ --fs-16: 16px; /* body */ --fs-18: 18px; /* large body / lead */ --fs-20: 20px; /* h5 / large lead */ --fs-24: 24px; /* h4 */ --fs-28: 28px; /* h3 */ --fs-36: 36px; /* h2 */ --fs-48: 48px; /* h1 desktop */ --fs-64: 64px; /* hero display */ --fs-80: 80px; /* mega display (rare) */ /* Line heights */ --lh-tight: 1.05; --lh-snug: 1.15; --lh-normal: 1.35; --lh-relaxed: 1.55; /* Weights */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 800; /* Letter spacing */ --ls-tight: -0.02em; /* display headings */ --ls-snug: -0.01em; /* h3 / h4 */ --ls-normal: 0; --ls-wide: 0.02em; --ls-caps: 0.06em; /* eyebrow / overline */ /* ============================================================ SPACING / RADII / SHADOW ============================================================ */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* Radii — softly rounded, friendly, not pill-everywhere */ --r-xs: 6px; --r-sm: 10px; --r-md: 14px; /* default card */ --r-lg: 20px; /* hero card, big surface */ --r-xl: 28px; --r-pill: 999px; /* Shadows — subtle, never neon. Cards float a few px. */ --shadow-1: 0 1px 2px rgba(15, 20, 25, 0.04), 0 1px 1px rgba(15, 20, 25, 0.03); --shadow-2: 0 4px 12px rgba(15, 20, 25, 0.06), 0 1px 3px rgba(15, 20, 25, 0.04); --shadow-3: 0 12px 28px rgba(15, 20, 25, 0.10), 0 4px 8px rgba(15, 20, 25, 0.05); --shadow-cta: 0 6px 18px rgba(255, 84, 54, 0.32); /* Focus ring (a11y) */ --ring: 0 0 0 3px rgba(255, 84, 54, 0.35); /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in-out: cubic-bezier(0.83, 0, 0.17, 1); --t-fast: 120ms; --t-base: 200ms; --t-slow: 320ms; } /* ============================================================ SEMANTIC TEXT STYLES — use these classes, not raw vars ============================================================ */ body { font-family: var(--font-sans); font-size: var(--fs-16); line-height: var(--lh-relaxed); color: var(--fg-1); background: var(--surface-0); -webkit-font-smoothing: antialiased; font-feature-settings: 'ss01' on, 'cv11' on; } /* Display — hero only */ .ds-display { font-size: clamp(40px, 6vw, var(--fs-64)); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--fw-bold); color: var(--fg-1); } .ds-h1 { font-size: clamp(32px, 4.5vw, var(--fs-48)); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); font-weight: var(--fw-bold); color: var(--fg-1); } .ds-h2 { font-size: clamp(26px, 3.2vw, var(--fs-36)); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); font-weight: var(--fw-bold); color: var(--fg-1); } .ds-h3 { font-size: var(--fs-28); line-height: var(--lh-snug); letter-spacing: var(--ls-snug); font-weight: var(--fw-semibold); color: var(--fg-1); } .ds-h4 { font-size: var(--fs-20); line-height: var(--lh-snug); font-weight: var(--fw-semibold); color: var(--fg-1); } .ds-eyebrow { font-size: var(--fs-13); letter-spacing: var(--ls-caps); text-transform: uppercase; font-weight: var(--fw-semibold); color: var(--accent); } .ds-lead { font-size: var(--fs-18); line-height: var(--lh-relaxed); color: var(--fg-2); font-weight: var(--fw-regular); } .ds-body { font-size: var(--fs-16); line-height: var(--lh-relaxed); color: var(--fg-2); } .ds-small { font-size: var(--fs-14); line-height: var(--lh-relaxed); color: var(--fg-3); } .ds-meta { font-size: var(--fs-12); line-height: var(--lh-normal); color: var(--fg-3); } .ds-money { font-variant-numeric: tabular-nums; font-weight: var(--fw-bold); color: var(--money-fg); } .ds-link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; } .ds-link:hover { color: var(--accent-hover); }