/* Client token starter. Apply the exact scale, shape, depth and motion from docs/03-design-spec.md before acceptance. */

:root {
  color-scheme: light;
  /* colour — from project.json.design.palette */
  --c-bg: #E7E4DC;
  --c-surface: #F7F5F0;
  --c-ink: #1B2040;
  --c-muted: #4C5270;
  --c-accent: #3947A0;
  --c-accent-ink: #FFFFFF;
  --c-line: #CFCABC;
  --c-tint: #D8DCEC;

  /* type - EN families from project.json.design.fonts */
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Karla", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* the brand wordmark is Latin in every language (docs/03-design-spec.md §5) */
  --font-brand: "Cormorant Garamond", Georgia, serif;

  /* SI/TA families from project.json.design.fonts. Keep these separate so
     native switcher labels remain readable while another language is active.
     Named local families follow the authored family so fallback rendering keeps
     full glyph coverage (a generic serif/sans fallback can push a few Tamil or
     Sinhala glyphs to a metric-incompatible face and re-wrap whole lines). */
  --font-si-body: "Noto Sans Sinhala", system-ui, "Iskoola Pota", "Nirmala UI", sans-serif;
  --font-si-display: "Noto Serif Sinhala", "Noto Serif Sinhala Fallback", "Iskoola Pota", "Nirmala UI", serif;
  --font-ta-body: "Noto Sans Tamil", system-ui, "Noto Sans Tamil Fallback", "Nirmala UI", "Latha", sans-serif;
  --font-ta-display: "Noto Serif Tamil", "Noto Serif Tamil Fallback", "Nirmala UI", "Latha", serif;

  --fs-0: clamp(0.875rem, 0.85rem + 0.2vw, 0.95rem);
  --fs-1: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --fs-2: clamp(1.25rem, 1.1rem + 0.8vw, 1.5rem);
  --fs-3: clamp(1.6rem, 1.3rem + 1.6vw, 2.25rem);
  --fs-4: clamp(2.2rem, 1.6rem + 3.2vw, 4rem);
  --lh-body: 1.55;
  --lh-heading: 1.12;
  --scale-heading: 1;

  /* space (4-pt) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-6: 1.5rem; --s-8: 2rem;
  --s-12: 3rem; --s-16: 4rem; --s-24: 6rem;

  /* shape + depth - ONE radius family per project */
  --r-sm: 0; --r-md: 0; --r-lg: 0;
  --shadow-1: 0 10px 28px rgb(27 32 64 / .16); /* lightbox only */
  --shadow-2: none;

  /* motion */
  --t-fast: 150ms; --t-base: 240ms; --t-hero: 520ms; --ease: cubic-bezier(.2, .7, .2, 1);

  /* signature: Jaffna old-shop floor tile, 16px strip, the only section divider */
  --checker-size: 16px;

  /* layout */
  --max-w: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);
  --sticky-cta-h: 4rem;
}

/* Sinhala / Tamil overrides - docs/I18N.md §4 */
html[data-lang="si"] {
  --font-body: var(--font-si-body);
  --font-display: var(--font-si-display);
}
html[data-lang="ta"] {
  --font-body: var(--font-ta-body);
  --font-display: var(--font-ta-display);
}

/* Metric-matched native fallbacks. While the Noto webfonts load, the local
   Tamil/Sinhala faces on this QA host render wider than the authored families
   (measured here: Tamil display 99%, Tamil body 97%, Sinhala display 96% of
   the authored advance widths), which re-wraps translated headlines and moves
   the hero panel after fonts arrive. size-adjust keeps the fallback close to
   the authored metrics so native text does not re-flow during load; the
   webfonts still take precedence once available. */
@font-face {
  font-family: "Noto Serif Tamil Fallback";
  src: local("Nirmala UI"), local("Latha"), local("Noto Sans Tamil"), local("Tamil Sangam MN");
  size-adjust: 96%;
}
@font-face {
  font-family: "Noto Sans Tamil Fallback";
  src: local("Nirmala UI"), local("Latha"), local("Noto Sans Tamil"), local("Tamil Sangam MN");
  size-adjust: 97%;
}
@font-face {
  font-family: "Noto Serif Sinhala Fallback";
  src: local("Iskoola Pota"), local("Nirmala UI"), local("Noto Sans Sinhala"), local("Sinhala Sangam MN");
  size-adjust: 96%;
}
html[data-lang="si"],
html[data-lang="ta"] {
  --lh-body: 1.75;
  --lh-heading: 1.25;
  --scale-heading: 0.9;
  letter-spacing: 0;
}

/* Base */
html { scroll-behavior: smooth; scroll-padding-top: var(--header-h, 4.5rem); scroll-padding-bottom: var(--sticky-cta-h); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0; background: var(--c-bg); color: var(--c-ink);
  font-family: var(--font-body); font-size: var(--fs-1); line-height: var(--lh-body);
  -webkit-text-size-adjust: 100%; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
h1, h2, h3 { font-family: var(--font-display); line-height: var(--lh-heading); text-wrap: balance; margin: 0; }
h1 { font-size: calc(var(--fs-4) * var(--scale-heading)); }
h2 { font-size: calc(var(--fs-3) * var(--scale-heading)); }
h3 { font-size: calc(var(--fs-2) * var(--scale-heading)); }
img, picture, video { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent); }
:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 3px; border-radius: var(--r-sm); }
[translate="no"] { font-variant-numeric: tabular-nums; }
address { font-style: normal; overflow-wrap: anywhere; }
[data-lang-switch="si"] { font-family: var(--font-si-body); }
[data-lang-switch="ta"] { font-family: var(--font-ta-body); }
.skip-link { position: absolute; inset-inline-start: var(--s-4); top: -100%; background: var(--c-accent); color: var(--c-accent-ink); padding: var(--s-2) var(--s-4); border-radius: var(--r-sm); z-index: 100; }
.skip-link:focus { top: calc(var(--header-h, 4.5rem) + var(--s-2)); }