/* =============================================================
   ULife Design System — Colors & Type
   LINE LIFF wellness commerce app (by RS Group)
   Brands: ULife (ยูไลฟ์), aviance (อาวียองซ์), beyonde (บียอนด์)
   Primary typeface: Kanit (Thai + Latin). Secondary: Mulish.
   Load fonts: Google Fonts (see @import below) — exact matches.
   ============================================================= */

/* Mulish stays on Google Fonts (no local file uploaded). Kanit is self-hosted below. */
@import url('https://fonts.googleapis.com/css2?family=Mulish:wght@300;400;600;700&display=swap');

/* ---- Kanit (brand-uploaded, self-hosted) ---- */
@font-face { font-family:'Kanit'; font-weight:100; font-style:normal; font-display:swap; src:url('fonts/Kanit-Thin.ttf') format('truetype'); }
@font-face { font-family:'Kanit'; font-weight:100; font-style:italic; font-display:swap; src:url('fonts/Kanit-ThinItalic.ttf') format('truetype'); }
@font-face { font-family:'Kanit'; font-weight:200; font-style:normal; font-display:swap; src:url('fonts/Kanit-ExtraLight.ttf') format('truetype'); }
@font-face { font-family:'Kanit'; font-weight:200; font-style:italic; font-display:swap; src:url('fonts/Kanit-ExtraLightItalic.ttf') format('truetype'); }
@font-face { font-family:'Kanit'; font-weight:300; font-style:normal; font-display:swap; src:url('fonts/Kanit-Light.ttf') format('truetype'); }
@font-face { font-family:'Kanit'; font-weight:300; font-style:italic; font-display:swap; src:url('fonts/Kanit-LightItalic.ttf') format('truetype'); }
@font-face { font-family:'Kanit'; font-weight:400; font-style:normal; font-display:swap; src:url('fonts/Kanit-Regular.ttf') format('truetype'); }
@font-face { font-family:'Kanit'; font-weight:400; font-style:italic; font-display:swap; src:url('fonts/Kanit-Italic.ttf') format('truetype'); }
@font-face { font-family:'Kanit'; font-weight:500; font-style:normal; font-display:swap; src:url('fonts/Kanit-Medium.ttf') format('truetype'); }
@font-face { font-family:'Kanit'; font-weight:500; font-style:italic; font-display:swap; src:url('fonts/Kanit-MediumItalic.ttf') format('truetype'); }
@font-face { font-family:'Kanit'; font-weight:600; font-style:normal; font-display:swap; src:url('fonts/Kanit-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Kanit'; font-weight:600; font-style:italic; font-display:swap; src:url('fonts/Kanit-SemiBoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Kanit'; font-weight:700; font-style:normal; font-display:swap; src:url('fonts/Kanit-Bold.ttf') format('truetype'); }
@font-face { font-family:'Kanit'; font-weight:700; font-style:italic; font-display:swap; src:url('fonts/Kanit-BoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Kanit'; font-weight:800; font-style:normal; font-display:swap; src:url('fonts/Kanit-ExtraBold.ttf') format('truetype'); }
@font-face { font-family:'Kanit'; font-weight:800; font-style:italic; font-display:swap; src:url('fonts/Kanit-ExtraBoldItalic.ttf') format('truetype'); }
@font-face { font-family:'Kanit'; font-weight:900; font-style:normal; font-display:swap; src:url('fonts/Kanit-Black.ttf') format('truetype'); }
@font-face { font-family:'Kanit'; font-weight:900; font-style:italic; font-display:swap; src:url('fonts/Kanit-BlackItalic.ttf') format('truetype'); }

:root {
  /* ---- Brand ---- */
  --brand-purple:      #6446F0;  /* logo wordmark, links, accents      */
  --brand-lavender:    #9179FF;  /* PRIMARY action button              */
  --brand-purple-deep: #6242BA;  /* pressed / deep accents             */
  --brand-slate:       #524D68;  /* circular add-to-cart, dark chips   */

  /* purple surfaces & tints */
  --purple-50:  #F4F2FF;  /* footer band, info strips, soft fills      */
  --purple-100: #DCD0FE;  /* highlight chips, progress fills           */

  /* ---- Channel / partner ---- */
  --line-green:  #06C755; /* LINE login + @ULifespace                  */
  --fb-blue:     #3677E5; /* Facebook login                            */

  /* ---- Sub-brand accents ---- */
  --gold-light:  #FFE89E; /* Longevity / promo gradient start          */
  --gold:        #FFB747;
  --gold-deep:   #FF9003; /* Longevity / promo gradient end            */
  --science-blue-1: #2B5EFF; /* beyonde "Longevity Science" banner     */
  --science-blue-2: #0035DA;

  /* ---- Semantic state ---- */
  --sale-red:    #E52E2E; /* Special Offer badge, strike savings       */
  --success:     #06C755;

  /* gradients */
  --grad-gold:    linear-gradient(180deg, var(--gold-light) 0%, var(--gold-deep) 100%);
  --grad-science: linear-gradient(180deg, var(--science-blue-1) 0%, var(--science-blue-2) 100%);
  --grad-scrim:   linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); /* image protection */

  /* ---- Neutrals / ink ---- */
  --ink-900: #000000;  /* primary headings, prices                     */
  --ink-800: #1D1D1F;  /* near-black body                              */
  --ink-700: #333333;  /* secondary text, strike price                 */
  --ink-500: #666666;  /* placeholder / muted                          */
  --ink-400: #999999;  /* captions, eyebrow labels                     */

  /* ---- Surfaces ---- */
  --bg-page:    #F9F9FD;  /* app background                            */
  --surface:    #FFFFFF;  /* cards, sheets, nav                        */
  --surface-2:  #F8F8F8;
  --surface-3:  #F4F4F4;  /* inset price pill, chips                   */
  --placeholder:#D9D9D9;  /* image placeholder block                   */

  /* ---- Borders / dividers ---- */
  --border:        #DEDEDE;  /* chip + control outlines                */
  --border-soft:   #E1E1E1;  /* footer dividers                        */
  --border-strong: #D2D2D2;  /* search field                          */
  --border-input:  #999999;  /* form field outline                    */
  --hairline:      rgba(0,0,0,0.5);

  /* glass top-nav over imagery */
  --glass-fill: rgba(0,0,0,0.25);
  --glass-blur: blur(40px);

  /* ---- Typography ---- */
  --font-primary: 'Kanit', system-ui, sans-serif;     /* Thai + Latin  */
  --font-secondary: 'Mulish', system-ui, sans-serif;  /* Latin support */

  --fw-extralight: 200;
  --fw-light: 300;   /* the workhorse body weight in ULife            */
  --fw-regular: 400; /* headings / section titles                     */
  --fw-medium: 500;  /* active price, emphasis                        */
  --fw-semibold: 600;

  /* type scale (px) */
  --t-display: 30px; /* "Longevity / Skin & Hair" hero heads          */
  --t-h1: 24px;
  --t-h2: 20px;
  --t-h3: 18px;      /* section titles ("Best Seller")                */
  --t-body: 16px;
  --t-sm: 14px;      /* most labels, buttons, body copy               */
  --t-xs: 12px;      /* captions, CV/QV, "ดูทั้งหมด"                    */
  --t-2xs: 10px;     /* badges                                        */

  --lh-tight: 100%;
  --lh-snug: 1.375;  /* ~22px on 16px body                            */
  --ls-wide: 0.02em; /* button + nav letter-spacing                   */

  /* ---- Radii ---- */
  --r-input: 5px;
  --r-img: 10px;
  --r-card: 15px;
  --r-badge: 20px;
  --r-pill: 30px;
  --r-button: 50px;  /* fully-rounded CTAs                            */
  --r-circle: 50%;

  /* ---- Elevation ---- */
  --shadow-card:  0 0 15px 0 rgba(0,0,0,0.06); /* product / content cards */
  --shadow-soft:  0 0 10px 0 rgba(0,0,0,0.06);
  --shadow-pop:   0 4px 20px 0 rgba(0,0,0,0.10);

  /* ---- Spacing (4-based; app commonly uses 5/10/15/20) ---- */
  --sp-1: 5px;
  --sp-2: 10px;
  --sp-3: 15px;
  --sp-4: 20px;
  --sp-5: 30px;

  /* motion */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur: 180ms;
}

/* ============ Semantic element helpers ============ */
.u-display { font-family: var(--font-primary); font-weight: var(--fw-regular);
  font-size: var(--t-display); line-height: 38px; letter-spacing: var(--ls-wide); color: var(--ink-900); }
.u-h1 { font-family: var(--font-primary); font-weight: var(--fw-regular); font-size: var(--t-h1);
  line-height: var(--lh-tight); color: var(--ink-900); }
.u-h3 { font-family: var(--font-primary); font-weight: var(--fw-regular); font-size: var(--t-h3);
  line-height: var(--lh-tight); color: var(--ink-900); }   /* section title */
.u-body { font-family: var(--font-primary); font-weight: var(--fw-light); font-size: var(--t-body);
  line-height: var(--lh-snug); color: var(--ink-800); }
.u-sm { font-family: var(--font-primary); font-weight: var(--fw-light); font-size: var(--t-sm);
  line-height: 1.5; color: var(--ink-800); }
.u-caption { font-family: var(--font-primary); font-weight: var(--fw-light); font-size: var(--t-xs);
  line-height: var(--lh-tight); color: var(--ink-400); }
.u-link { color: var(--ink-700); font-size: var(--t-xs); cursor: pointer; }   /* "ดูทั้งหมด" see-all */

/* ============ Buttons ============ */
.u-btn { font-family: var(--font-primary); font-size: var(--t-sm); font-weight: var(--fw-regular);
  letter-spacing: var(--ls-wide); border-radius: var(--r-button); border: 0; cursor: pointer;
  padding: 12px 24px; transition: filter var(--dur) var(--ease), transform var(--dur) var(--ease); }
.u-btn--primary  { background: var(--brand-lavender); color: #fff; }
.u-btn--outline  { background: transparent; color: var(--ink-900); border: 1px solid var(--ink-900); }
.u-btn:hover  { filter: brightness(0.96); }
.u-btn:active { transform: scale(0.98); filter: brightness(0.92); }