/* ============================================================
   SHIZU — Colors & Type Tokens
   Smart Bathroom Systems · Tbilisi

   Primary type: DM Sans (variable, opsz + wght) — self-hosted from /fonts.
   Georgian: Noto Sans Georgian — Google Fonts CDN.
   ============================================================ */

@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/DMSans-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'DM Sans';
  src: url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype-variations'),
       url('fonts/DMSans-Italic-VariableFont_opsz_wght.ttf') format('truetype');
  font-weight: 100 1000;
  font-style: italic;
  font-display: swap;
}

/* Same family, upgraded delivery: the variable wght axis (100–900) replaces the
   five static instances so Georgian type can use true intermediate weights
   (460 body, 620 titles, 750 display) without faux-bold synthesis. */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Georgian:wght@100..900&display=swap');

:root {
  /* ---------- BRAND COLORS ---------- */
  /* Primary: Teal — drawn from the SHIZU droplet gradient.
     "Shizu" (水) means water in Japanese. */
  --teal:           #0D4C4B;  /* deep teal — primary brand, headings, CTAs */
  --teal-light:     #2D6E6C;  /* mid teal — hover, secondary surfaces */
  --teal-accent:    #7FD9D9;  /* aqua highlight — gradients, footer accents */
  --menthol:        #E8F3F1;  /* soft pale-teal — section backgrounds, chips */
  --navy:           #152438;  /* night-mode background — pairs with teal-accent */

  /* Accent: Gold — used sparingly for eyebrow labels & primary CTAs */
  --gold:           #C9A96E;
  --gold-light:     #E8D7A8;
  --gold-hover:     #B8975D;

  /* Surfaces */
  --pure-white:     #FFFFFF;
  --white:          #FAFAFA;  /* page background */
  --charcoal:       #222222;  /* default body text */
  --ink:            #1A1A1A;  /* deepest text / dark surfaces */

  /* Neutrals */
  --gray-600:       #6B7280;  /* secondary text */
  --gray-400:       #9CA3AF;  /* tertiary text, placeholders */
  --gray-200:       #E5E5EA;  /* borders, dividers */
  --gray-100:       #F4F4F6;  /* subtle fills */

  /* Semantic — harmonized with the teal / menthol family. Each has a
     "soft" tint for use as a background fill, paired with the saturated
     hue for icons / text / borders. */
  --success:        #2E9B7E;  /* sea-green — green-leading with teal undertones */
  --success-soft:   #DCF1E9;  /* pale mint — success backgrounds */
  --warning:        #C9A96E;  /* re-uses gold */
  --warning-soft:   #F5EAD1;  /* pale gold tint */
  --danger:         #C84A3E;  /* terracotta-red — red-leading, warm, plays with gold */
  --danger-soft:    #F8E2DD;  /* pale coral — danger backgrounds */

  /* Bank of Georgia brand palette (used on the simulated checkout) */
  --bog-orange:     #FC671A;  /* BoG primary brand — checkout CTA */
  --bog-orange-h:   #E45810;  /* hover */
  --bog-tundora:    #4B4B4B;  /* BoG dark gray — secondary text */
  --bog-alabaster:  #FCFCFC;  /* BoG light surface — page background */

  /* ---------- TYPOGRAPHY ---------- */
  --font-sans:      'DM Sans', 'Noto Sans Georgian', system-ui, sans-serif;
  --font-georgian:  'Noto Sans Georgian', 'DM Sans', sans-serif;

  /* Display face — DM Sans (the project's self-hosted primary type) at heavy
     weights for Latin; Georgian glyphs auto-fall back to Noto Sans Georgian,
     and :lang(ka) rules retune size/line-height/tracking to match footprint. */
  --font-display:    'DM Sans', 'Noto Sans Georgian', system-ui, sans-serif;
  --font-display-ka: 'Noto Sans Georgian', 'DM Sans', system-ui, sans-serif;

  /* Type scale */
  --fs-display:     clamp(36px, 6vw, 64px); /* @kind font */  /* hero */
  --fs-h1:          clamp(30px, 5vw, 48px); /* @kind font */  /* page-hero h1 */
  --fs-h2:          clamp(28px, 4vw, 40px); /* @kind font */  /* section title */
  --fs-h3:          22px;
  --fs-h4:          17px;
  --fs-body:        15px;
  --fs-body-sm:     14px;
  --fs-caption:     13px;
  --fs-label:       11px;   /* uppercase eyebrows */
  --fs-tiny:        10px;

  --lh-tight:       1.1;    /* @kind font */
  --lh-snug:        1.3;    /* @kind font */
  --lh-base:        1.6;    /* @kind font */
  --lh-relaxed:     1.75;   /* @kind font */

  --tracking-tight: -1px;     /* display */
  --tracking-h:     -0.5px;   /* h1-h2 */
  --tracking-label: 4px;      /* eyebrows */
  --tracking-cap:   2px;      /* small caps labels */

  /* ---------- SPACING & RADIUS ---------- */
  --r-sm:           6px;   /* tags, mini buttons */
  --r-md:           8px;   /* buttons, inputs */
  --r-lg:           10px;  /* faq items, info blocks */
  --r-xl:           14px;  /* product cards, blog cards */
  --r-2xl:          16px;  /* benefit cards, modals */
  --r-pill:         24px;  /* filter pills */
  --r-full:         9999px;

  --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;

  /* ---------- SHADOWS ----------
     All shadows are teal-tinted (rgba(13,76,75,...)) to keep the
     brand cohesion vs neutral gray drop-shadows. */
  --shadow-sm:      0 1px 3px rgba(13,76,75,0.04);
  --shadow-md:      0 4px 16px rgba(13,76,75,0.07);
  --shadow-lg:      0 8px 32px rgba(13,76,75,0.10);
  --shadow-xl:      0 12px 48px rgba(13,76,75,0.14);
  --shadow-gold:    0 6px 20px rgba(201, 169, 110, 0.4);  /* primary-btn hover */
  --shadow-bog:     0 6px 20px rgba(252, 103, 26, 0.4);    /* BoG orange checkout button */

  /* ---------- MOTION ---------- */
  --ease:           cubic-bezier(0.4, 0, 0.2, 1);   /* @kind other */
  --dur-fast:       0.2s;   /* @kind other */
  --dur-base:       0.3s;   /* @kind other */
  --dur-slow:       0.5s;   /* @kind other */

  /* ---------- LAYOUT ---------- */
  --container:      1200px;
  --container-pad:  24px;
  --header-h:       68px;
}

/* ============================================================
   SEMANTIC ELEMENT STYLES
   Apply to body or any descendant scope to get default branding.
   ============================================================ */

body {
  font-family: var(--font-sans);
  color: var(--charcoal);
  background: var(--white);
  line-height: var(--lh-base);
  -webkit-font-smoothing: antialiased;
  font-size: var(--fs-body);
}
body[data-lang="ka"],
[lang="ka"] {
  font-family: var(--font-georgian);
}

/* Headings — sizes & weights only.
   Color is intentionally NOT set globally; components set their own
   so headings can live on light, menthol, hero (teal), or ink (footer/BoG checkout)
   surfaces without override gymnastics. Default body color cascades when no
   explicit color is given. */
h1, .h1 {
  font-size: var(--fs-h1);
  font-weight: 700;
  letter-spacing: var(--tracking-h);
  line-height: var(--lh-snug);
}
h2, .h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--tracking-h);
  line-height: 1.2;
}
h3, .h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.4;
}
h4, .h4 {
  font-size: var(--fs-h4);
  font-weight: 600;
}

.display {
  font-size: var(--fs-display);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
}

/* Body copy */
p {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--gray-600);
}
.lead {
  font-size: 17px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--gray-600);
}

/* Eyebrow label (all-caps, tight tracking) — used above every section title */
.eyebrow,
.section-label {
  font-size: var(--fs-label);
  letter-spacing: var(--tracking-label);
  font-weight: 500;
  color: var(--gold);
  text-transform: uppercase;
}

/* Small caps form label */
.label-caps {
  font-size: var(--fs-tiny);
  letter-spacing: var(--tracking-cap);
  font-weight: 600;
  color: var(--gray-600);
  text-transform: uppercase;
}

/* Code / mono — rarely used, but defined for completeness */
code, kbd, samp {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.92em;
  background: var(--gray-100);
  padding: 2px 6px;
  border-radius: 4px;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--dur-fast) var(--ease);
}
a:hover {
  color: var(--teal);
}