/* ShopEasy — design tokens: dark glassmorphism (docs/03 §0, §5.1) */

:root {
  /* Surfaces */
  --bg: #0b0f14;
  --bg-grad-a: #101826;
  --bg-grad-b: #0b0f14;
  --glass: rgba(255, 255, 255, 0.06);
  --glass-strong: rgba(255, 255, 255, 0.10);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-blur: 14px;
  --overlay: rgba(4, 8, 12, 0.55);

  /* Text */
  --text: #eef2f6;
  --text-dim: #9aa7b4;
  --text-faint: #667380;

  /* Accent */
  --accent: #2dd4bf;
  --accent-press: #14b8a6;
  --accent-text: #04211d;

  /* Traffic lights (paired with words + shapes, never color alone) */
  --green: #34d399;
  --amber: #fbbf24;
  --red: #f87171;
  --green-bg: rgba(52, 211, 153, 0.14);
  --amber-bg: rgba(251, 191, 36, 0.14);
  --red-bg: rgba(248, 113, 113, 0.16);

  /* Type scale — base ≥17px, money/stock numbers ≥28px (§5.1 rule 3) */
  --fs-base: 17px;
  --fs-small: 15px;
  --fs-h1: 24px;
  --fs-big-number: 30px;
  --fs-huge: 40px;

  /* Touch targets (§5.1 rule 1) */
  --tap-min: 48px;
  --btn-primary-h: 56px;
  --gap-tap: 8px;

  /* Spacing + radius */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --radius: 16px;
  --radius-sm: 10px;
  --radius-pill: 999px;

  /* Layout */
  --tabbar-h: 64px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html {
  font-size: var(--fs-base);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background: var(--bg) radial-gradient(120% 90% at 50% 0%, var(--bg-grad-a) 0%, var(--bg-grad-b) 70%) no-repeat fixed;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.45;
  overscroll-behavior-y: none;
}

h1 { font-size: var(--fs-h1); font-weight: 700; margin: 0 0 var(--sp-4); }
h2 { font-size: 19px; font-weight: 650; margin: 0 0 var(--sp-3); }
p  { margin: 0 0 var(--sp-3); }

a { color: var(--accent); text-decoration: none; }

.dim { color: var(--text-dim); }
.faint { color: var(--text-faint); font-size: var(--fs-small); }
.big-number { font-size: var(--fs-big-number); font-weight: 750; font-variant-numeric: tabular-nums; }
.huge-number { font-size: var(--fs-huge); font-weight: 800; font-variant-numeric: tabular-nums; }

/* Glass panel — blur backgrounds get a darkening layer so text stays ≥4.5:1 */
.glass {
  background: linear-gradient(var(--overlay), var(--overlay)), var(--glass);
  background-blend-mode: normal;
  border: 1px solid var(--glass-border);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(var(--glass-blur));
  backdrop-filter: blur(var(--glass-blur));
}

/* Traffic-light pairing: dot + word (never color alone, §5.1 rule 4) */
.light { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 600; }
.light::before { content: ""; width: 10px; height: 10px; border-radius: 50%; flex: none; }
.light-green  { color: var(--green); }
.light-green::before  { background: var(--green); }
.light-amber  { color: var(--amber); }
.light-amber::before  { background: var(--amber); border-radius: 2px; } /* shape differs too */
.light-red    { color: var(--red); }
.light-red::before    { background: var(--red); clip-path: polygon(50% 0, 100% 100%, 0 100%); border-radius: 0; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}