/* ============================================================
   STOR — Color tokens
   Bold & vibrant. Tomato Red is the hero; everything else supports it.
   ============================================================ */
:root {
  /* ---- Brand palette (raw) ---- */
  --stor-red: #C01616;        /* Primary — Tomato Red (hero) */
  --stor-tan: #C5A483;        /* Secondary — Warm Tan */
  --stor-yellow: #FFC71C;     /* Secondary — Golden Yellow */
  --stor-gray: #D9D9D9;       /* Secondary — Light Gray */
  --stor-charcoal: #3B3A3A;   /* Secondary — Dark Charcoal */
  --stor-white: #FFFFFF;
  --stor-black: #211F1F;      /* Derived ink, softer than pure black */

  /* ---- Red scale (derived tints/shades for states & surfaces) ---- */
  --red-50:  #FBEAEA;
  --red-100: #F6D2D2;
  --red-200: #EBA3A3;
  --red-300: #DD6E6E;
  --red-400: #D03B3B;
  --red-500: #C01616;   /* = brand red */
  --red-600: #A81313;   /* hover */
  --red-700: #8C1010;   /* pressed */
  --red-800: #6E0C0C;
  --red-900: #4D0808;

  /* ---- Tan scale ---- */
  --tan-50:  #F7F1EB;
  --tan-100: #EDE0D2;
  --tan-200: #DFC9B2;
  --tan-300: #C5A483;   /* = brand tan */
  --tan-400: #B08C66;
  --tan-500: #94714C;
  --tan-600: #6F543A;

  /* ---- Yellow scale ---- */
  --yellow-100: #FFF1C2;
  --yellow-200: #FFE486;
  --yellow-300: #FFD64A;
  --yellow-400: #FFC71C;  /* = brand yellow */
  --yellow-500: #E6AF00;
  --yellow-600: #B88B00;

  /* ---- Neutral / charcoal scale ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #FAF9F8;
  --neutral-100: #F2F1EF;
  --neutral-200: #E7E5E2;
  --neutral-300: #D9D9D9;  /* = brand light gray */
  --neutral-400: #B9B7B5;
  --neutral-500: #8C8A88;
  --neutral-600: #635F5E;
  --neutral-700: #494746;
  --neutral-800: #3B3A3A;  /* = brand charcoal */
  --neutral-900: #211F1F;

  /* ---- Semantic / status (kept on-brand) ---- */
  --status-fresh:   #1F8A4C;  /* "fresh" green for app freshness states */
  --status-fresh-bg:#E3F3E8;
  --status-soon:    #FFC71C;  /* expiring soon = brand yellow */
  --status-soon-bg: #FFF1C2;
  --status-expired: #C01616;  /* brand red */
  --status-expired-bg:#FBEAEA;

  /* ============================================================
     Semantic aliases — reference these in components, not raw scales
     ============================================================ */
  /* Text */
  --text-strong:    var(--neutral-900);
  --text-body:      var(--neutral-800);
  --text-muted:     var(--neutral-600);
  --text-subtle:    var(--neutral-500);
  --text-on-red:    var(--stor-white);   /* white on brand color */
  --text-on-yellow: var(--neutral-900);  /* black on yellow */
  --text-on-tan:    var(--neutral-900);
  --text-on-dark:   var(--stor-white);
  --text-inverse:   var(--stor-white);
  --text-brand:     var(--stor-red);

  /* Surfaces */
  --surface-page:    var(--neutral-50);
  --surface-card:    var(--neutral-0);
  --surface-sunken:  var(--neutral-100);
  --surface-raised:  var(--neutral-0);
  --surface-brand:   var(--stor-red);
  --surface-dark:    var(--neutral-800);
  --surface-tan:     var(--tan-100);
  --surface-yellow:  var(--stor-yellow);

  /* Borders & lines */
  --border-subtle:   var(--neutral-200);
  --border-default:  var(--neutral-300);
  --border-strong:   var(--neutral-400);
  --border-brand:    var(--stor-red);

  /* Interactive */
  --action-primary:        var(--stor-red);
  --action-primary-hover:  var(--red-600);
  --action-primary-active: var(--red-700);
  --action-accent:         var(--stor-yellow);
  --action-accent-hover:   var(--yellow-500);
  --focus-ring:            var(--red-400);
}
/* ============================================================
   STOR — Typography tokens
   Headlines: Archivo Black (heavy, all-caps energy)
   Body:      Roboto
   ============================================================ */
:root {
  /* ---- Families ---- */
  --font-headline: "Archivo Black", "Arial Black", system-ui, sans-serif;
  --font-body: "Roboto", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ---- Weights ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;
  --weight-black: 900;

  /* ---- Type scale (display uses headline font) ---- */
  --text-display-xl: 72px;   /* hero */
  --text-display-l:  56px;
  --text-display-m:  44px;
  --text-h1: 36px;
  --text-h2: 28px;
  --text-h3: 22px;
  --text-title: 18px;
  --text-body-lg: 18px;
  --text-body: 16px;
  --text-body-sm: 14px;
  --text-caption: 13px;
  --text-overline: 12px;

  /* ---- Line heights ---- */
  --leading-tight: 1.04;   /* big headline */
  --leading-snug: 1.18;
  --leading-normal: 1.5;
  --leading-relaxed: 1.65;

  /* ---- Letter spacing ---- */
  --tracking-headline: -0.01em;  /* Archivo Black is wide; pull in slightly */
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-overline: 0.14em;   /* uppercase labels */
}

/* ---- Utility classes (optional helpers) ---- */
.stor-display {
  font-family: var(--font-headline);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-headline);
  text-transform: uppercase;
}
.stor-overline {
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-overline);
  letter-spacing: var(--tracking-overline);
  text-transform: uppercase;
}
/* ============================================================
   STOR — Spacing, radius, shadow, motion tokens
   ============================================================ */
:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---- Radii ---- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  /* The "tag" notch geometry that echoes the STOR logo shape */
  --tag-notch: 14px;

  /* ---- Border widths ---- */
  --border-hairline: 1px;
  --border-thick: 2px;
  --border-heavy: 3px;

  /* ---- Shadows — soft, warm-tinted, never harsh ---- */
  --shadow-xs: 0 1px 2px rgba(33, 31, 31, 0.06);
  --shadow-sm: 0 2px 6px rgba(33, 31, 31, 0.08);
  --shadow-md: 0 6px 18px rgba(33, 31, 31, 0.10);
  --shadow-lg: 0 14px 34px rgba(33, 31, 31, 0.14);
  --shadow-red: 0 10px 28px rgba(192, 22, 22, 0.28);  /* glow under red CTAs */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);  /* @kind other */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);    /* @kind other */
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);/* @kind other */
  --duration-fast: 120ms;   /* @kind other */
  --duration-base: 200ms;   /* @kind other */
  --duration-slow: 320ms;   /* @kind other */

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: 24px;
}