/* =========================================================
   JYOGA Studio — Colors & Type foundations
   覺瑜伽 · J YOGA · Namaste
   A calm, airy yoga studio based in Douliu, Yunlin, Taiwan.
   ========================================================= */

/* ---------- FONT IMPORTS ----------
   Substitutions (original fonts not provided):
   - Latin display (headlines like "GRAND OPENING"):
       substitute → Bebas Neue (condensed tall sans, all caps)
   - Latin body + "J YOGA" wordmark feel:
       substitute → Jost (geometric, wide-spaced humanist sans)
   - CJK (Traditional Chinese, 覺瑜伽, 期班, 瑜伽 & 舞蹈):
       substitute → Noto Sans TC (thin/light weights match the hand-traced logo)
   - CJK serif alternate for posters/headlines:
       substitute → Noto Serif TC
   Swap these out if original brand fonts are located.
-------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Jost:wght@300;400;500;600&family=Noto+Sans+TC:wght@200;300;400;500;700&family=Noto+Serif+TC:wght@300;400;500;700&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Primary — the teal-blue that fills the logo tile and storefront sky */
  --brand-teal-900: #1F6A87;
  --brand-teal-800: #2A7FA0;
  --brand-teal-700: #2D8AAE;   /* LOGO BG — hero primary */
  --brand-teal-600: #4A9EBE;
  --brand-teal-500: #7FB8CE;
  --brand-teal-400: #B8D4DC;   /* storefront upper-wall mist */
  --brand-teal-300: #D3E3E8;
  --brand-teal-200: #E6EEF1;
  --brand-teal-100: #F2F6F8;

  /* Accent — soft buttery yellow from the "YOGA" letters */
  --brand-sun-700: #E8C263;
  --brand-sun-500: #F2D58F;    /* LOGO ACCENT */
  --brand-sun-300: #F8E6B8;
  --brand-sun-100: #FCF5E2;

  /* Accent — hot pink/magenta ribbon from promo poster (celebration only) */
  --brand-pink-700: #C93668;
  --brand-pink-500: #E8477F;
  --brand-pink-300: #F28FAE;
  --brand-pink-100: #FCE4EC;

  /* Neutrals — warm off-whites, studio wall + wood */
  --neutral-white: #FFFFFF;
  --neutral-50:    #FAF7F2;    /* bg default, plaster wall */
  --neutral-100:   #F2EDE4;
  --neutral-200:   #E6DFD2;
  --neutral-300:   #CFC6B4;
  --neutral-400:   #A89E8A;
  --neutral-500:   #7E7564;
  --neutral-600:   #5C5448;
  --neutral-700:   #3E382F;
  --neutral-800:   #26221C;
  --neutral-900:   #14120F;

  /* Wood accent (door, yoga blocks) */
  --wood-500: #C9A67A;
  --wood-700: #9B7A52;

  /* ---------- SEMANTIC COLORS ---------- */
  --bg-page:         var(--neutral-50);
  --bg-surface:      var(--neutral-white);
  --bg-muted:        var(--brand-teal-100);
  --bg-inverse:      var(--brand-teal-700);

  --fg-1:            var(--neutral-800);  /* primary text */
  --fg-2:            var(--neutral-600);  /* secondary text */
  --fg-3:            var(--neutral-500);  /* tertiary / captions */
  --fg-muted:        var(--neutral-400);
  --fg-on-brand:     var(--neutral-white);
  --fg-link:         var(--brand-teal-700);
  --fg-link-hover:   var(--brand-teal-900);

  --border-1:        var(--neutral-200);
  --border-2:        var(--neutral-300);
  --border-brand:    var(--brand-teal-500);

  --accent:          var(--brand-teal-700);
  --accent-soft:     var(--brand-teal-400);
  --accent-warm:     var(--brand-sun-500);
  --accent-hot:      var(--brand-pink-500);

  --success:         #6BA368;
  --warning:         var(--brand-sun-700);
  --danger:          var(--brand-pink-700);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display-latin:  'Bebas Neue', 'Jost', system-ui, sans-serif;
  --font-display-cjk:    'Noto Serif TC', 'Noto Sans TC', serif;
  --font-sans-latin:     'Jost', 'Noto Sans TC', system-ui, sans-serif;
  --font-sans-cjk:       'Noto Sans TC', 'Jost', system-ui, sans-serif;
  --font-mono:           ui-monospace, 'SF Mono', Menlo, monospace;

  /* ---------- TYPE SCALE (modular, 1.25) ---------- */
  --fs-display-1: clamp(56px, 8vw, 96px);   /* "GRAND OPENING" */
  --fs-display-2: clamp(40px, 5vw, 64px);
  --fs-h1: 44px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-caption: 12px;
  --fs-overline: 11px;

  --lh-tight:   1.1;
  --lh-snug:    1.25;
  --lh-normal:  1.55;
  --lh-loose:   1.8;

  --ls-tight:   -0.02em;
  --ls-normal:  0;
  --ls-wide:    0.08em;    /* "J YOGA", "NAMASTE" wordmark spacing */
  --ls-widest:  0.32em;    /* overlines */

  /* ---------- SPACING ---------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- RADII ---------- */
  --r-none:  0;
  --r-sm:    4px;
  --r-md:    8px;
  --r-lg:    12px;
  --r-xl:    20px;
  --r-2xl:   32px;
  --r-pill:  9999px;

  /* ---------- SHADOWS (soft, low-contrast, never dark) ---------- */
  --shadow-sm: 0 1px 2px rgba(31, 106, 135, 0.06);
  --shadow-md: 0 4px 14px rgba(31, 106, 135, 0.08);
  --shadow-lg: 0 14px 32px rgba(31, 106, 135, 0.10);
  --shadow-inner: inset 0 1px 0 rgba(255,255,255,0.6);

  /* ---------- MOTION ---------- */
  --ease-out:    cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    120ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
}

/* =========================================================
   SEMANTIC TYPE CLASSES
   ========================================================= */

.display-1, .display-2 {
  font-family: var(--font-display-latin);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-normal);
  color: var(--fg-1);
}
.display-1 { font-size: var(--fs-display-1); }
.display-2 { font-size: var(--fs-display-2); }

/* CJK display — thin, traced, airy; mimics the hand-drawn logo 覺瑜伽 */
.display-cjk {
  font-family: var(--font-display-cjk);
  font-weight: 300;
  font-size: var(--fs-display-1);
  letter-spacing: 0.12em;
  color: var(--fg-1);
  line-height: 1.15;
}

h1, .h1 {
  font-family: var(--font-sans-latin);
  font-weight: 400;
  font-size: var(--fs-h1);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-tight);
  color: var(--fg-1);
}
h2, .h2 {
  font-family: var(--font-sans-latin);
  font-weight: 500;
  font-size: var(--fs-h2);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h3, .h3 {
  font-family: var(--font-sans-latin);
  font-weight: 500;
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}
h4, .h4 {
  font-family: var(--font-sans-latin);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  color: var(--fg-1);
}

/* The J YOGA wordmark — wide-tracked, thin, all-caps */
.wordmark {
  font-family: var(--font-sans-latin);
  font-weight: 300;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-1);
}
.wordmark--sub {
  font-size: 0.7em;
  letter-spacing: var(--ls-widest);
  color: var(--fg-2);
}

p, .body {
  font-family: var(--font-sans-cjk);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  text-wrap: pretty;
}
.body-lg { font-size: var(--fs-body-lg); }
.body-sm { font-size: var(--fs-body-sm); color: var(--fg-2); }

.caption {
  font-family: var(--font-sans-cjk);
  font-size: var(--fs-caption);
  color: var(--fg-3);
  line-height: var(--lh-snug);
}

.overline {
  font-family: var(--font-sans-latin);
  font-size: var(--fs-overline);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--fg-3);
  font-weight: 500;
}

/* Price numeral treatment — thin, tall, with tiny caps unit (NT.250 /堂) */
.price {
  font-family: var(--font-sans-latin);
  font-weight: 300;
  font-size: 40px;
  letter-spacing: -0.01em;
  color: var(--fg-1);
}
.price__unit {
  font-size: 12px;
  letter-spacing: var(--ls-wide);
  color: var(--fg-3);
  text-transform: uppercase;
  margin-left: 4px;
}

code, .mono {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-muted);
  padding: 0.1em 0.35em;
  border-radius: var(--r-sm);
  color: var(--brand-teal-900);
}

a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--fg-link-hover); }

/* Base body */
html, body {
  background: var(--bg-page);
  color: var(--fg-1);
  font-family: var(--font-sans-cjk);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}