/* ==========================================================================
   Pepsi order UI — design tokens
   Every value the component layer uses is declared here. Theme the whole
   app by overriding these on :root (or on any scope).
   ========================================================================== */

:root {
  /* --- brand ------------------------------------------------------------ */
  --pds-blue:        #005cb4;  /* Pepsi blue — primary action, links, focus */
  --pds-blue-deep:   #002648;  /* Pepsi navy — body text                    */
  --pds-red:         #eb1c2d;  /* Pepsi red — destructive + brand band      */
  --pds-white:       #ffffff;

  /* --- blue ramp (light ground: 100 tint … 900 deep) -------------------- */
  --pds-blue-100: #eef5ff;
  --pds-blue-200: #d6e7fa;
  --pds-blue-300: #a9caf1;
  --pds-blue-400: #6aa3e4;
  --pds-blue-500: #2b7ad1;
  --pds-blue-600: #005cb4;
  --pds-blue-700: #004b93;
  --pds-blue-800: #003a72;
  --pds-blue-900: #002648;

  /* --- red ramp --------------------------------------------------------- */
  --pds-red-100: #fdeced;
  --pds-red-200: #fbd2d6;
  --pds-red-500: #eb1c2d;
  --pds-red-600: #c8121f;
  --pds-red-700: #9d0d18;

  /* --- semantic surfaces ------------------------------------------------ */
  --pds-bg:            #f2f6fb;
  --pds-surface:       #ffffff;
  --pds-surface-sunk:  #f2f6fb;   /* product-shot tiles, inset wells        */
  --pds-text:          #072648;
  --pds-text-muted:    rgba(7, 38, 72, 0.70); /* 5.7:1 on --pds-surface */
  --pds-text-subtle:   rgba(7, 38, 72, 0.66); /* 5.0:1 on --pds-surface */
  --pds-border:        rgba(7, 38, 72, 0.12);
  --pds-border-strong: rgba(7, 38, 72, 0.26);

  /* --- type ------------------------------------------------------------- */
  --pds-font: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pds-fs-xs:  11px;
  --pds-fs-sm:  12px;
  --pds-fs-md:  13px;
  --pds-fs-base:14px;
  --pds-fs-lg:  16px;
  --pds-fs-xl:  22px;
  --pds-fs-2xl: 28px;
  --pds-fw-regular: 400;
  --pds-fw-medium:  500;
  --pds-fw-bold:    600;

  /* --- space (4px base) ------------------------------------------------- */
  --pds-space-1: 2px;
  --pds-space-2: 4px;
  --pds-space-3: 8px;
  --pds-space-4: 12px;
  --pds-space-5: 16px;
  --pds-space-6: 20px;
  --pds-space-7: 24px;
  --pds-space-8: 32px;

  /* --- radius ----------------------------------------------------------- */
  --pds-radius-sm: 4px;
  --pds-radius-md: 8px;
  --pds-radius-lg: 14px;
  --pds-radius-pill: 999px;

  /* --- elevation -------------------------------------------------------- */
  --pds-shadow-sm: 0 0 0 1px #dde6f1;
  --pds-shadow-md: 0 0 0 1px #d2dded, 0 6px 18px rgba(7, 38, 72, 0.08);
  --pds-shadow-bar: 0 -1px 0 rgba(7, 38, 72, 0.12), 0 -10px 28px rgba(7, 38, 72, 0.10);

  /* --- controls --------------------------------------------------------- */
  --pds-control-h:    38px;   /* default button / input height              */
  --pds-control-h-sm: 30px;
  --pds-thumb-size:   56px;   /* product shot tile                          */
  --pds-tap-min:      44px;   /* minimum touch target on coarse pointers    */

  --pds-focus-ring: 2px solid var(--pds-blue);
  --pds-focus-offset: 2px;

  --pds-transition: 120ms ease;
}