/* =====================================================================
   Scan n Go - Central Theme Tokens (Light Mode)
   ---------------------------------------------------------------------
   SINGLE SOURCE OF TRUTH for colors, surfaces, layout + typography.
   Change a value here once and it updates across the whole panel
   (admin, vendor and auth) because every stylesheet references
   these CSS custom properties via var(--sng-*).

   To re-brand: edit the "Brand / Primary" block below and hard-refresh.
   ===================================================================== */

:root {
    /* ---------- Brand / Primary (logo purple) ---------- */
    --sng-primary: #7b3eff;
    --sng-primary-hover: #6a2fe0;
    --sng-primary-active: #5a25c4;
    --sng-primary-soft: #ede5ff;      /* soft tint for active nav / chips */
    --sng-primary-softer: #f5f0ff;    /* very light tint for hovers */
    --sng-on-primary: #ffffff;        /* text/icon on primary bg */

    /* Secondary accent (kept from existing brand pink) */
    --sng-accent: #fa2cb4;
    --sng-accent-soft: rgba(250, 44, 180, 0.12);

    /* ---------- Surfaces ---------- */
    --sng-bg: #f4f4f8;                /* app / page background */
    --sng-surface: #ffffff;           /* cards, sidebar, navbar, modals */
    --sng-surface-2: #fbfbfe;         /* subtle alternate surface */
    --sng-surface-muted: #f2f3f8;     /* table header / inputs bg */

    /* ---------- Text ---------- */
    --sng-text: #1f2430;             /* primary text (deep charcoal) */
    --sng-text-muted: #6b7280;       /* secondary text */
    --sng-text-subtle: #9aa0b3;      /* placeholders / hints */
    --sng-heading: #14161f;

    /* ---------- Borders / dividers ---------- */
    --sng-border: #e5e7eb;
    --sng-border-strong: #d5d8e0;

    /* ---------- Status ---------- */
    --sng-success: #10b981;
    --sng-success-soft: rgba(16, 185, 129, 0.12);
    --sng-danger: #ef4444;
    --sng-danger-hover: #dc2626;
    --sng-danger-soft: rgba(239, 68, 68, 0.12);
    --sng-warning: #f59e0b;
    --sng-warning-soft: rgba(245, 158, 11, 0.14);
    --sng-info: #3b82f6;
    --sng-info-soft: rgba(59, 130, 246, 0.12);
    --sng-teal: #17c3c3;
    --sng-teal-soft: rgba(23, 195, 195, 0.12);

    /* ---------- Focus ring ---------- */
    --sng-focus-ring: rgba(123, 62, 255, 0.35);

    /* ---------- Layout ---------- */
    --sng-sidebar-width: 230px;
    --sng-page-header-height: 56px;
    --sng-radius-sm: 8px;
    --sng-radius: 12px;
    --sng-radius-lg: 16px;
    --sng-radius-pill: 999px;

    /* ---------- Elevation (soft, premium) ---------- */
    --sng-shadow-xs: 0 1px 2px rgba(20, 22, 31, 0.06);
    --sng-shadow-sm: 0 2px 8px rgba(20, 22, 31, 0.06);
    --sng-shadow: 0 6px 20px rgba(20, 22, 31, 0.08);
    --sng-shadow-lg: 0 14px 40px rgba(20, 22, 31, 0.12);
    --sng-shadow-primary: 0 8px 24px rgba(123, 62, 255, 0.28);

    /* ---------- Gradients (brand atmosphere) ---------- */
    --sng-gradient-primary: linear-gradient(135deg, #7b3eff 0%, #9361ff 100%);
    --sng-gradient-brand: linear-gradient(135deg, #7b3eff 0%, #b06bff 55%, #c15cff 100%);
    --sng-gradient-page: radial-gradient(1200px 600px at 100% -10%, #efeaff 0%, rgba(239, 234, 255, 0) 60%),
        radial-gradient(900px 500px at -10% 110%, #eaf2ff 0%, rgba(234, 242, 255, 0) 55%);

    /* Dashboard KPI — pastel icon accents (white cards) */
    --sng-kpi-icon-users-bg: #ede8ff;
    --sng-kpi-icon-users: #7b3eff;
    --sng-kpi-icon-vendors-bg: #fde8f4;
    --sng-kpi-icon-vendors: #e91e8c;
    --sng-kpi-icon-activity-bg: #d9fafa;
    --sng-kpi-icon-activity: #0e9f9f;
    --sng-kpi-icon-vehicle-bg: #dcf9ec;
    --sng-kpi-icon-vehicle: #0d9f6e;
    --sng-kpi-icon-appversion-bg: #e0edff;
    --sng-kpi-icon-appversion: #3b7bf6;

    /* Sidebar decorative patterns */
    --sng-sidebar-pattern-dots: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='2' cy='2' r='1.25' fill='%237b3eff' fill-opacity='0.07'/%3E%3C/svg%3E");
    --sng-promo-pattern-waves: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='100' viewBox='0 0 240 100'%3E%3Cpath d='M-10 35 C50 5 90 65 140 35 S220 5 250 35' fill='none' stroke='%23ffffff' stroke-opacity='0.14' stroke-width='2'/%3E%3Cpath d='M-10 58 C55 28 95 88 145 58 S225 28 250 58' fill='none' stroke='%23ffffff' stroke-opacity='0.1' stroke-width='2'/%3E%3Cpath d='M-10 80 C60 50 100 100 150 80 S230 50 250 80' fill='none' stroke='%23ffffff' stroke-opacity='0.07' stroke-width='2'/%3E%3C/svg%3E");

    /* ---------- Typography ---------- */
    --sng-font-sans: "Circular Std", "Poppins", "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --sng-font-heading: "Circular Std", "Poppins", "Nunito", sans-serif;

    /* ---------- Transition ---------- */
    --sng-transition: 0.2s ease;
}

/* ---------- Circular Std (self-hosted) ---------- */
@font-face {
    font-family: "Circular Std";
    src: url("../../fonts/circular/CircularStd-Light.otf") format("opentype");
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Circular Std";
    src: url("../../fonts/circular/CircularStd-Book.otf") format("opentype");
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Circular Std";
    src: url("../../fonts/circular/CircularStd-Medium.otf") format("opentype");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Circular Std";
    src: url("../../fonts/circular/CircularStd-Bold.otf") format("opentype");
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Circular Std";
    src: url("../../fonts/circular/CircularStd-Black.otf") format("opentype");
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

html,
body {
    font-family: var(--sng-font-sans);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--sng-font-heading);
}