/* Keiko Eyewear — base element styles & helpers.
   Lightweight resets + brand defaults. Scoped helpers, not a framework. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--lh-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* RTL support for Arabic */
[dir="rtl"] {
  font-family: var(--font-arabic-body);
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] .k-display, [dir="rtl"] .k-eyebrow {
  font-family: var(--font-arabic-display);
}
[lang="zh"], [dir="rtl"] { letter-spacing: 0; }

/* ----- Display / heading helpers ----- */
.k-display {
  font-family: var(--font-display);
  font-weight: var(--fw-medium);
  font-size: var(--text-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-display);
  color: var(--text-strong);
}
.k-h1 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-display); color: var(--text-strong); }
.k-h2 { font-family: var(--font-display); font-weight: var(--fw-medium); font-size: var(--text-h2); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text-strong); }
.k-h3 { font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--text-h3); line-height: var(--lh-snug); color: var(--text-strong); }
.k-h4 { font-family: var(--font-body); font-weight: var(--fw-semibold); font-size: var(--text-h4); line-height: var(--lh-snug); color: var(--text-strong); }

.k-lead { font-size: var(--text-lead); line-height: var(--lh-relaxed); color: var(--text-body); }

/* Emphasis word inside a serif headline — gold italic, the brand signature */
.k-accent-word { color: var(--gold-600); font-style: italic; }
[dir="rtl"] .k-accent-word, [lang="zh"] .k-accent-word { font-style: normal; }

/* Eyebrow / kicker label */
.k-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-eyebrow);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--text-accent);
}
[dir="rtl"] .k-eyebrow { letter-spacing: 0.06em; }

a { color: var(--text-link); text-decoration: none; }
a:hover { color: var(--teal-800); }

/* ----- Layout helpers ----- */
.k-container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.k-section { padding-block: var(--section-y); }

/* ----- Chevron motif (KK isotipo as decorative graphic) ----- */
.k-chevron {
  display: inline-block;
  width: 1em; height: 1em;
  background: currentColor;
  clip-path: var(--chevron-clip);
}

::selection { background: var(--gold-300); color: var(--teal-900); }

:focus-visible { outline: var(--bw-2) solid var(--focus-ring); outline-offset: 2px; }