/**
 * Safar On — official brand design tokens
 * Single source of truth for colors, type, spacing, radius, and shadows.
 */
:root {
    /* Brand colors */
    --sf-brand-navy: #005a8d;
    --sf-brand-navy-hover: #004670;
    --sf-brand-navy-dark: #003d5c;
    --sf-brand-sky: #add2e4;
    --sf-brand-sky-dark: #7ab8d4;
    --sf-brand-sky-light: #d6edf6;
    --sf-brand-sky-bg: #f6f9ff;
    --sf-brand-accent: #fcd34d;

    /* Semantic aliases (used across public CSS) */
    --sf-primary: var(--sf-brand-navy);
    --sf-primary-hover: var(--sf-brand-navy-hover);
    --sf-navy: var(--sf-brand-navy);
    --sf-accent: var(--sf-brand-accent);

    /* Text */
    --sf-text: #0f172a;
    --sf-text-heading: #0f172a;
    --sf-text-muted: #64748b;
    --sf-text-subtle: #94a3b8;

    /* Surfaces */
    --sf-bg: #ffffff;
    --sf-bg-alt: #f8fafc;
    --sf-page-bg: #f6f9ff;
    --sf-border: #e2e8f0;
    --sf-border-strong: #cbd5e1;

    /* Typography */
    --sf-font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
    --sf-font-display: 'Urbanist', 'Inter', ui-sans-serif, system-ui, sans-serif;

    /* Layout */
    --sf-layout-max: 1186px;
    --sf-section-y: clamp(4rem, 8vw, 6.25rem);
    --sf-container-x: 1rem;

    /* Radius */
    --sf-radius-sm: 8px;
    --sf-radius-md: 12px;
    --sf-radius-lg: 20px;
    --sf-radius-xl: 40px;
    --sf-radius-pill: 999px;

    /* Shadows */
    --sf-shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06);
    --sf-shadow-md: 0 10px 24px rgba(15, 23, 42, 0.08);
    --sf-shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.06);
    --sf-shadow-brand: 0 10px 28px rgba(0, 90, 141, 0.22);

    /* Focus ring */
    --sf-focus-ring: 0 0 0 3px rgba(0, 90, 141, 0.28);

    /* Legacy aliases (stories carousel, etc.) */
    --sf-stories-bg: var(--sf-brand-sky-bg);
    --sf-stories-card-w: clamp(300px, 28.5vw, 350px);
    --sf-stories-card-radius: 26px;
    --sf-stories-slide-gap: 22px;
    --sf-stories-overlay-pad: 20px;
    --sf-stories-loc-size: 13px;
    --sf-stories-headline-size: clamp(17px, 1.9vw, 19px);
    --sf-stories-loc-to-head: 8px;
    --sf-radius-lg-legacy: 40px;
    --sf-radius-xl-legacy: 60px;
    --sf-shadow: var(--sf-shadow-lg);
}