/* ============================================================
   ThatDailyDeal — Design tokens
   Source of truth for the design library. Currently linked from
   library.html only; the prototype (v6.css) does not reference
   these yet — that happens in a later phase.
   ============================================================ */

:root {
  /* ============== COLORS ============== */
  /* Brand */
  --color-blue:        #3C65BD; /* primary / light blue */
  --color-blue-dark:   #1E3464; /* dark blue */
  --color-blue-deep:   #14224a; /* gradient depth — derived darker */
  --color-blue-night:  #0c1530; /* gradient depth — derived darkest */
  --color-gold:        #F0A12A; /* accent / CTA */
  --color-gold-dark:   #D08818; /* derived darker for button gradients */

  /* System accents */
  --color-red:         #D43A36; /* sale / urgency */
  --color-green:       #36c980; /* success / confirmation */

  /* Neutrals */
  --color-white:       #ffffff;
  --color-ink:         #1A1A1A;
  --color-gray-300:    #C8CCD3;
  --color-gray-500:    #8A8F99;
  --color-gray-700:    #4A4F58;

  /* ============== TYPOGRAPHY ============== */
  --font-family-primary: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  /* Type scale — mirrors Flutter's Material 3 TextTheme.
     15 named styles × 4 properties (size / weight / line-height / tracking).
     Each style maps 1:1 to a TextStyle on the Flutter side. Components reference
     these vars; per-component weight/tracking overrides are inline on the rule
     (same model as textTheme.titleSmall?.copyWith(fontWeight: FontWeight.w800)).
     Default weights are tuned heavier than M3 spec (Body 500, Label 600) to
     match the current visual design — most consumers run heavier than M3's
     400/500 defaults anyway. */

  /* Display — biggest, most emphatic. Used for swipe-stamp overlays. */
  --type-display-large-size:      56px;
  --type-display-large-weight:    900;
  --type-display-large-lh:        1;
  --type-display-large-tracking:  2px;

  --type-display-medium-size:     44px;
  --type-display-medium-weight:   900;
  --type-display-medium-lh:       1;
  --type-display-medium-tracking: 2px;

  --type-display-small-size:      36px;
  --type-display-small-weight:    800;
  --type-display-small-lh:        1.1;
  --type-display-small-tracking:  1px;

  /* Headline — page-level titles. */
  --type-headline-large-size:      28px;
  --type-headline-large-weight:    700;
  --type-headline-large-lh:        1.2;
  --type-headline-large-tracking:  0;

  --type-headline-medium-size:     24px;
  --type-headline-medium-weight:   700;
  --type-headline-medium-lh:       1.2;
  --type-headline-medium-tracking: 0;

  --type-headline-small-size:      20px;
  --type-headline-small-weight:    700;
  --type-headline-small-lh:        1.2;
  --type-headline-small-tracking:  0;

  /* Title — component-level emphasis (price, modal titles). */
  --type-title-large-size:      20px;
  --type-title-large-weight:    800;
  --type-title-large-lh:        1.2;
  --type-title-large-tracking:  0;

  --type-title-medium-size:     16px;
  --type-title-medium-weight:   700;
  --type-title-medium-lh:       1.2;
  --type-title-medium-tracking: 0;

  --type-title-small-size:      15px;
  --type-title-small-weight:    700;
  --type-title-small-lh:        1.2;
  --type-title-small-tracking:  0;

  /* Body — readable prose, default UI text. */
  --type-body-large-size:      16px;
  --type-body-large-weight:    500;
  --type-body-large-lh:        1.4;
  --type-body-large-tracking:  0;

  --type-body-medium-size:     14px;
  --type-body-medium-weight:   500;
  --type-body-medium-lh:       1.4;
  --type-body-medium-tracking: 0;

  --type-body-small-size:      13px;
  --type-body-small-weight:    500;
  --type-body-small-lh:        1.35;
  --type-body-small-tracking:  0;

  /* Label — utility text on chips, badges, micro-controls. */
  --type-label-large-size:      14px;
  --type-label-large-weight:    600;
  --type-label-large-lh:        1;
  --type-label-large-tracking:  0;

  --type-label-medium-size:     12px;
  --type-label-medium-weight:   600;
  --type-label-medium-lh:       1;
  --type-label-medium-tracking: 0.2px;

  --type-label-small-size:      10px;
  --type-label-small-weight:    600;
  --type-label-small-lh:        1;
  --type-label-small-tracking:  0.1px;

  /* ============== SPACING (4px base scale) ============== */
  --space-1:  4px;
  --space-2:  8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ============== BORDER RADIUS ============== */
  --radius-xs:     6px;
  --radius-sm:     8px;
  --radius-md:    12px;
  --radius-lg:    16px;
  --radius-xl:    22px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* ============== SHADOWS ============== */
  --shadow-sm:        0 2px 6px rgba(0, 0, 0, .18);
  --shadow-md:        0 4px 14px rgba(0, 0, 0, .25);
  --shadow-lg:        0 12px 32px rgba(0, 0, 0, .45);
  --shadow-sheet:     0 -10px 40px rgba(0, 0, 0, .4);   /* upward — bottom sheets */
  --shadow-gold-glow: 0 6px 16px rgba(240, 161, 42, .4); /* CTA accent */

  /* ============== LIQUID GLASS ============== */
  /* Primary glass — deals banner, price pill, action buttons, bottom nav. */
  --glass-bg:     rgba(20, 20, 20, .55);
  --glass-border: 1px solid rgba(255, 255, 255, .18);
  --glass-blur:   blur(28px) saturate(180%);
  --glass-shadow:
    0 12px 32px rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .22),
    inset 0 -1px 0 rgba(0, 0, 0, .25);

  /* Subtle glass — toast, restock CTA. Less blur, no inner highlight. */
  --glass-bg-subtle:   rgba(0, 0, 0, .5);
  --glass-blur-subtle: blur(6px) saturate(140%);
}