/* ============================================================
   Vinique — Color & Type Tokens
   Source of truth: components/ui/gluestack-ui-provider/config.ts
   and tailwind.config.js from wine-org/shop-frontend.
   Light theme is the product's primary mode.
   ============================================================ */

@font-face {
  font-family: 'MaterialDesignIcons';
  src: url('./fonts/MaterialDesignIcons.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

:root {
  /* ----------------------------------------------------------
     Primary — neutral grays (used for body text, surfaces)
     The codebase calls these "primary" but visually they are a
     pure neutral ramp. Burgundy lives in `tertiary`.
     ---------------------------------------------------------- */
  --primary-0: rgb(179 179 179);
  --primary-50: rgb(153 153 153);
  --primary-100: rgb(128 128 128);
  --primary-200: rgb(115 115 115);
  --primary-300: rgb(102 102 102);
  --primary-400: rgb(82 82 82);
  --primary-500: rgb(51 51 51);
  --primary-600: rgb(41 41 41);
  --primary-700: rgb(31 31 31);
  --primary-800: rgb(13 13 13);
  --primary-900: rgb(10 10 10);
  --primary-950: rgb(8 8 8);

  /* ----------------------------------------------------------
     Secondary — off-whites for muted surfaces, dividers
     ---------------------------------------------------------- */
  --secondary-0: rgb(253 253 253);
  --secondary-50: rgb(251 251 251);
  --secondary-100: rgb(246 246 246);
  --secondary-200: rgb(242 242 242);
  --secondary-300: rgb(237 237 237);
  --secondary-400: rgb(230 230 231);
  --secondary-500: rgb(217 217 219);
  --secondary-600: rgb(198 199 199);
  --secondary-700: rgb(189 189 189);
  --secondary-800: rgb(177 177 177);
  --secondary-900: rgb(165 164 164);
  --secondary-950: rgb(157 157 157);

  /* ----------------------------------------------------------
     Tertiary — Burgundy. THIS IS THE BRAND ACCENT.
     Used for the home banner, wine-type dot (red), bookmarks
     in detail screens, and accent iconography.
     ---------------------------------------------------------- */
  --tertiary-0: rgb(252 242 245);
  --tertiary-50: rgb(249 230 234);
  --tertiary-100: rgb(244 210 217);
  --tertiary-200: rgb(230 175 188);
  --tertiary-300: rgb(212 135 155);
  --tertiary-400: rgb(186 85 110);
  --tertiary-500: rgb(150 30 60);   /* #961E3C — hero burgundy */
  --tertiary-600: rgb(130 24 52);   /* banner background */
  --tertiary-700: rgb(110 20 44);   /* banner pressed */
  --tertiary-800: rgb(88 16 36);
  --tertiary-900: rgb(66 12 26);
  --tertiary-950: rgb(44 8 18);

  /* ----------------------------------------------------------
     Semantic palettes
     ---------------------------------------------------------- */
  --error-500: rgb(230 53 53);
  --error-600: rgb(220 38 38);

  --success-500: rgb(52 131 82);     /* the green of a saved bookmark */
  --success-600: rgb(42 121 72);

  --warning-500: rgb(231 120 40);
  --warning-600: rgb(215 108 31);

  --info-500: rgb(13 166 242);       /* tab "Discover" active blue */
  --info-600: rgb(11 141 205);

  /* ----------------------------------------------------------
     Typography ramp (foreground colors for text)
     ---------------------------------------------------------- */
  --typography-0: rgb(254 254 255);
  --typography-50: rgb(245 245 245);
  --typography-100: rgb(229 229 229);
  --typography-200: rgb(219 219 220);
  --typography-300: rgb(212 212 212);
  --typography-400: rgb(163 163 163);
  --typography-500: rgb(140 140 140);
  --typography-600: rgb(115 115 115);  /* secondary body */
  --typography-700: rgb(82 82 82);     /* default body */
  --typography-800: rgb(64 64 64);
  --typography-900: rgb(38 38 39);     /* heading / strong */
  --typography-950: rgb(23 23 23);
  --typography-white: #FFFFFF;
  --typography-gray:  #D4D4D4;
  --typography-black: #181718;

  /* ----------------------------------------------------------
     Outline (borders, dividers)
     ---------------------------------------------------------- */
  --outline-100: rgb(230 230 230);
  --outline-200: rgb(221 220 219);
  --outline-300: rgb(211 211 211);
  --outline-500: rgb(140 141 141);
  --outline-700: rgb(83 82 82);

  /* ----------------------------------------------------------
     Background (surfaces)
     ---------------------------------------------------------- */
  --background-0: rgb(255 255 255);    /* pure white card */
  --background-50: rgb(246 246 246);   /* primary screen bg */
  --background-100: rgb(242 241 241);  /* segmented control track */
  --background-200: rgb(220 219 219);
  --background-error: rgb(254 241 241);
  --background-warning: rgb(255 243 234);
  --background-success: rgb(237 252 242);
  --background-muted: rgb(247 248 247);
  --background-info: rgb(235 248 254);
  --background-light: #FBFBFB;
  --background-dark: #181719;

  /* ----------------------------------------------------------
     Wine-type indicator dots (from WineTypeIcon.tsx)
     ---------------------------------------------------------- */
  --wine-red:    #800020;
  --wine-rose:   #D4869A;
  --wine-white:  #EDE275;
  --wine-dessert:#E2A52B;
  --wine-outline:#A89318;

  /* ----------------------------------------------------------
     Rating-badge colors (from RatingDisplay.tsx)
     ---------------------------------------------------------- */
  --rating-extraordinary-bg: #ea580c;  /* orange-600  96-100 */
  --rating-extraordinary-fg: #fff7ed;  /* orange-50  */
  --rating-outstanding-bg:  #f59e0b;   /* amber-500  90-95   */
  --rating-outstanding-fg:  #fffbeb;   /* amber-50   */
  --rating-very-good-bg:    #eab308;   /* yellow-500 85-89   */
  --rating-very-good-fg:    #fefce8;   /* yellow-50  */
  --rating-good-bg:         #ca8a04;   /* yellow-600 80-84   */
  --rating-good-fg:         #fefce8;
  --rating-average-bg:      #a3a3a3;   /* neutral-400 70-79  */
  --rating-average-fg:      #fafafa;
  --rating-below-bg:        #78716c;   /* stone-500   <70    */
  --rating-below-fg:        #fafaf9;

  /* ----------------------------------------------------------
     Shadow system (1:1 from tailwind.config.js)
     ---------------------------------------------------------- */
  --shadow-hard-1: -2px 2px 8px 0 rgba(38, 38, 38, .20);
  --shadow-hard-2:  0  3px 10px 0 rgba(38, 38, 38, .20);
  --shadow-hard-3:  2px 2px 8px 0 rgba(38, 38, 38, .20);
  --shadow-hard-4:  0 -3px 10px 0 rgba(38, 38, 38, .20);
  --shadow-hard-5:  0  2px 10px 0 rgba(38, 38, 38, .10); /* segmented thumb */
  --shadow-soft-1:  0  0 10px rgba(38, 38, 38, .10);     /* default card */
  --shadow-soft-2:  0  0 20px rgba(38, 38, 38, .20);
  --shadow-soft-3:  0  0 30px rgba(38, 38, 38, .10);
  --shadow-soft-4:  0  0 40px rgba(38, 38, 38, .10);

  /* ----------------------------------------------------------
     Type — families
     The codebase declares 5 families. Plus Jakarta Sans is the
     UI/body face used in production. Roboto, Inter, Source Code
     Pro, Space Mono are also wired but not heavily used.
     ---------------------------------------------------------- */
  --font-jakarta:    'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-inter:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-roboto:     'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:       'Source Code Pro', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-space-mono: 'Space Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-sys: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Body face. The product uses a system-ish sans on iOS;
     web defaults to Plus Jakarta Sans. */
  --font-body: var(--font-jakarta);

  /* ----------------------------------------------------------
     Type — sizes (tailwind extended scale)
     Quirk: every size is the default * 1.0625 (17px base).
     ---------------------------------------------------------- */
  --fs-2xs: 10.625px;  --lh-2xs: 17px;
  --fs-xs:  12.75px;   --lh-xs:  21.25px;
  --fs-sm:  14.875px;  --lh-sm:  21.25px;
  --fs-base:17px;      --lh-base:25.5px;
  --fs-lg:  19.125px;  --lh-lg:  28.688px;
  --fs-xl:  21.25px;   --lh-xl:  30.813px;
  --fs-2xl: 25.5px;    --lh-2xl: 34px;
  --fs-3xl: 31.875px;  --lh-3xl: 38.25px;
  --fs-4xl: 38.25px;   --lh-4xl: 42.5px;

  /* ----------------------------------------------------------
     Radii (tailwind defaults)
     ---------------------------------------------------------- */
  --radius-sm: 2px;
  --radius:    4px;     /* default — Card, Button */
  --radius-md: 6px;     /* segmented thumb */
  --radius-lg: 8px;     /* segmented track */
  --radius-xl: 12px;    /* product card */
  --radius-2xl: 16px;   /* rating pill */
  --radius-full: 9999px;

  /* ----------------------------------------------------------
     Spacing (tailwind 4px grid; product mostly uses 2/4/8/12/16/24)
     ---------------------------------------------------------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;

  /* ----------------------------------------------------------
     Semantic aliases
     ---------------------------------------------------------- */
  --fg:           var(--typography-900);
  --fg-strong:    var(--typography-950);
  --fg-muted:     var(--typography-700);
  --fg-faint:     var(--typography-500);
  --fg-subtle:    var(--typography-400);
  --fg-on-accent: var(--tertiary-50);
  --fg-on-dark:   var(--typography-0);

  --bg:           var(--background-50);   /* the gray screen */
  --bg-elev:      var(--background-0);    /* white card */
  --bg-muted:     var(--background-muted);
  --border:       var(--outline-200);
  --border-strong:var(--outline-500);

  --accent:       var(--tertiary-500);
  --accent-bg:    var(--tertiary-600);
  --accent-pressed: var(--tertiary-700);
  --accent-fg:    var(--tertiary-50);

  --link:         var(--primary-500);
  --saved:        var(--success-500);    /* bookmark fill */

  --shadow-card:  var(--shadow-soft-1);
  --shadow-thumb: var(--shadow-hard-5);
}

/* =============================================================
   Type semantic classes
   The UI uses size-based, not h1/h2-based. CText component
   exposes `bold` + `size` props mapping to these.
   ============================================================= */
html, body {
  font-family: var(--font-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
}

.t-2xs  { font-size: var(--fs-2xs);  line-height: var(--lh-2xs);  }
.t-xs   { font-size: var(--fs-xs);   line-height: var(--lh-xs);   }
.t-sm   { font-size: var(--fs-sm);   line-height: var(--lh-sm);   }
.t-base { font-size: var(--fs-base); line-height: var(--lh-base); }
.t-lg   { font-size: var(--fs-lg);   line-height: var(--lh-lg);   }
.t-xl   { font-size: var(--fs-xl);   line-height: var(--lh-xl);   }
.t-2xl  { font-size: var(--fs-2xl);  line-height: var(--lh-2xl);  }
.t-3xl  { font-size: var(--fs-3xl);  line-height: var(--lh-3xl);  }
.t-4xl  { font-size: var(--fs-4xl);  line-height: var(--lh-4xl);  }

/* Roles seen in product */
.t-screen-title  { font-size: var(--fs-2xl); line-height: var(--lh-2xl); font-weight: 700; color: var(--fg-strong); }
.t-section-title { font-size: var(--fs-sm);  line-height: var(--lh-sm);  font-weight: 700; color: var(--fg); }
.t-product-name  { font-size: var(--fs-base);line-height: var(--lh-base);font-weight: 700; color: var(--fg-strong); }
.t-meta          { font-size: var(--fs-base);line-height: var(--lh-base);font-weight: 400; color: var(--fg-muted); }
.t-caption       { font-size: var(--fs-xs); line-height: var(--lh-xs); color: var(--fg-faint); }
.t-link          { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
.t-mono          { font-family: var(--font-mono); }