/* =====================================================================
   Aas Paas Shop — design tokens
   One place for colour, type, spacing, radius and elevation.
   Each role (customer / shop / delivery / admin) re-points --brand-*,
   so the same components carry a different accent per panel.
   ===================================================================== */

:root {
  /* ---- Palette: brand green (fresh market) ---- */
  --green-50:  #e9faf2;
  --green-100: #c9f3e0;
  --green-200: #9ae7c7;
  --green-300: #62d5a8;
  --green-400: #2fbd8b;
  --green-500: #12a474;
  --green-600: #0a8760;
  --green-700: #076a4c;
  --green-800: #08533d;
  --green-900: #073f2f;

  /* ---- Palette: accent orange (offers, delivery) ---- */
  --orange-50:  #fff3ec;
  --orange-100: #ffe1d1;
  --orange-200: #ffc3a6;
  --orange-300: #ff9c71;
  --orange-400: #ff7a45;
  --orange-500: #f4621f;
  --orange-600: #d94c12;
  --orange-700: #b03c0f;

  /* ---- Palette: indigo (shop panel) ---- */
  --indigo-50:  #eef0ff;
  --indigo-100: #dfe2ff;
  --indigo-200: #c2c7ff;
  --indigo-300: #9ba3fb;
  --indigo-400: #7a80f5;
  --indigo-500: #5b5bd6;
  --indigo-600: #4a45b8;
  --indigo-700: #3b3794;

  /* ---- Palette: slate (admin + neutrals) ---- */
  --slate-50:  #f7f8fa;
  --slate-100: #eef0f4;
  --slate-200: #e0e4ea;
  --slate-300: #c7ced9;
  --slate-400: #98a2b3;
  --slate-500: #6b7686;
  --slate-600: #4d5766;
  --slate-700: #37404d;
  --slate-800: #232b36;
  --slate-900: #131922;

  /* ---- Status ---- */
  --ok-50:   #e9faf2;  --ok-500:   #12a35f;  --ok-700:   #0b7343;
  --warn-50: #fff8e6;  --warn-500: #d98e04;  --warn-700: #9a6400;
  --bad-50:  #fdeeee;  --bad-500:  #d92d2d;  --bad-700:  #a11d1d;
  --info-50: #eaf3ff;  --info-500: #2470d4;  --info-700: #1a539e;

  /* ---- Brand hooks (overridden per role) ---- */
  --brand-soft:   var(--green-50);
  --brand-muted:  var(--green-100);
  --brand-300:    var(--green-300);
  --brand:        var(--green-500);
  --brand-strong: var(--green-600);
  --brand-deep:   var(--green-800);
  --brand-ink:    #ffffff;
  --brand-glow:   rgba(18, 164, 116, 0.28);
  --brand-gradient: linear-gradient(135deg, var(--green-500), var(--green-700));

  /* ---- Surfaces & text ---- */
  --page:        #f4f6f5;
  --surface:     #ffffff;
  --surface-2:   var(--slate-50);
  --surface-3:   var(--slate-100);
  --line:        var(--slate-200);
  --line-strong: var(--slate-300);
  --ink:         var(--slate-900);
  --ink-soft:    var(--slate-600);
  --ink-muted:   var(--slate-500);
  --ink-faint:   var(--slate-400);

  /* ---- Type ---- */
  --font: "Plus Jakarta Sans", "Segoe UI", system-ui, -apple-system, "Noto Sans", "Noto Sans Devanagari", Roboto, Arial, sans-serif;
  --font-num: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  --t-xs:   0.75rem;    /* 12 */
  --t-sm:   0.8125rem;  /* 13 */
  --t-base: 0.9375rem;  /* 15 */
  --t-md:   1rem;       /* 16 */
  --t-lg:   1.125rem;   /* 18 */
  --t-xl:   1.375rem;   /* 22 */
  --t-2xl:  1.75rem;    /* 28 */
  --t-3xl:  2.25rem;    /* 36 */

  /* ---- Radius ---- */
  --r-xs:   8px;
  --r-sm:   11px;
  --r-md:   14px;
  --r-lg:   18px;
  --r-xl:   24px;
  --r-2xl:  32px;
  --r-pill: 999px;

  /* ---- Elevation ---- */
  --sh-1: 0 1px 2px rgba(19, 25, 34, 0.05), 0 1px 3px rgba(19, 25, 34, 0.04);
  --sh-2: 0 2px 4px rgba(19, 25, 34, 0.04), 0 6px 16px rgba(19, 25, 34, 0.06);
  --sh-3: 0 8px 20px rgba(19, 25, 34, 0.08), 0 18px 40px rgba(19, 25, 34, 0.08);
  --sh-4: 0 20px 50px rgba(19, 25, 34, 0.16);
  --sh-brand: 0 6px 18px var(--brand-glow);

  /* ---- Layout ---- */
  --shell:      1180px;
  --shell-wide: 1400px;
  --shell-slim: 560px;
  --gutter:     20px;
  --header-h:   62px;
  --tabbar-h:   66px;

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --fast: 140ms var(--ease);
  --med:  220ms var(--ease);
  --slow: 380ms var(--ease);
}

/* Shop owner panel — indigo */
body.theme-shop {
  --brand-soft:   var(--indigo-50);
  --brand-muted:  var(--indigo-100);
  --brand-300:    var(--indigo-300);
  --brand:        var(--indigo-500);
  --brand-strong: var(--indigo-600);
  --brand-deep:   var(--indigo-700);
  --brand-glow:   rgba(91, 91, 214, 0.28);
  --brand-gradient: linear-gradient(135deg, var(--indigo-500), var(--indigo-700));
}

/* Rider app — orange */
body.theme-delivery {
  --brand-soft:   var(--orange-50);
  --brand-muted:  var(--orange-100);
  --brand-300:    var(--orange-300);
  --brand:        var(--orange-500);
  --brand-strong: var(--orange-600);
  --brand-deep:   var(--orange-700);
  --brand-glow:   rgba(244, 98, 31, 0.28);
  --brand-gradient: linear-gradient(135deg, var(--orange-400), var(--orange-600));
}

/* Admin console — slate on a darker page */
body.theme-admin {
  --brand-soft:   var(--slate-100);
  --brand-muted:  var(--slate-200);
  --brand-300:    var(--slate-400);
  --brand:        var(--slate-800);
  --brand-strong: var(--slate-900);
  --brand-deep:   #0a0f16;
  --brand-glow:   rgba(19, 25, 34, 0.24);
  --brand-gradient: linear-gradient(135deg, var(--slate-800), #0a0f16);
  --page: #eef0f4;
}

@media (max-width: 560px) {
  :root {
    --gutter: 16px;
    --header-h: 56px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}