/**
 * ==============================================================================
 * SANAD FOOD - CENTRALIZED DESIGN TOKENS (v2.2.0)
 * نظام متغيرات الهوية والتصميم الموحد لمنظومة سند فود السحابية
 * Single Source of Truth for Brand Colors, Spacing, Typography & Radii
 * ==============================================================================
 */

:root {
    /* -------------------------------------------------------------------------
       1. BRAND PALETTE (الهوية المؤسسية المعتمدة)
       ------------------------------------------------------------------------- */
    /* Deep Navy Spectrum */
    --sf-navy-950: #04111D;  /* Deepest Navy - Shell, Footers, Command Center */
    --sf-navy-900: #071A2B;  /* Primary Core Navy - Brand Anchors, Topbars */
    --sf-navy-800: #0B2742;  /* Secondary Navy - Gradients, Elevated Containers */
    --sf-navy-700: #13385F;  /* Hover & Active Navy States */
    --sf-navy-600: #1C4D7F;  /* Sub-borders & Dividers on Dark */
    --sf-navy-500: #2765A3;

    /* Royal Champagne Gold Accents (Selective High-Value Accents) */
    --sf-gold-600: #A8831A;
    --sf-gold-500: #C9A227;  /* Primary Brand Gold - CTAs, Badges, Highlights */
    --sf-gold-400: #E0C267;  /* Light Gold - Sub-borders, Active Tab Indicator */
    --sf-gold-300: #EAD48E;
    --sf-gold-100: #F5EDCF;  /* Soft Gold - Badge Tints, Subtle Fills */
    --sf-gold-50:  #FAF6EA;  /* Warm Light Surface Tint */

    /* -------------------------------------------------------------------------
       2. SURFACE & BACKGROUND ARCHITECTURE (المساحات والأسطح)
       ------------------------------------------------------------------------- */
    --sf-bg:             #F6F8FB; /* Crisp Light Neutral Canvas */
    --sf-canvas:         #F6F8FB; /* Primary Canvas Alias */
    --sf-surface:        #FFFFFF; /* Pure White Card Surfaces */
    --sf-surface-alt:    #F0F2F5; /* Neutral Interactive Surfaces (hover rows, pill bg) */
    --sf-surface-subtle: #F8FAFC; /* Subtle Alternate Row Background */
    --sf-surface-dark:   #04111D; /* Dark Mode / Terminal Card Background */

    /* -------------------------------------------------------------------------
       3. HIGH-CONTRAST TYPOGRAPHY COLORS (ألوان النصوص والتباين)
       ------------------------------------------------------------------------- */
    --sf-text:           #101828; /* Primary Black / Highest Legibility */
    --sf-text-primary:   #101828; /* Primary Text Alias */
    --sf-text-secondary: #475467; /* Refined Body & Descriptive Copy */
    --sf-muted:          #667085; /* Captions, Table Footers, Metadata */
    --sf-text-muted:     #667085; /* Text Muted Alias */
    --sf-text-inverse:   #FFFFFF; /* White Text on Dark Navy Surfaces */
    --sf-text-gold:      #C9A227; /* Emphasized Brand Text */

    /* -------------------------------------------------------------------------
       4. CRISP SYSTEM BORDERS (الحدود والفواصل)
       ------------------------------------------------------------------------- */
    --sf-border:         #E4E7EC; /* Standard 1px Clean Border */
    --sf-border-light:   #F2F4F7; /* Subtle Divider */
    --sf-border-dark:    rgba(255, 255, 255, 0.08); /* Dark Shell Border */
    --sf-border-gold:    rgba(201, 162, 39, 0.35); /* Gold Accent Border */

    /* -------------------------------------------------------------------------
       5. OPERATIONAL & SEMANTIC STATUS SIGNALS (حالات التشغيل والعمليات)
       ------------------------------------------------------------------------- */
    --sf-success:        #12B76A; /* Active, Paid, Connected, In-Stock */
    --sf-success-bg:     #ECFDF3;
    --sf-success-border: #A6F4C5;

    --sf-warning:        #F79009; /* Preparing, Due Soon, Low Stock, KDS Alert */
    --sf-warning-bg:     #FFFAEB;
    --sf-warning-border: #FEDF89;

    --sf-error:          #D92D20; /* Overdue, Void, Cancelled, Expired */
    --sf-error-bg:       #FEF3F2;
    --sf-error-border:   #FECDCA;

    --sf-info:           #2E90FA; /* New Orders, Syncing, In-Progress */
    --sf-info-bg:        #EFF8FF;
    --sf-info-border:    #B2DDFF;

    /* -------------------------------------------------------------------------
       6. SPACING SCALE (شبكة المسافات القياسية المتناسقة)
       ------------------------------------------------------------------------- */
    --sf-space-1:  4px;
    --sf-space-2:  8px;
    --sf-space-3:  12px;
    --sf-space-4:  16px;
    --sf-space-5:  20px;
    --sf-space-6:  24px;
    --sf-space-8:  32px;
    --sf-space-10: 40px;
    --sf-space-12: 48px;
    --sf-space-16: 64px;

    /* -------------------------------------------------------------------------
       7. TYPOGRAPHY & FONT HIERARCHY (الخطوط والأوزان)
       ------------------------------------------------------------------------- */
    --sf-font-family: 'Cairo', system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --sf-font-mono:   SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

    /* Weights */
    --sf-fw-regular:   400;
    --sf-fw-medium:    500;
    --sf-fw-semibold:  600;
    --sf-fw-bold:      700;
    --sf-fw-extrabold: 800;

    /* Management Scale (Compact & Dense) */
    --sf-fs-xs:   11px;
    --sf-fs-sm:   12.5px;
    --sf-fs-base: 14px;
    --sf-fs-md:   15.5px;
    --sf-fs-lg:   18px;
    --sf-fs-xl:   22px;
    --sf-fs-2xl:  28px;
    --sf-fs-3xl:  36px;

    /* Operational Scale (Large & Touch-Optimized for POS / KDS) */
    --sf-touch-fs-sm:   13px;
    --sf-touch-fs-base: 15px;
    --sf-touch-fs-lg:   18px;
    --sf-touch-fs-xl:   22px;
    --sf-touch-fs-2xl:  28px;
    --sf-touch-fs-3xl:  36px;
    --sf-touch-fs-4xl:  48px;

    /* Line Heights */
    --sf-lh-tight:  1.25;
    --sf-lh-normal: 1.5;
    --sf-lh-relaxed:1.75;

    /* -------------------------------------------------------------------------
       8. CORNER RADII (انحناءات الحواف المتناسقة)
       ------------------------------------------------------------------------- */
    --sf-radius-xs:   6px;
    --sf-radius-sm:   10px;
    --sf-radius-md:   14px;
    --sf-radius-card: 16px;
    --sf-radius-lg:   20px;
    --sf-radius-xl:   26px;
    --sf-radius-pill: 999px;

    /* -------------------------------------------------------------------------
       9. ELEVATION & SHADOW ARCHITECTURE (الظلال والعمق دون بهتان)
       ------------------------------------------------------------------------- */
    --sf-shadow-xs:       0 1px 2px rgba(16, 24, 40, 0.05);
    --sf-shadow-sm:       0 2px 8px rgba(16, 24, 40, 0.04);
    --sf-shadow-card:     0 4px 16px rgba(16, 24, 40, 0.05);
    --sf-shadow-hover:    0 10px 30px rgba(16, 24, 40, 0.08);
    --sf-shadow-elevated: 0 16px 48px rgba(16, 24, 40, 0.12);
    --sf-shadow-modal:    0 24px 64px rgba(4, 17, 29, 0.35);
    --sf-shadow-gold:     0 6px 20px rgba(201, 162, 39, 0.28);
    --sf-shadow-navy:     0 12px 36px rgba(4, 17, 29, 0.35);

    /* -------------------------------------------------------------------------
       10. TRANSITIONS & KINETIC TIMINGS (الحركة والانتقال السلس)
       ------------------------------------------------------------------------- */
    --sf-transition-fast: 160ms cubic-bezier(0.16, 1, 0.3, 1);
    --sf-transition:      240ms cubic-bezier(0.16, 1, 0.3, 1);
    --sf-transition-slow: 360ms cubic-bezier(0.16, 1, 0.3, 1);
}