/* ============================================================
   ToothShader — shared design tokens + chrome
   Loaded by every page (index.html + content pages). See DESIGN.md
   for the philosophy behind these choices.
   ============================================================ */

/* ---- Web fonts (self-hosted, no build step) ----
   Inter Variable: UI workhorse, tall x-height + tabular figures for the
   ΔE00/% readouts. Noto Sans Thai Variable: only loads when Thai glyphs
   actually render (unicode-range), matches Inter's weight axis. */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/inter-latin-ext-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face {
  font-family: "Noto Sans Thai";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("fonts/noto-sans-thai-thai-wght-normal.woff2") format("woff2-variations");
  unicode-range: U+02D7,U+0303,U+0331,U+0E01-0E5B,U+200C-200D,U+25CC;
}

:root {
  /* Light clinical palette — clean dental-office whites & cool grays with a calm medical teal */
  --bg: #eef2f7;               /* soft cool clinical background */
  --panel: #ffffff;            /* white cards / surfaces */
  --panel2: #e7edf4;           /* secondary surface / hover / progress track */
  --text: #17222f;             /* dark slate ink */
  --muted: #5b6b80;            /* cool gray secondary text */
  --accent: #0ea5a4;           /* clinical teal */
  --accent-strong: #0b8887;    /* teal pressed/hover */
  --border: #d7dfe8;           /* soft cool hairline */
  --tooth: #16a34a;            /* tooth ROI marker green (distinct from teal UI) */
  --shadow: 0 1px 2px rgba(16, 32, 64, 0.06), 0 6px 20px rgba(16, 32, 64, 0.07);
  --sidebar-w: 360px;          /* fixed inspector width on desktop (macOS/Windows) */

  /* Semantic match-quality ramp (ΔE00 thresholds: perfect ≤0.8, good ≤1.8, warn ≤3.5, bad >3.5) */
  --match-perfect-bg: #d1fae5; --match-perfect-text: #047857;
  --match-good-bg:    #dcfce7; --match-good-text:    #15803d;
  --match-warn-bg:    #fef3c7; --match-warn-text:    #b45309;
  --match-bad-bg:     #fee2e2; --match-bad-text:     #b91c1c;
  --danger: #dc2626;

  /* Best-match gold — deliberate attention color, kept apart from the teal system */
  --gold: #e0a92a; --gold-deep: #b8860b;
  --gold-grad-a: #f5c542; --gold-grad-b: #d97706;

  /* Directional shade-adjustment guidance */
  --suggest: #a86a08; --suggest-strong: #8a5606;

  /* Dark glass — pills/HUD overlaid on photos */
  --glass: rgba(10, 14, 24, 0.88);
  --glass-text: #f1f5f9;
  --hud-muted: #cbd5e1;

  --letterbox: #cfd8e3;        /* neutral letterbox behind an uncropped photo */

  /* ---- Type scale ---- */
  --fs-2xs: 0.625rem;   /* 10px — micro badges, zone tags */
  --fs-xs:  0.6875rem;  /* 11px — captions, HUD sub-line */
  --fs-sm:  0.75rem;    /* 12px — metrics, hints, footer links */
  --fs-md:  0.8125rem;  /* 13px — secondary UI, nav links */
  --fs-base: 0.875rem;  /* 14px — body text, buttons */
  --fs-lg:  0.9375rem;  /* 15px — brand name, card titles */
  --fs-xl:  1.0625rem;  /* 17px — mode names, section headings */
  --fs-2xl: 1.375rem;   /* 22px — content h2, score */
  --fs-3xl: clamp(1.5rem, 1.1rem + 2vw, 1.75rem);   /* 24→28px — content hero-title */
  --fs-4xl: clamp(1.625rem, 1.2rem + 2.6vw, 2rem);  /* 26→32px — h1 / app hero */

  --lh-tight: 1.15; --lh-snug: 1.35; --lh-normal: 1.5; --lh-relaxed: 1.65;
  --ls-tight: -0.015em;  /* headings */
  --ls-caps: 0.04em;     /* uppercase micro-labels */

  /* ---- Spacing & shape ---- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
  --r-xs: 4px; --r-sm: 6px; --r-md: 8px; --r-lg: 12px;
  --r-xl: 16px; --r-2xl: 22px; --r-full: 999px;

  /* Inter first; Noto Sans Thai fills Thai glyphs via unicode-range; system stack as fallback */
  --font: "Inter", "Noto Sans Thai", ui-sans-serif, system-ui, -apple-system,
          BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Thai stacked vowel/tone marks need taller lines; tracking breaks cluster shaping */
:lang(th) {
  --lh-tight: 1.35; --lh-snug: 1.5; --lh-normal: 1.65; --lh-relaxed: 1.8;
  --ls-tight: 0; --ls-caps: 0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  line-height: var(--lh-normal);
  color-scheme: light;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-strong); text-decoration: underline; }

/* ---- Shared header ---- */
.app-header .brand-name {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: var(--ls-tight);
  color: var(--text);
  text-decoration: none;
}
.app-header .brand-name:hover { color: var(--accent); }
.app-header .brand-emoji { width: 18px; height: 18px; color: var(--accent); }

.header-nav {
  display: flex;
  gap: 4px 12px;
  margin-left: auto;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.nav-link {
  font-size: var(--fs-md);
  color: var(--muted);
  text-decoration: none;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  transition: color 0.15s, background 0.15s;
}
.nav-link:hover { color: var(--text); background: var(--panel2); }
.nav-link-accent { background: var(--accent); color: #fff; font-weight: 600; }
.nav-link-accent:hover { background: var(--accent-strong); color: #fff; }

@media (max-width: 768px) {
  .app-header .brand-emoji { width: 16px; height: 16px; }
  .app-header .brand-name { font-size: var(--fs-md); }
  .header-nav { display: none; }
}

/* ---- Shared footer ---- */
.app-footer {
  margin-top: auto;
  padding: 20px 16px;
  padding-bottom: max(20px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--border);
  background: var(--bg);
  text-align: center;
}
.footer-text { margin: 0 0 8px; font-size: var(--fs-md); color: var(--muted); }
.footer-nav { display: flex; gap: 8px 16px; flex-wrap: wrap; justify-content: center; }
.footer-nav a { font-size: var(--fs-sm); color: var(--muted); text-decoration: none; }
.footer-nav a:hover { color: var(--text); text-decoration: underline; }

/* ---- Minimal line-icon system (SF Symbols-style: thin stroke, rounded caps) ---- */
.icon {
  width: 1em; height: 1em;
  display: inline-block;
  flex: none;
  vertical-align: -0.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.icon.filled { fill: currentColor; stroke: none; }

/* ---- Language switcher (native <select>, injected by i18n.js) ---- */
.lang-switch { display: inline-flex; margin-left: auto; flex: none; }
.lang-switch .lang-select {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--panel2);
  color: var(--text);
  font-family: inherit;
  font-size: var(--fs-sm);
  font-weight: 600;
  padding: 5px 6px;
  cursor: pointer;
  line-height: 1.3;
}
.lang-switch .lang-select:hover { border-color: var(--accent); }
.lang-switch .lang-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.start-lang-switch {
  position: absolute; top: 12px; right: 12px; margin-left: 0; z-index: 5;
  background: var(--panel); border-radius: var(--r-md);
}
@media (max-width: 768px) {
  .lang-switch .lang-select { padding: 7px 6px; font-size: var(--fs-sm); }
  .start-lang-switch { top: max(10px, env(safe-area-inset-top)); right: 10px; }
}