/* ============================================================
   SHIZU — Georgian typography layer  (ka-type.css)
   ------------------------------------------------------------
   Active ONLY under html[lang="ka"] (App.jsx sets it on toggle).
   Same fonts, same layout, same logic — this file only retunes
   weight, leading, tracking, contrast and a few quiet accents
   so Mkhedruli reads as confident and premium as the Latin set.

   Design stance: quiet luxury.
     · true variable weights (460 body · 620 titles · 750 display)
     · NO wide tracking on Georgian body text (max 0.07em, labels only)
     · glow is reserved for headings on DARK surfaces, always
       fainter than the text itself; day-theme light surfaces
       get sharper ink instead of glow
     · gradients only where an accent already exists (<em>)

   Reusable roles — for any future Georgian text, either rely on
   the automatic element/class mapping below or use the utility
   classes at the end: .ka-display .ka-heading .ka-title .ka-body
   .ka-label .ka-accent .ka-accent-deep
   ============================================================ */

/* ── 1 · TOKENS ─────────────────────────────────────────────── */
html[lang="ka"] {
  /* weight scale (variable axis — real instances, no faux bold) */
  --ka-w-display: 750;   /* hero display lines            */
  --ka-w-heading: 720;   /* section headings h1/h2        */
  --ka-w-title:   620;   /* card & panel titles h3/h4     */
  --ka-w-body:    460;   /* paragraphs                    */
  --ka-w-label:   600;   /* eyebrows, small caps labels   */
  --ka-w-btn:     620;   /* buttons                       */

  /* leading */
  --ka-lh-display: 1.14;
  --ka-lh-heading: 1.22;
  --ka-lh-title:   1.35;
  --ka-lh-body:    1.75;

  /* tracking — Georgian hates wide letter-spacing */
  --ka-track-display: -0.01em;
  --ka-track-heading: -0.008em;
  --ka-track-title:   -0.004em;
  --ka-track-body:     0;
  --ka-track-label:    0.07em;   /* hard ceiling 0.08em */

  /* glow — always dimmer than the glyphs; dark surfaces only */
  --ka-glow-display: 0 1px 1px rgba(4, 18, 26, 0.22),
                     0 0 22px rgba(125, 230, 230, 0.16);
  --ka-glow-ondark:  0 0 16px rgba(125, 230, 230, 0.14);
  --ka-glow-adaptive: none;                /* day: sharp ink, no bloom */

  /* accent gradients */
  --ka-grad-bright: linear-gradient(92deg, #A7F3F3 0%, #5FD6DA 100%); /* on dark */
  --ka-grad-deep:   linear-gradient(92deg, #0D4C4B 0%, #2E8C8F 100%); /* on light */

  /* contrast — Georgian muted text runs one step richer.
     --gray-600 feeds --fg-muted on day, so every secondary
     paragraph site-wide inherits this automatically. */
  --gray-600: #566270;
}
html[lang="ka"][data-theme="night"] {
  --fg-muted: #A8C0BF;
  --ka-glow-adaptive: var(--ka-glow-ondark);   /* night: faint aqua bloom */
}

/* ── 2 · DISPLAY — hero ─────────────────────────────────────── */
/* Size / min-height stay in styles.css (anti-shift anchor). */
html[lang="ka"] .hero-title {
  font-weight: var(--ka-w-display);
  line-height: var(--ka-lh-display);
  letter-spacing: var(--ka-track-display);
  text-shadow: var(--ka-glow-display);      /* hero sits on dark water in both themes */
}
html[lang="ka"] .hero-sub {
  font-weight: var(--ka-w-body);
  line-height: 1.72;
  letter-spacing: 0;
}
html[lang="ka"] .hero-eyebrow {
  letter-spacing: var(--ka-track-label);    /* was 0.2em — far too wide for Mkhedruli */
  font-weight: var(--ka-w-label);
}

/* ── 3 · HEADINGS ───────────────────────────────────────────── */
/* Baseline: every Georgian heading inherits confident weight +
   calmer leading + near-zero tracking, current and future. */
html[lang="ka"] h1,
html[lang="ka"] h2 {
  font-weight: var(--ka-w-heading);
  line-height: var(--ka-lh-heading);
  letter-spacing: var(--ka-track-heading);
}
html[lang="ka"] h3,
html[lang="ka"] h4,
html[lang="ka"] h5 {
  line-height: var(--ka-lh-title);
  letter-spacing: var(--ka-track-title);
}

/* Section headings — sharp ink on day, faint aqua bloom on night */
html[lang="ka"] .section-title,
html[lang="ka"] .compare-head h3,
html[lang="ka"] .faq-contact h2,
html[lang="ka"] .blog-newsletter h2,
html[lang="ka"] .blog-featured-body h2 {
  font-weight: var(--ka-w-heading);
  text-shadow: var(--ka-glow-adaptive);
}

/* Headings that live on permanently dark panels — quiet glow always */
html[lang="ka"] .ritual-title,
html[lang="ka"] .about-cta h2,
html[lang="ka"] .newsletter-box h2 {
  font-weight: var(--ka-w-heading);
  line-height: var(--ka-lh-heading);
  text-shadow: var(--ka-glow-ondark);
}

/* Statement strip — editorial pull-quote, calm and unglowing */
html[lang="ka"] .statement-quote {
  font-weight: 540;
  line-height: 1.55;
  letter-spacing: 0;
}

/* ── 4 · CARD & PANEL TITLES ────────────────────────────────── */
html[lang="ka"] .benefit-card h3,
html[lang="ka"] .focus-card h3,
html[lang="ka"] .product-card-name,
html[lang="ka"] .blog-card h3,
html[lang="ka"] .cross-sell-head h3,
html[lang="ka"] .cart-summary h3,
html[lang="ka"] .cart-empty h3,
html[lang="ka"] .cf-title,
html[lang="ka"] .trust-chip-title {
  font-weight: var(--ka-w-title);
  letter-spacing: var(--ka-track-title);
}
html[lang="ka"] .pd-title {
  font-weight: var(--ka-w-heading);
  line-height: 1.25;
  letter-spacing: var(--ka-track-heading);
  margin-bottom: 14px;               /* +2px breath before the tagline */
}
html[lang="ka"] .faq-q { font-weight: var(--ka-w-title); line-height: 1.45; }
html[lang="ka"] .cf-title { margin-bottom: 10px; }
html[lang="ka"] .newsletter-box h2 { margin-bottom: 10px; }

/* ── 5 · PARAGRAPHS — calm, readable, slightly richer ink ───── */
/* (.about-lead / .legal-p / .faq-a keep their looser tuned leading
   from styles.css — intentionally not overridden here.) */
html[lang="ka"] .benefit-card p,
html[lang="ka"] .focus-card p,
html[lang="ka"] .ritual-lede,
html[lang="ka"] .blog-excerpt,
html[lang="ka"] .cf-sub,
html[lang="ka"] .compare-head p,
html[lang="ka"] .faq-contact p,
html[lang="ka"] .blog-newsletter p,
html[lang="ka"] .newsletter-box p,
html[lang="ka"] .about-cta p,
html[lang="ka"] .cart-empty p,
html[lang="ka"] .pd-tagline {
  font-weight: var(--ka-w-body);
  line-height: var(--ka-lh-body);
  letter-spacing: var(--ka-track-body);
}
html[lang="ka"] .footer-col p,
html[lang="ka"] .footer-col a,
html[lang="ka"] .footer-col button { color: rgba(255, 255, 255, 0.78); }

/* ── 6 · LABELS & BUTTONS — weight up, tracking reined in ───── */
/* Every wide-tracked uppercase label collapses to ≤0.07em. */
html[lang="ka"] .section-label,
html[lang="ka"] .ritual-eyebrow,
html[lang="ka"] .statement-byline,
html[lang="ka"] .footer-label,
html[lang="ka"] .pd-category,
html[lang="ka"] .pd-specs-head,
html[lang="ka"] .contact-method-label,
html[lang="ka"] .cf-label,
html[lang="ka"] .product-card-category,
html[lang="ka"] .bog-method-label,
html[lang="ka"] .po-section-title,
html[lang="ka"] .po-review-label,
html[lang="ka"] .po-included-head,
html[lang="ka"] .blog-cover-cat,
html[lang="ka"] .blog-badge,
html[lang="ka"] .faq-tag,
html[lang="ka"] .hero-panel-eyebrow,
html[lang="ka"] .shizu-tag-name,
html[lang="ka"] .shizu-tag-idx {
  letter-spacing: var(--ka-track-label);
  font-weight: var(--ka-w-label);
}
html[lang="ka"] .btn { font-weight: var(--ka-w-btn); letter-spacing: 0.015em; }
html[lang="ka"] .nav-link { font-weight: 540; }

/* ── 7 · ACCENT / HIGHLIGHT WORDS ───────────────────────────── */
/* Gradient ink only where an <em> accent already exists; solid
   color stays as fallback where background-clip is unsupported. */
@supports (-webkit-background-clip: text) or (background-clip: text) {
  /* on dark water / dark panels — bright aqua */
  html[lang="ka"] .hero-title em,
  html[lang="ka"] .ritual-title em,
  html[lang="ka"][data-water="on"] .ritual-title em,   /* outranks water.css gold */
  html[lang="ka"][data-theme="night"] .statement-quote em {
    background: var(--ka-grad-bright);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
  /* water.css sets the ritual accent gold with !important — match priority,
     win on specificity, so the gradient actually shows */
  html[lang="ka"][data-water="on"] .ritual-title em { color: transparent !important; }
  /* on light day surfaces — deep teal, keeps contrast */
  html[lang="ka"] .statement-quote em {
    background: var(--ka-grad-deep);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }
}
/* glow under the hero accent stays dimmer than the glyphs */
html[lang="ka"] .hero-title em { text-shadow: 0 0 20px rgba(125, 230, 230, 0.22); }

/* ── 8 · REUSABLE UTILITIES — for future Georgian content ───── */
/* Inert in EN mode; apply to any new element in KA mode. */

/* ── 9 · PRINT — no glow on paper ───────────────────────────── */
@media print {
  html[lang="ka"] * { text-shadow: none !important; }
}