/* ─── SAVANA BRAND TOKENS — единствен извор на дизajн ───────────────── * Generated 2026-05-20. Per Andrej: „redezajn na websajtot i unificiranje". * * USAGE: * * Existing pages may keep their own styles — these tokens are designed to * be COMPATIBLE: they expose CSS custom properties (--sv-*) that new code * can reference without changing any layout. Pages that opt in to .sv-* * utility classes get the standard brand look. * * ONE-SYSTEM-SOUL rule (13.05): Klaudija = whitelabel = B2B = B2C = * search = chat — sve се faces на еден систем, значи едно бранд облекло. * * MOBILE-FIRST (22.04): every component starts ≤640px-friendly. */ :root { /* ── Brand palette ─────────────────────────────────── */ --sv-brand-50: #e6f1f8; --sv-brand-100: #c2dcec; --sv-brand-200: #9ac6df; --sv-brand-400: #4f93c0; --sv-brand-500: #1f72a8; --sv-brand-600: #155f8e; /* primary */ --sv-brand-700: #0e5f8a; /* dark variant (existing theme-color meta) */ --sv-brand-800: #08456c; --sv-brand-900: #042c4a; --sv-accent-500: #f5a623; /* sun / amber */ --sv-accent-600: #d97706; --sv-success: #16a34a; --sv-warning: #f59e0b; --sv-danger: #dc2626; --sv-info: #0ea5e9; /* ── Surfaces (light theme default) ───────────────── */ --sv-bg: #ffffff; --sv-bg-soft: #f7f9fc; --sv-bg-muted: #eef2f7; --sv-surface: #ffffff; --sv-surface-elevated: #ffffff; --sv-border: #e2e8f0; --sv-border-strong: #cbd5e1; --sv-text: #0f172a; --sv-text-muted: #475569; --sv-text-subtle:#64748b; /* ── Typography ───────────────────────────────────── */ --sv-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --sv-font-heading: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --sv-fs-xs: 12px; --sv-fs-sm: 13px; --sv-fs-base: 14px; --sv-fs-md: 16px; --sv-fs-lg: 18px; --sv-fs-xl: 22px; --sv-fs-2xl: 28px; --sv-fs-3xl: 36px; --sv-fs-4xl: 48px; --sv-lh-tight: 1.2; --sv-lh-base: 1.5; --sv-lh-loose: 1.7; --sv-fw-normal: 400; --sv-fw-medium: 500; --sv-fw-semibold: 600; --sv-fw-bold: 700; /* ── Spacing scale (4-base) ───────────────────────── */ --sv-sp-1: 4px; --sv-sp-2: 8px; --sv-sp-3: 12px; --sv-sp-4: 16px; --sv-sp-5: 20px; --sv-sp-6: 24px; --sv-sp-8: 32px; --sv-sp-10: 40px; --sv-sp-12: 48px; --sv-sp-16: 64px; /* ── Radius ───────────────────────────────────────── */ --sv-r-sm: 4px; --sv-r-md: 8px; --sv-r-lg: 12px; --sv-r-xl: 16px; --sv-r-2xl: 24px; --sv-r-pill: 999px; /* ── Shadows (subtle, layered) ────────────────────── */ --sv-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --sv-shadow-md: 0 4px 12px rgba(15, 23, 42, .08); --sv-shadow-lg: 0 12px 32px rgba(15, 23, 42, .12); --sv-shadow-focus: 0 0 0 3px rgba(31, 114, 168, .25); /* ── Layout ───────────────────────────────────────── */ --sv-max-w: 1200px; --sv-touch: 44px; /* mobile tap-target minimum */ --sv-header-h: 56px; --sv-footer-h: 220px; /* ── Motion ───────────────────────────────────────── */ --sv-ease: cubic-bezier(.4, 0, .2, 1); --sv-dur-fast: 120ms; --sv-dur-base: 200ms; --sv-dur-slow: 320ms; } /* ── Dark theme override ──────────────────────────────── * Pages that use [data-theme="dark"] on get automatic dark surfaces. */ :root[data-theme="dark"] { --sv-bg: #0b1220; --sv-bg-soft: #0f1a2e; --sv-bg-muted: #1a2540; --sv-surface: #131e36; --sv-surface-elevated: #1a2540; --sv-border: #1e2b48; --sv-border-strong: #2c3d63; --sv-text: #e6ecf7; --sv-text-muted: #a3b3cf; --sv-text-subtle:#7c8ba8; --sv-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35); --sv-shadow-md: 0 4px 12px rgba(0, 0, 0, .45); --sv-shadow-lg: 0 12px 32px rgba(0, 0, 0, .55); } /* ── Opt-in utility classes ───────────────────────────── * Pages добиваaт single-class buttons/cards/etc without rewriting CSS. * Безбедни: prefiх `sv-` за да не conflict-уваaт со постоечки. */ .sv-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sv-sp-2); padding: var(--sv-sp-3) var(--sv-sp-5); min-height: var(--sv-touch); font-family: var(--sv-font-body); font-size: var(--sv-fs-base); font-weight: var(--sv-fw-semibold); line-height: 1; border: 1px solid transparent; border-radius: var(--sv-r-md); cursor: pointer; text-decoration: none; transition: background var(--sv-dur-fast) var(--sv-ease), border-color var(--sv-dur-fast) var(--sv-ease), color var(--sv-dur-fast) var(--sv-ease), box-shadow var(--sv-dur-fast) var(--sv-ease); } .sv-btn:focus-visible { outline: none; box-shadow: var(--sv-shadow-focus); } .sv-btn-primary { background: var(--sv-brand-600); color: #fff; } .sv-btn-primary:hover { background: var(--sv-brand-700); } .sv-btn-ghost { background: transparent; color: var(--sv-text); border-color: var(--sv-border); } .sv-btn-ghost:hover { background: var(--sv-bg-muted); border-color: var(--sv-border-strong); } .sv-btn-accent { background: var(--sv-accent-500); color: #2b1d05; } .sv-btn-accent:hover { background: var(--sv-accent-600); color: #fff; } .sv-card { background: var(--sv-surface); border: 1px solid var(--sv-border); border-radius: var(--sv-r-lg); padding: var(--sv-sp-5); box-shadow: var(--sv-shadow-sm); } .sv-card-elevated { box-shadow: var(--sv-shadow-md); } .sv-input { width: 100%; min-height: var(--sv-touch); padding: var(--sv-sp-3) var(--sv-sp-4); font-family: var(--sv-font-body); font-size: var(--sv-fs-md); color: var(--sv-text); background: var(--sv-surface); border: 1px solid var(--sv-border-strong); border-radius: var(--sv-r-md); transition: border-color var(--sv-dur-fast) var(--sv-ease), box-shadow var(--sv-dur-fast) var(--sv-ease); } .sv-input:focus { outline: none; border-color: var(--sv-brand-500); box-shadow: var(--sv-shadow-focus); } .sv-badge { display: inline-flex; align-items: center; gap: var(--sv-sp-1); padding: 3px 10px; font-size: var(--sv-fs-xs); font-weight: var(--sv-fw-semibold); border-radius: var(--sv-r-pill); background: var(--sv-bg-muted); color: var(--sv-text-muted); } .sv-badge-brand { background: var(--sv-brand-100); color: var(--sv-brand-800); } .sv-badge-success { background: #dcfce7; color: #166534; } .sv-badge-warning { background: #fef3c7; color: #92400e; } /* ── Shared site footer ───────────────────────────────── * Injected by /static/shared/unify.js on pages without one. */ .sv-footer { background: var(--sv-bg-soft); border-top: 1px solid var(--sv-border); color: var(--sv-text-muted); font-family: var(--sv-font-body); font-size: var(--sv-fs-sm); margin-top: var(--sv-sp-12); } .sv-footer-inner { max-width: var(--sv-max-w); margin: 0 auto; padding: var(--sv-sp-8) var(--sv-sp-5); display: grid; grid-template-columns: 1fr; gap: var(--sv-sp-6); } @media (min-width: 700px) { .sv-footer-inner { grid-template-columns: 1.4fr repeat(3, 1fr); } } .sv-footer h4 { margin: 0 0 var(--sv-sp-3) 0; font-size: var(--sv-fs-sm); font-weight: var(--sv-fw-semibold); color: var(--sv-text); letter-spacing: .04em; text-transform: uppercase; } .sv-footer ul { list-style: none; margin: 0; padding: 0; } .sv-footer li { margin: 0 0 var(--sv-sp-2) 0; } .sv-footer a { color: var(--sv-text-muted); text-decoration: none; } .sv-footer a:hover { color: var(--sv-brand-600); } .sv-footer-brand-line { display: flex; align-items: center; gap: var(--sv-sp-3); margin-bottom: var(--sv-sp-3); color: var(--sv-text); font-weight: var(--sv-fw-semibold); font-size: var(--sv-fs-md); } .sv-footer-bottom { max-width: var(--sv-max-w); margin: 0 auto; padding: var(--sv-sp-4) var(--sv-sp-5); border-top: 1px solid var(--sv-border); display: flex; flex-wrap: wrap; gap: var(--sv-sp-3); justify-content: space-between; font-size: var(--sv-fs-xs); color: var(--sv-text-subtle); } /* ── Mobile-first responsive helpers ─────────────────── */ .sv-hide-mobile { display: none; } @media (min-width: 700px) { .sv-hide-mobile { display: initial; } .sv-hide-desktop { display: none; } }