/* ============================================================================
   KORBI GROCERY APP — LOCKED DESIGN TOKENS
   ============================================================================
   Single source of truth. Every component references these tokens.
   No hardcoded values in component CSS — ever.
   
   Decisions locked: May 6, 2026
   Based on: Design Audit v1 — all 14 findings resolved.
   ============================================================================ */

/* ---------- Font Loading ---------- */
@font-face {
  font-family: "Gilroy";
  src: url("/wp-content/uploads/fonts/Gilroy-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("/wp-content/uploads/fonts/Gilroy-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("/wp-content/uploads/fonts/Gilroy-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("/wp-content/uploads/fonts/Gilroy-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Gilroy";
  src: url("/wp-content/uploads/fonts/Gilroy-Extrabold.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* ============================================================================
   TOKENS
   ============================================================================ */
:root {

  /* ---- Font Stack ----
     Gilroy everywhere. Self-hosted woff2.
     Allowed weights: 400 (Regular), 500 (Medium), 600 (SemiBold), 700 (Bold), 800 (ExtraBold). */
  --font-family: Gilroy, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  /* ---- Brand Colors ---- */
  --c-green: #009966;                                              /* Offer %, rating score, savings, sale prices */
  --c-blue: #213a83;                                               /* Text links, icons, borders, active states */
  --c-blue-grad: linear-gradient(180deg, #4060ac 0%, #213a83 100%); /* Filled CTAs, primary buttons, large steppers */
  --c-blue-soft: #e8edf8;                                          /* Info pills, sticky footer bar, distance warning — re-tinted to match navy */
  --c-rating: #f8d149;                                             /* Star glyphs */
  --c-accent: rgb(158, 30, 98);                                    /* Subcategory active state — configurable per-implementation */

  /* ---- Surfaces ---- */
  --c-bg: #ffffff;                                                 /* Default page background */
  --c-surface-subtle: #f3f4f8;                                     /* Cart/checkout body (white cards separate from it) */
  --c-surface-image: #f7f7f8;                                      /* Product image area inside cards */
  --c-surface-strip: #f0f0f5;                                      /* Subcat strip, search overlay bar, segmented toggles */

  /* ---- Text ---- */
  --c-text: #282c3f;                                               /* Body copy, default text */
  --c-heading: #33343a;                                            /* Page titles, section titles */
  --c-card-name: #3d4152;                                          /* Product names in cards */
  --c-text-strong: rgba(2, 6, 12, 0.86);                           /* Prices, emphasis */
  --c-text-soft: rgba(2, 6, 12, 0.62);                             /* Weight labels, subtitles, supporting text */
  --c-text-muted: rgba(2, 6, 12, 0.52);                            /* Rating count, supplemental info */
  --c-text-faint: rgba(2, 6, 12, 0.35);                            /* Struck-through MRP */

  /* ---- Borders & Lines ---- */
  --c-border: #e9e9eb;                                             /* Card outlines, header dividers */
  --c-border-soft: #eef0f5;                                        /* Subtle section dividers */
  --c-border-input: #dfe3ea;                                       /* Form fields, search bars, filter chips */
  --c-strike: rgba(2, 6, 12, 0.28);                                /* Line over old prices */

  /* ---- Product-Specific ---- */
  --c-offer-bg: #fdf5e9;                                           /* Deal/offer badge background */
  --c-offer-text: #80540f;                                         /* Deal/offer badge text */

  /* ---- Spacing (4px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --side: var(--sp-4);                                             /* Default page side padding: 16px */
  --side-sheet: var(--sp-3);                                       /* Product sheet side padding: 12px */

  /* ---- Border Radii ---- */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 22px;
  --r-pill: 999px;

  /* ---- Heights ---- */
  --h-nav: 62px;
  --h-input: 44px;
  --h-btn-md: 44px;
  --h-btn-lg: 48px;
  --h-btn-xl: 50px;

  /* ---- Typography Scale ----
     Format: weight size/line-height family
     Allowed weights: 400, 500, 600, 700, 800. */
  --t-display:      800 28px/30px var(--font-family);   /* Hero delivery time */
  --t-h1:           800 22px/26px var(--font-family);   /* Major section titles */
  --t-h2:           700 18px/22px var(--font-family);   /* Sub-section titles */
  --t-h3:           600 17px/22px var(--font-family);   /* Nav bar page titles */
  --t-h4:           600 16px/20px var(--font-family);   /* CTAs, modal titles, PDP price */
  --t-body:         400 14px/20px var(--font-family);   /* Paragraph copy */
  --t-body-strong:  700 14px/18px var(--font-family);   /* "See All" links, card price */
  --t-card:         500 13px/16px var(--font-family);   /* Product names in cards (2-line clamp) */
  --t-caption:      400 12px/16px var(--font-family);   /* Weight, offer %, subtitles */
  --t-label:        500 11px/14px var(--font-family);   /* Filter chips, search tags */
  --t-micro:        600 10px/12px var(--font-family);   /* Rating count, badges, ETA pill */

  /* ---- Shadows ---- */
  --sh-input:  0 1px 4px rgba(27, 30, 36, 0.04);
  --sh-nav:    0 2px 8px rgba(27, 30, 36, 0.06);
  --sh-card:   0 1px 4px rgba(27, 30, 36, 0.045);
  --sh-sticky: 0 -2px 10px rgba(27, 30, 36, 0.08);
  --sh-cta:    0 4px 12px rgba(33, 58, 131, 0.22);
  --sh-shell:  0 0 0 1px rgba(0, 0, 0, 0.04), 0 18px 55px rgba(0, 0, 0, 0.12);
  --sh-sheet:  0 -10px 34px rgba(27, 30, 36, 0.22);

  /* ---- Animation Timing ----
     Three tiers. Every animation maps to one of these.
     The tab curve animation in JS uses its own 320ms easeOutCubic (equivalent to --ease-standard). */
  --ease-micro:    180ms ease;                                     /* Toggles, button states, color changes */
  --ease-standard: 320ms cubic-bezier(0.22, 1, 0.36, 1);          /* Sheets, overlays, tab curve */
  --ease-layout:   420ms cubic-bezier(0.16, 1, 0.3, 1);           /* Layout shifts, condense transitions */
}

/* ============================================================================
   RESPONSIVE SCALING SYSTEM
   ============================================================================
   The app is NOT confined to a fixed width. It scales proportionally.
   
   Mobile (< 768px): Full viewport width. Content scales with screen.
   Desktop (≥ 768px): Centered shell, max-width 480px for app-like feel.
   
   Product grids use responsive columns:
   - < 360px: 2 columns
   - 360–480px: 2 columns (wider cards)
   - 480–768px: 3 columns
   - ≥ 768px: 2 columns inside the centered shell
   ============================================================================ */

/* ============================================================================
   RESET & BASE
   ============================================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  background: var(--c-surface-subtle);
  font-family: var(--font-family);
  color: var(--c-text);
  letter-spacing: -0.2px;
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

a { color: inherit; text-decoration: none; }
button, input, select, textarea { font-family: inherit; cursor: pointer; }
img { display: block; max-width: 100%; }

/* Scrollbar hiding utility */
.no-scrollbar { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Hidden utility */
.is-hidden { display: none !important; }

/* ============================================================================
   APP SHELL
   ============================================================================
   Fluid on mobile, centered on desktop. 
   Not a fixed artboard — content flows naturally. */
.korbi-shell {
  position: relative;
  width: 100%;
  min-height: 100dvh;
  background: var(--c-bg);
  margin: 0 auto;
  overflow-x: hidden;
}

@media (min-width: 768px) {
  body { display: flex; justify-content: center; }
  .korbi-shell {
    max-width: 480px;
    box-shadow: var(--sh-shell);
  }
}

/* Shell variants */
.korbi-shell--subtle { background: var(--c-surface-subtle); }
.korbi-shell--locked {
  display: flex;
  flex-direction: column;
  height: 100dvh;
  overflow: hidden;
}

/* Scroll body inside locked shells */
.korbi-scroll-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: none;
}
.korbi-scroll-body::-webkit-scrollbar { display: none; }

/* ============================================================================
   HOMEPAGE TAB SYSTEM — COLOR VARIABLES
   ============================================================================
   Each tab defines its own gradient set via data attributes in the admin.
   These CSS custom properties are set dynamically by JS on tab switch.
   The homepage is the ONLY place with colored gradient backgrounds.
   All other pages use the static tokens above. */

/* Default tab colors (overridden per-tab by JS) */
.korbi-home {
  --tab-bg-top: #b300a8;
  --tab-bg-mid: #a00098;
  --tab-bg-bottom: #910080;
  --tab-fg: #ffffff;
  --tab-muted-fg: rgba(255, 255, 255, 0.80);
  --tab-nav-line: rgba(255, 255, 255, 0.70);
  --tab-content-bg: #a00096;
}

/* ============================================================================
   SUBCATEGORY ACTIVE STATES
   ============================================================================
   The accent color is configurable (--c-accent) and defaults to
   rgb(158, 30, 98). These derived values are computed from the accent. */
   
:root {
  --c-accent-soft: rgba(158, 30, 98, 0.08);                       /* Active pill background tint */
  --c-accent-border: #efb7bc;                                      /* Active pill border (condensed) */
  --c-accent-text: #e04b56;                                        /* Active pill label (condensed) */
}