/* ============================================================
   design-tokens.css — FadiDelivery unified design system
   "Bright POS" — modern social/Shopify-inspired identity.
   Token NAMES are preserved for backward-compat; only values
   change. Pages that already reference var(--*) inherit the
   new look automatically.
   ============================================================ */

:root {
  /* ── Brand / Primary ──────────────────────────────────────
     Single electric-indigo primary across the entire app.
     Replaces 8 different module accent colors with one.        */
  --primary:        #2E54FF;   /* deep confident blue — primary CTA, links, active (Muz.li-inspired) */
  --primary-dark:   #1E3FE0;   /* pressed state */
  --primary-light:  rgba(46,84,255,0.10);    /* tinted bg for active/hover */

  /* ── Semantic colors ─────────────────────────────────────── */
  --success:        #00C896;   /* modern teal-green — Save & Collect, ☑ */
  --success-light:  rgba(0,200,150,0.12);
  --warning:        #FFB627;   /* warm amber — pending, draft, hold */
  --warning-light:  rgba(255,182,39,0.15);
  --danger:         #FF4757;   /* coral red — delete, error, on-account flag */
  --danger-light:   rgba(255,71,87,0.10);
  --info:           #54A0FF;   /* sky blue — info banners */
  --info-light:     rgba(84,160,255,0.12);

  /* ── Module accents — ALL collapse to primary indigo ─────
     Module identity now lives in the icon and page title,
     not in the chrome color. This is the core unification.   */
  --accent-gl:      #2E54FF;
  --accent-ar:      #2E54FF;
  --accent-ap:      #2E54FF;
  --accent-is:      #2E54FF;
  --accent-bk:      #2E54FF;
  --accent-hr:      #2E54FF;
  --accent-retail:  #2E54FF;
  --accent-admin:   #2E54FF;

  /* ── Neutral scale (cool gray, slightly bluer than before) ── */
  --gray-50:   #F9FAFB;
  --gray-100:  #F2F4F7;
  --gray-200:  #EAECF0;
  --gray-300:  #D0D5DD;
  --gray-400:  #98A2B3;
  --gray-500:  #667085;
  --gray-600:  #475467;
  --gray-700:  #344054;
  --gray-800:  #1D2939;
  --gray-900:  #101828;

  /* ── Surfaces (light mode) ──────────────────────────────── */
  --bg-page:      #F7F5F0;     /* warm off-white — Al Habra sibling, not sterile */
  --bg-card:      #FFFFFF;     /* card surfaces */
  --bg-secondary: #FFFFFF;     /* alias for bg-card */
  --bg-tertiary:  #F2F4F7;     /* filled inputs, subtle wells */
  --bg-navbar:    #FFFFFF;     /* solid white nav (no frosted glass) */
  --bg-elevated:  #FFFFFF;     /* elevated surfaces */
  --bg-sidebar:   #FFFFFF;
  --border:       #EAECF0;     /* hairline card border */
  --separator:    #F2F4F7;     /* row separator inside cards */

  /* ── Text (light mode) ──────────────────────────────────── */
  --text-primary:    #101828;  /* near-black body text */
  --text-secondary:  #475467;  /* slate label text */
  --text-tertiary:   #98A2B3;  /* placeholders, captions */
  --text-disabled:   #D0D5DD;
  --text-on-primary: #FFFFFF;

  /* ── iOS color aliases — kept for backward compat,
        all remapped to the new "Bright POS" palette ─────── */
  --ios-blue:    #2E54FF;     /* was true iOS blue, now primary indigo */
  --ios-green:   #00C896;
  --ios-red:     #FF4757;
  --ios-orange:  #FFB627;
  --ios-yellow:  #FFCC00;
  --ios-purple:  #2E54FF;     /* collapsed to primary */
  --ios-teal:    #54A0FF;
  --ios-indigo:  #2E54FF;
  --ios-pink:    #FF5C8A;
  --ios-gray:    #98A2B3;

  /* ── Border radius — rounder, more social ───────────────── */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  14px;     /* inputs, small cards */
  --radius-lg:  16px;     /* main cards (Shopify) */
  --radius-xl:  24px;     /* modals, hero panels */
  --radius-full: 9999px;  /* pills, avatars */

  /* ── Shadows — barely there, Muz.li recipe ─────────────────
     The whole app feels lighter when shadows do less work.    */
  --shadow-xs: 0 1px 2px rgba(16,24,40,0.04);
  --shadow-sm: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04);
  --shadow-md: 0 4px 12px rgba(16,24,40,0.08), 0 2px 4px rgba(16,24,40,0.04);
  --shadow-lg: 0 8px 30px rgba(16,24,40,0.12), 0 4px 8px rgba(16,24,40,0.06);

  /* ── Typography ──────────────────────────────────────────── */
  --font:         'Inter', 'Cairo', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Tahoma', sans-serif;
  --font-display: 'Instrument Serif', 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-arabic:  'Cairo', 'Inter', 'Tahoma', 'Segoe UI', sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', 'Fira Code', 'Consolas', monospace;

  /* ── Spacing (8pt grid) ──────────────────────────────────── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ── Transition ──────────────────────────────────────────── */
  --transition: 0.18s cubic-bezier(0.16, 1, 0.3, 1);

  /* ── Badge / status pill colors — light, friendly tints ───── */
  /* Blue — info, primary status */
  --badge-blue-bg:      rgba(46,84,255,0.10);
  --badge-blue-text:    #4F46E5;
  /* Green — active, posted, collected */
  --badge-green-bg:     rgba(0,200,150,0.12);
  --badge-green-text:   #047857;
  /* Emerald — alternate green, posted variant */
  --badge-emerald-bg:   rgba(0,200,150,0.10);
  --badge-emerald-text: #065F46;
  /* Red — deleted, error, inactive */
  --badge-red-bg:       rgba(255,71,87,0.10);
  --badge-red-text:     #B91C1C;
  /* Amber/Yellow — pending, draft, suspended */
  --badge-yellow-bg:    rgba(255,182,39,0.15);
  --badge-yellow-text:  #92400E;
  --badge-yellow-border:rgba(255,182,39,0.35);
  /* Orange text — draft/warning label variant */
  --badge-orange-text:  #B45309;
  /* Pink — vendor / special tag */
  --badge-pink-bg:      rgba(255,92,138,0.12);
  --badge-pink-text:    #BE185D;
  /* Teal — info / inventory variant */
  --badge-teal-bg:      rgba(84,160,255,0.12);
  --badge-teal-text:    #0369A1;
  /* Violet/Purple — HR / special variant */
  --badge-violet-bg:    rgba(46,84,255,0.10);
  --badge-violet-text:  #4338CA;
  /* Emerald light — success backgrounds */
  --badge-emerald-light: rgba(0,200,150,0.20);

  /* ── Semantic text helpers ──────────────────────────────── */
  --warning-text:   #92400E;

  /* ── Special table row backgrounds — subtle washes ──────── */
  --row-deleted-bg:  rgba(255,71,87,0.04);   /* very pale coral */
  --row-opening-bg:  rgba(255,182,39,0.06);  /* very pale amber */
  --row-selected-bg: rgba(46,84,255,0.06);  /* very pale indigo */

  /* ── Entity tag / module pill colors ─────────────────────── */
  /* Now all variations of the same indigo — module identity
     comes from the icon, not the color. */
  --tag-customer-bg:    rgba(46,84,255,0.10);
  --tag-customer-text:  #4F46E5;
  --tag-vendor-bg:      rgba(255,92,138,0.10);
  --tag-vendor-text:    #BE185D;
  --tag-bank-bg:        rgba(0,200,150,0.10);
  --tag-bank-text:      #047857;
  --tag-employee-bg:    rgba(46,84,255,0.10);
  --tag-employee-text:  #4338CA;
  --tag-item-bg:        rgba(255,182,39,0.12);
  --tag-item-text:      #92400E;

  /* ── Action button tints ────────────────────────────────── */
  --btn-view-bg:         rgba(46,84,255,0.10);
  --btn-view-text:       #4F46E5;
  --btn-delete-hover-bg: rgba(255,71,87,0.12);

  /* ── Misc component colors ──────────────────────────────── */
  --rate-indicator:    #FFB627;       /* exchange rate display */
  --card-hover-border: #2E54FF;       /* hover ring on cards */
  --card-selected-bg:  rgba(46,84,255,0.04);
  --loader-start:      #2E54FF;       /* progress bar */
  --loader-end:        #FF5C8A;       /* progress bar */

  /* ── Sidebar panel — clean white default ────────────────── */
  --sb-bg:           #FFFFFF;
  --sb-bg-card:      #F9FAFB;
  --sb-border:       #EAECF0;
  --sb-text:         #475467;
  --sb-text-bright:  #101828;
  --sb-text-muted:   #98A2B3;
  --sb-text-heading: #344054;
  --sb-active:       rgba(46,84,255,0.10);
  --sb-active-text:  #2E54FF;
  --sb-rate:         #FFB627;
  --sb-danger-hover: rgba(255,71,87,0.08);
  --sb-hover:        rgba(16,24,40,0.04);
  --sb-divider:      #F2F4F7;

  /* ── Vibrant palette — secondary highlights only ─────────── */
  --vibrant-coral:   #FF6B6B;
  --vibrant-fuchsia: #FF5C8A;
  --vibrant-lime:    #00C896;
  --vibrant-sky:     #54A0FF;
  --vibrant-amber:   #FFB627;
  --vibrant-mint:    #00C896;

  /* ── Module gradients — ALL collapsed to brand gradient ────
     Single brand gradient used only on hero/nav elements.
     Module-specific gradients no longer differentiate.       */
  --grad-primary: linear-gradient(135deg, #667EEA 0%, #764BA2 100%);
  --grad-gl:      var(--grad-primary);
  --grad-ar:      var(--grad-primary);
  --grad-ap:      var(--grad-primary);
  --grad-is:      var(--grad-primary);
  --grad-bk:      var(--grad-primary);
  --grad-hr:      var(--grad-primary);
  --grad-retail:  var(--grad-primary);
  --grad-admin:   var(--grad-primary);

  /* ── Colored shadows — softer, mostly indigo ────────────── */
  --shadow-blue:    0 4px 14px rgba(46,84,255,0.20);
  --shadow-indigo:  0 4px 14px rgba(46,84,255,0.20);
  --shadow-green:   0 4px 14px rgba(0,200,150,0.20);
  --shadow-red:     0 4px 14px rgba(255,71,87,0.20);
  --shadow-orange:  0 4px 14px rgba(255,182,39,0.20);
  --shadow-purple:  0 4px 14px rgba(46,84,255,0.20);
  --shadow-pink:    0 4px 14px rgba(255,92,138,0.20);

  /* ── Hover & interaction states ──────────────────────────── */
  --hover-lift:   translateY(-1px);
  --press-scale:  scale(0.97);

  /* ── Gradient overlays — neutralized to solid for modern flat look ─ */
  --grad-success: linear-gradient(135deg, #00C896 0%, #00B383 100%);
  --grad-danger:  linear-gradient(135deg, #FF4757 0%, #E63E4D 100%);
  --grad-warning: linear-gradient(135deg, #FFB627 0%, #F59E0B 100%);

  /* ── Glassmorphism (kept but rarely used) ────────────────── */
  --glass-bg:     rgba(255,255,255,0.80);
  --glass-border: rgba(255,255,255,0.40);

  /* ── Effect tokens (zeroed — clean modern look) ──────────── */
  --glow-blue:      0 0 0 transparent;
  --glow-indigo:    0 0 0 transparent;
  --glow-green:     0 0 0 transparent;
  --glow-red:       0 0 0 transparent;
  --glass-blur:     blur(12px) saturate(180%);
}

/* ── Dark mode overrides ───────────────────────────────────── */
[data-theme="dark"] {
  --bg-page:      #12100D;     /* warm near-black (matches warm light bg) */
  --bg-card:      #1A1814;     /* slightly lifted warm card */
  --bg-secondary: #1A1814;
  --bg-tertiary:  #24221E;     /* input fill */
  --bg-navbar:    #12100D;
  --bg-elevated:  #24221E;
  --bg-sidebar:   #12100D;
  --sb-bg:           #12100D;
  --sb-bg-card:      #1A1814;
  --sb-border:       #24221E;
  --sb-text:         #98A2B3;
  --sb-text-bright:  #F2F4F7;
  --sb-text-muted:   #667085;
  --sb-text-heading: #D0D5DD;
  --sb-active:       rgba(46,84,255,0.18);
  --sb-active-text:  #8B96FF;
  --sb-hover:        rgba(255,255,255,0.04);
  --sb-divider:      #1F2532;
  --sb-danger-hover: rgba(255,71,87,0.12);
  --border:          #1F2532;
  --separator:       #161B26;

  --text-primary:   #F2F4F7;
  --text-secondary: #D0D5DD;
  --text-tertiary:  #98A2B3;
  --text-disabled:  #475467;

  --gray-50:   #161B26;
  --gray-100:  #1F2532;
  --gray-200:  #2A3140;
  --gray-300:  #3D4757;
  --gray-400:  #667085;
  --gray-500:  #98A2B3;
  --gray-600:  #D0D5DD;
  --gray-700:  #EAECF0;
  --gray-800:  #F2F4F7;
  --gray-900:  #FFFFFF;

  --shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.40);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.50);
  --shadow-lg: 0 12px 24px rgba(0,0,0,0.60);

  /* Badge tints — dark mode */
  --badge-blue-bg:      rgba(46,84,255,0.18);
  --badge-blue-text:    #A5B4FC;
  --badge-green-bg:     rgba(0,200,150,0.18);
  --badge-green-text:   #6EE7B7;
  --badge-emerald-bg:   rgba(0,200,150,0.15);
  --badge-emerald-text: #A7F3D0;
  --badge-red-bg:       rgba(255,71,87,0.18);
  --badge-red-text:     #FCA5A5;
  --badge-yellow-bg:    rgba(255,182,39,0.18);
  --badge-yellow-text:  #FCD34D;
  --badge-yellow-border:rgba(255,182,39,0.30);
  --badge-orange-text:  #FBBF24;
  --badge-pink-bg:      rgba(255,92,138,0.18);
  --badge-pink-text:    #F9A8D4;
  --badge-teal-bg:      rgba(84,160,255,0.18);
  --badge-teal-text:    #93C5FD;
  --badge-violet-bg:    rgba(46,84,255,0.18);
  --badge-violet-text:  #C7D2FE;
  --badge-emerald-light: rgba(0,200,150,0.25);

  /* Tag colors — dark mode */
  --tag-customer-bg:   rgba(46,84,255,0.18);
  --tag-customer-text: #A5B4FC;
  --tag-vendor-bg:     rgba(255,92,138,0.18);
  --tag-vendor-text:   #F9A8D4;
  --tag-bank-bg:       rgba(0,200,150,0.18);
  --tag-bank-text:     #6EE7B7;
  --tag-employee-bg:   rgba(46,84,255,0.18);
  --tag-employee-text: #C7D2FE;
  --tag-item-bg:       rgba(255,182,39,0.18);
  --tag-item-text:     #FCD34D;

  --row-deleted-bg:    rgba(255,71,87,0.06);
  --row-opening-bg:    rgba(255,182,39,0.08);
  --row-selected-bg:   rgba(46,84,255,0.08);
  --btn-view-bg:       rgba(46,84,255,0.18);
  --btn-view-text:     #A5B4FC;
  --btn-delete-hover-bg: rgba(255,71,87,0.18);
  --card-hover-border: #2E54FF;
  --card-selected-bg:  rgba(46,84,255,0.06);

  --glass-bg:     rgba(22,27,38,0.85);
  --glass-border: rgba(255,255,255,0.08);
}

/* Auto dark mode — respects OS preference when no [data-theme] is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-page:      #0B0F19;
    --bg-card:      #161B26;
    --bg-secondary: #161B26;
    --bg-tertiary:  #1F2532;
    --bg-navbar:    #0B0F19;
    --bg-elevated:  #1F2532;
    --bg-sidebar:   #0B0F19;
    --border:       #1F2532;
    --separator:    #161B26;

    --text-primary:   #F2F4F7;
    --text-secondary: #D0D5DD;
    --text-tertiary:  #98A2B3;
    --text-disabled:  #475467;

    --gray-50:   #161B26;
    --gray-100:  #1F2532;
    --gray-200:  #2A3140;
    --gray-300:  #3D4757;
    --gray-400:  #667085;
    --gray-500:  #98A2B3;
    --gray-600:  #D0D5DD;
    --gray-700:  #EAECF0;
    --gray-800:  #F2F4F7;
    --gray-900:  #FFFFFF;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.30);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.40);
    --shadow-md: 0 4px 12px rgba(0,0,0,0.50);
    --shadow-lg: 0 12px 24px rgba(0,0,0,0.60);

    --sb-bg:           #0B0F19;
    --sb-bg-card:      #161B26;
    --sb-border:       #1F2532;
    --sb-text:         #98A2B3;
    --sb-text-bright:  #F2F4F7;
    --sb-text-muted:   #667085;
    --sb-text-heading: #D0D5DD;
    --sb-active:       rgba(46,84,255,0.18);
    --sb-active-text:  #8B96FF;
    --sb-hover:        rgba(255,255,255,0.04);
    --sb-divider:      #1F2532;
    --sb-danger-hover: rgba(255,71,87,0.12);

    --badge-blue-bg:      rgba(46,84,255,0.18);
    --badge-blue-text:    #A5B4FC;
    --badge-green-bg:     rgba(0,200,150,0.18);
    --badge-green-text:   #6EE7B7;
    --badge-emerald-bg:   rgba(0,200,150,0.15);
    --badge-emerald-text: #A7F3D0;
    --badge-red-bg:       rgba(255,71,87,0.18);
    --badge-red-text:     #FCA5A5;
    --badge-yellow-bg:    rgba(255,182,39,0.18);
    --badge-yellow-text:  #FCD34D;
    --badge-yellow-border:rgba(255,182,39,0.30);
    --badge-orange-text:  #FBBF24;
    --badge-pink-bg:      rgba(255,92,138,0.18);
    --badge-pink-text:    #F9A8D4;
    --badge-teal-bg:      rgba(84,160,255,0.18);
    --badge-teal-text:    #93C5FD;
    --badge-violet-bg:    rgba(46,84,255,0.18);
    --badge-violet-text:  #C7D2FE;
    --badge-emerald-light: rgba(0,200,150,0.25);
    --tag-customer-bg:   rgba(46,84,255,0.18);
    --tag-customer-text: #A5B4FC;
    --tag-vendor-bg:     rgba(255,92,138,0.18);
    --tag-vendor-text:   #F9A8D4;
    --tag-bank-bg:       rgba(0,200,150,0.18);
    --tag-bank-text:     #6EE7B7;
    --tag-employee-bg:   rgba(46,84,255,0.18);
    --tag-employee-text: #C7D2FE;
    --tag-item-bg:       rgba(255,182,39,0.18);
    --tag-item-text:     #FCD34D;
    --row-deleted-bg:    rgba(255,71,87,0.06);
    --row-opening-bg:    rgba(255,182,39,0.08);
    --row-selected-bg:   rgba(46,84,255,0.08);
    --btn-view-bg:       rgba(46,84,255,0.18);
    --btn-view-text:     #A5B4FC;
    --btn-delete-hover-bg: rgba(255,71,87,0.18);
    --card-hover-border: #2E54FF;
    --card-selected-bg:  rgba(46,84,255,0.06);

    --glass-bg:     rgba(22,27,38,0.85);
    --glass-border: rgba(255,255,255,0.08);
  }
}

/* ── Font imports ────────────────────────────────────────────
   Inter — UI / body
   Cairo — Arabic body
   Instrument Serif — display hero only (single weight + italic)
   Loaded once globally; pages inherit via var(--font) / var(--font-display).
*/
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Cairo:wght@400;500;600;700&family=Instrument+Serif:ital@0;1&display=swap');