/* ============================================================
   FRESH FOOD MARKET — Brand Design Tokens
   Swiftly White-Label Grocery Delivery Platform
   ============================================================ */

/* Font Faces */
@font-face {
  font-family: 'Alexandria';
  src: url('../fonts/Alexandria.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Alatsi';
  src: url('../fonts/Alatsi.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── Brand Colors ── */
  --color-primary:        #043F2D;
  --color-primary-light:  #065C42;
  --color-primary-dark:   #032B1F;
  --color-background:     #E9EFE7;
  --color-accent:         #C9F06B;
  --color-accent-hover:   #B8E050;
  --color-accent-dark:    #9BC43A;

  /* ── Semantic Colors ── */
  --color-success:        #22C55E;
  --color-success-light:  #DCFCE7;
  --color-warning:        #F59E0B;
  --color-warning-light:  #FEF3C7;
  --color-error:          #EF4444;
  --color-error-light:    #FEE2E2;
  --color-info:           #3B82F6;
  --color-info-light:     #DBEAFE;

  /* ── Neutral Colors ── */
  --color-white:          #FFFFFF;
  --color-surface:        #FFFFFF;
  --color-surface-hover:  #F5F7F4;
  --color-border:         #D1D9CE;
  --color-border-light:   #E2E8DF;
  --color-divider:        #E9EFE7;

  /* ── Text Colors ── */
  --color-text-primary:   #111827;
  --color-text-secondary: #6B7280;
  --color-text-muted:     #9CA3AF;
  --color-text-disabled:  #C4C9D2;
  --color-text-inverse:   #FFFFFF;
  --color-text-on-accent: #043F2D;
  --color-text-link:      #043F2D;

  /* ── Typography ── */
  --font-heading:         'Alexandria', 'SF Pro Display', 'Roboto', sans-serif;
  --font-body:            'Alatsi', 'SF Pro Text', 'Roboto', sans-serif;

  /* Heading Sizes */
  --text-h1:              28px;
  --text-h2:              24px;
  --text-h3:              20px;
  --text-h4:              18px;

  /* Body Sizes */
  --text-lg:              16px;
  --text-base:            14px;
  --text-sm:              12px;
  --text-xs:              10px;

  /* Line Heights */
  --leading-tight:        1.2;
  --leading-snug:         1.25;
  --leading-normal:       1.35;
  --leading-relaxed:      1.5;

  /* Font Weights */
  --weight-regular:       400;
  --weight-medium:        500;
  --weight-semibold:      600;
  --weight-bold:          700;

  /* Price Sizes */
  --text-price-lg:        24px;
  --text-price-md:        16px;
  --text-price-sm:        14px;

  /* ── Spacing (4px base) ── */
  --space-0:              0px;
  --space-1:              4px;    /* xs */
  --space-2:              8px;    /* sm */
  --space-3:              12px;
  --space-4:              16px;   /* md */
  --space-5:              20px;
  --space-6:              24px;   /* lg */
  --space-8:              32px;   /* xl */
  --space-10:             40px;
  --space-12:             48px;   /* 2xl */
  --space-16:             64px;
  --space-20:             80px;

  /* ── Border Radius ── */
  --radius-none:          0px;
  --radius-sm:            4px;
  --radius-md:            8px;
  --radius-lg:            12px;
  --radius-xl:            16px;
  --radius-2xl:           20px;
  --radius-full:          9999px;

  /* ── Shadows ── */
  --shadow-sm:            0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:            0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg:            0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-xl:            0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-top:           0 -2px 8px rgba(0, 0, 0, 0.06);
  --shadow-bottom-nav:    0 -1px 8px rgba(0, 0, 0, 0.08);

  /* ── Z-Index ── */
  --z-base:               0;
  --z-dropdown:           10;
  --z-sticky:             20;
  --z-overlay:            30;
  --z-modal:              40;
  --z-toast:              50;
  --z-status-bar:         100;

  /* ── Transitions ── */
  --transition-fast:      150ms ease;
  --transition-normal:    250ms ease;
  --transition-slow:      350ms ease;

  /* ── Layout ── */
  --mobile-width:         375px;
  --mobile-content:       343px;    /* 375 - 16*2 */
  --status-bar-height:    44px;
  --header-height:        56px;
  --bottom-nav-height:    56px;
  --tab-bar-height:       48px;
  --bottom-safe:          34px;     /* iPhone home indicator */

  /* Admin Layout */
  --sidebar-width:        260px;
  --sidebar-collapsed:    72px;
  --admin-header-height:  64px;
  --admin-content-max:    1200px;
}