/* Aly Market — Shared Design Tokens
 *
 * Single source of truth for color/space/radius/shadow across the
 * customer storefront (aly-market-fe), staff portal (aly-staff-fe),
 * analytics dashboard (aly-dashboard-fe), AI product creator,
 * and vendor portal.
 *
 * Flutter port: each --aly-* var maps 1:1 to ThemeData / ColorScheme.
 * Keep this file the SAME across projects (don't fork the values).
 */

:root {
  /* Brand */
  --aly-red:       #E8341C;
  --aly-red-light: #FF5C3E;
  --aly-red-soft:  #FEE9E5;
  --aly-gold:      #F5A623;
  --aly-green:     #1DB87A;
  --aly-green-soft:#E8FBF3;
  --aly-blue:      #2563EB;
  --aly-blue-soft: #EFF6FF;
  --aly-purple:    #7C3AED;
  --aly-purple-soft:#F3EEFF;

  /* Surfaces */
  --aly-bg:        #F7F7F5;
  --aly-card:      #FFFFFF;
  --aly-elev:      #FFFFFF;
  --aly-line:      #EBEBEB;
  --aly-line-soft: #F2F2F0;

  /* Ink */
  --aly-ink:       #0E0E0E;
  --aly-ink-2:     #3A3A3A;
  --aly-muted:     #8C8C8C;
  --aly-light:     #B5B5B5;
  --aly-navy:      #0D1B2A;

  /* Status */
  --aly-success:        #1DB87A;
  --aly-success-bg:     #E8FBF3;
  --aly-success-text:   #0A6E48;
  --aly-warning:        #F5A623;
  --aly-warning-bg:     #FFF6E5;
  --aly-warning-text:   #7A4F0E;
  --aly-danger:         #E8341C;
  --aly-danger-bg:      #FEE9E5;
  --aly-danger-text:    #791F0E;
  --aly-info:           #2563EB;
  --aly-info-bg:        #EFF6FF;
  --aly-info-text:      #103E94;

  /* Radius */
  --aly-r-sm: 8px;
  --aly-r-md: 12px;
  --aly-r-lg: 16px;
  --aly-r-xl: 20px;
  --aly-r-2xl: 24px;
  --aly-r-pill: 999px;

  /* Spacing scale (4-pt grid) */
  --aly-s-1: 4px;
  --aly-s-2: 8px;
  --aly-s-3: 12px;
  --aly-s-4: 16px;
  --aly-s-5: 20px;
  --aly-s-6: 24px;
  --aly-s-8: 32px;
  --aly-s-10: 40px;

  /* Shadows */
  --aly-sh-sm: 0 1px 2px rgba(14,14,14,.04), 0 1px 1px rgba(14,14,14,.03);
  --aly-sh-md: 0 4px 12px rgba(14,14,14,.06), 0 2px 4px rgba(14,14,14,.04);
  --aly-sh-lg: 0 10px 24px rgba(14,14,14,.08), 0 4px 8px rgba(14,14,14,.04);
  --aly-sh-glow: 0 8px 24px rgba(232,52,28,.18);

  /* Typography */
  --aly-font: 'Tajawal', 'IBM Plex Sans Arabic', 'Cairo', -apple-system, system-ui, sans-serif;

  /* App chrome */
  --aly-bottom-nav-h: 64px;
  --aly-top-bar-h:    56px;
  --aly-safe-bottom:  env(safe-area-inset-bottom, 0px);
  --aly-safe-top:     env(safe-area-inset-top, 0px);
}

/* Backward-compat aliases — match the variable names already used by
   aly-market-fe (the customer storefront). This lets us copy any
   storefront component / CSS into staff / dashboard / AI projects and
   have it look identical without rewriting.
 */
:root {
  --red:    var(--aly-red);
  --red2:   var(--aly-red-light);
  --gold:   var(--aly-gold);
  --green:  var(--aly-green);
  --blue:   var(--aly-blue);
  --ink:    var(--aly-ink);
  --ink2:   var(--aly-ink-2);
  --muted:  var(--aly-muted);
  --line:   var(--aly-line);
  --bg:     var(--aly-bg);
  --white:  var(--aly-card);
  --navy:   var(--aly-navy);
}

/* Optional dark mode (Flutter Dark theme will mirror these) */
:root.aly-dark, [data-theme="dark"] {
  --aly-bg:        #0F1216;
  --aly-card:      #181C24;
  --aly-elev:      #1F242E;
  --aly-line:      #2A2F3A;
  --aly-line-soft: #1F242E;
  --aly-ink:       #F2F4F7;
  --aly-ink-2:     #CBD5E1;
  --aly-muted:     #94A3B8;
  --aly-light:     #64748B;
}