/* ==========================================================================
   SCT Design Tokens — Colors, Typography, Font Sizes, and Shadows
   Consolidated for easy customization and theme maintenance.
   ========================================================================== */

:root {
    /* ==========================================================================
       1. TYPOGRAPHY & FONT FAMILIES
       ========================================================================== */
    --font-family-base: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-family-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* ==========================================================================
       2. FONT SIZES (Proportional scale referencing the base font-size)
       ========================================================================== */
    --font-size-2xs: 0.675rem;          /* ~9.5px  - Tiny metadata labels, category chips */
    --font-size-xs: 0.72rem;            /* ~10px   - Form hints, subtext, small badges */
    --font-size-compact-sm: 0.775rem;   /* ~11px   - Compact pills, footer meta */
    --font-size-sm: 0.8rem;             /* ~11.2px - Card buttons, delivery days, billing lines */
    --font-size-compact: 0.825rem;      /* ~11.5px - Primary cell data, customer info, card body */
    --font-size-md: 0.85rem;            /* ~12px   - Balance callouts, alert banners, loading text */
    --font-size-base: 0.88rem;          /* ~12.3px - Standard link items, secondary body */
    --font-size-lg: 0.925rem;           /* ~13px   - Prominent customer names, subheadings */
    --font-size-xl: 0.95rem;            /* ~13.3px - Card header titles, section filters */
    --font-size-root: 14px;             /* Standard desktop base font size */
    --font-size-heading-sm: 1.35rem;    /* ~19px   - Small hero brand text */
    --font-size-heading-lg: 1.65rem;    /* ~23px   - Main hero brand text */
    --font-size-watermark: 20px;        /* Prominent watermark font size */

    /* Fixed icon sizes */
    --font-size-icon-xs: 12px;
    --font-size-icon-sm: 16px;
    --font-size-icon-md: 18px;
    --font-size-icon-lg: 24px;

    /* ==========================================================================
       3. BRAND COLOR PALETTE
       ========================================================================== */
    --color-brand-primary: #fc7523;
    --color-brand-primary-light: #fff4ed;
    --color-brand-primary-dark: #e0600e;
    --color-brand-primary-gradient-end: #ff8c42;

    --color-brand-blue: #1151ca;
    --color-brand-blue-light: #eef2fc;
    --color-brand-blue-hover: #1d4ed8;
    --color-brand-blue-link: #0f52ba;
    --color-brand-blue-btn: #1b6ec2;
    --color-brand-blue-btn-border: #1861ac;

    --color-brand-indigo: #6366f1;
    --color-brand-indigo-focus: rgba(99, 102, 241, 0.15);

    /* ==========================================================================
       4. SEMANTIC / STATUS COLORS
       ========================================================================== */
    /* Success / Green */
    --color-success-bg: #f0fdf4;
    --color-success-border: #bbf7d0;
    --color-success-border-soft: #dcfce7;
    --color-success-text: #16a34a;
    --color-success-text-dark: #15803d;
    --color-success-text-deep: #166534;
    --color-success-tag: #2e8b57;
    --color-success-btn: #28a745;
    --color-success-validation: #26b050;

    /* Danger / Red */
    --color-danger-bg: #fef2f2;
    --color-danger-border: #fecaca;
    --color-danger-text: #dc2626;
    --color-danger-text-dark: #b91c1c;
    --color-danger-crimson: #dc143c;
    --color-danger-btn: #dc3545;
    --color-danger-validation: #e50000;

    /* Warning / Amber / Orange */
    --color-warning-bg: #fffbeb;
    --color-warning-border: #fef3c7;
    --color-warning-border-mid: #fde68a;
    --color-warning-text: #b45309;
    --color-warning-text-dark: #92400e;
    --color-warning-amber: #eab308;
    --color-warning-orange: #f97316;
    --color-warning-btn: #ffc107;

    /* Info / Sky Blue */
    --color-info-bg: #e0f2fe;
    --color-info-bg-soft: #eff6ff;
    --color-info-border: #bae6fd;
    --color-info-border-soft: #dbeafe;
    --color-info-text: #0369a1;
    --color-info-text-dark: #1e40af;
    --color-info-btn: #17a2b8;

    /* Purple / Violet */
    --color-purple-bg: #faf5ff;
    --color-purple-bg-soft: #f3e8ff;
    --color-purple-text: #7c3aed;
    --color-purple-text-dark: #6b21a8;

    /* Teal */
    --color-teal-bg: #f0fdfa;
    --color-teal-text: #0d9488;

    /* ==========================================================================
       5. NEUTRAL SURFACES & BACKGROUNDS
       ========================================================================== */
    --color-bg-white: #ffffff;
    --color-bg-surface: #f5f6fa;
    --color-bg-subtle: #f8fafc;
    --color-bg-muted: #f8f9fa;
    --color-bg-secondary: #f1f5f9;
    --color-bg-tertiary: #f3f4f6;
    --color-bg-dark-muted: #cfcfcf;
    --color-bg-warning-toast: #ffffe0;  /* lightyellow */

    /* ==========================================================================
       6. BORDERS & DIVIDERS
       ========================================================================== */
    --color-border-light: #f1f5f9;
    --color-border-subtle: #e2e8f0;
    --color-border-default: #e5e7eb;
    --color-border-grid: #e9ecef;
    --color-border-input: #cbd5e1;
    --color-border-checkbox: #929292;
    --color-border-neutral-dark: #e0e0e0;
    --color-border-divider: #000000;

    /* ==========================================================================
       7. TEXT COLOR PALETTE
       ========================================================================== */
    --color-text-primary: #1a1d23;
    --color-text-heading: #1e293b;
    --color-text-dark: #1f2937;
    --color-text-body: #334155;
    --color-text-secondary: #475569;
    --color-text-subtle: #4b5563;
    --color-text-muted: #64748b;
    --color-text-slate: #6b7280;
    --color-text-disabled: #94a3b8;
    --color-text-hint: #9ca3af;
    --color-text-inverse: #ffffff;
    --color-text-inverse-muted: #fff4ed;

    /* ==========================================================================
       8. DOMAIN SPECIFIC: DIETARY, OIL & SPICE
       ========================================================================== */
    --color-dietary-swaminarayan-bg: #ffe8d2;
    --color-dietary-swaminarayan-border: #ff8a1a;
    --color-dietary-jain-bg: #c4ebff;
    --color-dietary-jain-border: #00a9ff;

    --color-oil-less: #64748b;
    --color-oil-medium: #0f172a;

    --color-spice-mild: #eab308;
    --color-spice-medium: #f97316;
    --color-spice-spicy: #dc2626;

    /* ==========================================================================
       9. SHADOWS & OVERLAYS
       ========================================================================== */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-card: 0 2px 12px rgba(0, 0, 0, 0.07);
    --shadow-card-hover: 0 6px 24px rgba(0, 0, 0, 0.12);
    --shadow-card-hover-sm: 0 4px 12px rgba(0, 0, 0, 0.08);
    --shadow-hero: 0 4px 20px rgba(252, 117, 35, 0.25);
    --shadow-badge: 0 4px 16px rgba(0, 0, 0, 0.15);
    --shadow-banner: 0 -1px 2px rgba(0, 0, 0, 0.2);
    --shadow-text-subtle: 0 2px 4px rgba(0, 0, 0, 0.1);
    --shadow-icon: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));

    /* Layout metrics */
    --card-radius: 14px;
    --header-height: 72px;
    --bottom-nav-height: 64px;
}