/* ============================================================
   ToothTraffic Portal — Clinical Glass theme (shared)
   Tokens per docs/portal.theme.md. Glass skin per approved v2.
   Link once per page:  <link rel="stylesheet" href="/shared/css/theme.css">
   ============================================================ */

/* ── Self-hosted fonts (OFL, no CDN) ─────────────────────── */
@font-face {
  font-family: "Bebas Neue";
  font-style: normal; font-weight: 400; font-display: swap;
  src: url("/shared/fonts/bebas-neue-400.woff2") format("woff2");
}
@font-face { font-family:"Nunito"; font-style:normal; font-weight:400; font-display:swap; src:url("/shared/fonts/nunito-400.woff2") format("woff2"); }
@font-face { font-family:"Nunito"; font-style:normal; font-weight:600; font-display:swap; src:url("/shared/fonts/nunito-600.woff2") format("woff2"); }
@font-face { font-family:"Nunito"; font-style:normal; font-weight:700; font-display:swap; src:url("/shared/fonts/nunito-700.woff2") format("woff2"); }
@font-face { font-family:"Nunito"; font-style:normal; font-weight:800; font-display:swap; src:url("/shared/fonts/nunito-800.woff2") format("woff2"); }

/* ── Design tokens ───────────────────────────────────────── */
:root {
  --font-stack: "Nunito", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;

  --surface-page: #ECEEF2;
  --surface-bar: rgba(255,255,255,0.96);
  --surface-card: #FFFFFF;
  --surface-input: #FFFFFF;
  --surface-selected: #E7ECF3;
  --surface-note: #EEF4F3;

  --text-heading: #121C24;
  --text-primary: #1E2833;
  --text-muted: #6B7684;
  --text-label: #47586B;
  --text-placeholder: #A2ACB8;

  --line: #DEE6ED;
  --line-card: #DBE4EC;
  --line-input: #C9D4DE;
  --line-note: #D5E3EE;

  --accent: #12233E;
  --accent-soft: rgba(18,35,62,0.10);
  --accent-text: #12233E;
  --radio-ring: #B6C2CE;
  --focus-ring: rgba(18,35,62,0.22);
  --focus-ring-width: 3px;

  --note-label: #12233E;
  --chip-bg: rgba(18,35,62,0.10);
  --chip-text: #12233E;
  --error-text: #B4362A;
  --success-text: #12A45B;
  --warning-text: #9A6B1F;

  --bubble-out-bg: #12233E;
  --bubble-out-text: #F4F8FB;
  --bubble-in-bg: #E8EEF4;
  --bubble-in-text: #1E2833;

  --button-bg: #12233E;
  --button-text: #F4F8FB;
  --button-success-bg: #12A45B;
  --button-success-text: #FFFFFF;

  --radius-card: 10px;
  --radius-input: 8px;
  --radius-button: 8px;
  --radius-chip: 999px;

  --weight-heading: 600;
  --tracking-heading: 0;

  --status-good: #12A45B;
  --status-warn: #DA7B0B;
  --status-bad: #D2382C;
  --chart-1: #2F6FEB;
  --chart-2: #2A7FD4;
  --chart-3: #8250DF;
  --chart-4: #ED9109;
  --chart-5: #D6467F;

  --select-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%236B7684' stroke-width='2' stroke-linecap='round'/></svg>");

  /* Glass surface helpers (v2) */
  /* Neumorphic depth + hero gradient (portal standard) */
  --neu-hi: #FFFFFF;                 /* light edge (top-left) */
  --neu-lo: #D6DAE2;                 /* shadow edge (bottom-right) */
  --hero-grad: linear-gradient(135deg,#4A78B8 0%,#1E3A63 45%,#0E2142 100%);
  --glass-card: #FFFFFF;
  --glass-card-border: transparent;  /* neumorphic = no border, shadow defines edge */
  --glass-radius: 16px;
  --glass-blur: none;
  --glass-shadow: 0 0 0 1px rgba(18,35,62,0.10), 7px 7px 15px rgba(104,114,134,0.32), -6px -6px 13px var(--neu-hi), 0 6px 16px rgba(10,22,42,0.12);
  --feature-bg: #12233E;     /* rich navy (solid; use --hero-grad for gradient cards) */
}

/* ── Base ────────────────────────────────────────────────── */
.tt-theme, body.tt-theme { font-family: var(--font-stack); color: var(--text-primary); }
body.tt-theme {
  margin: 0;
  background:
    radial-gradient(1000px 600px at 88% -12%, rgba(18,35,62,0.05), transparent 60%),
    linear-gradient(160deg, #EEF0F4 0%, #ECEEF2 55%, #E9ECF0 100%);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

/* Display type helpers */
.tt-display { font-family: var(--font-display); font-weight: 400; letter-spacing: 0.02em; color: var(--text-heading); }
.tt-section-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-label); }

/* ── Reusable glass card ─────────────────────────────────── */
.tt-card {
  background: var(--glass-card);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-card-border);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
}
.tt-feature {
  background: var(--hero-grad);
  border: 0;
  border-radius: var(--glass-radius);
  box-shadow: 6px 6px 16px var(--neu-lo), -6px -6px 16px var(--neu-hi);
  color: var(--surface-page);
}

/* ── Buttons ─────────────────────────────────────────────── */
.tt-btn { font-family: inherit; font-weight: 700; border-radius: var(--radius-button); cursor: pointer;
  min-height: 40px; padding: 0 16px; border: 1px solid transparent; transition: background .15s, color .15s, border-color .15s; }
.tt-btn-primary { background: var(--button-bg); color: var(--button-text); }
.tt-btn-secondary { background: var(--surface-card); border-color: var(--line-input); color: var(--accent-text); }
.tt-btn-ghost { background: transparent; border-color: var(--line-input); color: var(--text-muted); }
.tt-btn:focus-visible { outline: none; box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring); }
.tt-btn:disabled { opacity: .45; cursor: default; }

/* ── Inputs / selects ────────────────────────────────────── */
.tt-input, .tt-select {
  font-size: 16px; font-family: inherit; color: var(--text-primary);
  background: var(--surface-input); border: 1px solid var(--line-input);
  border-radius: var(--radius-input); padding: 11px 12px;
}
.tt-select { appearance: none; -webkit-appearance: none; background-image: var(--select-arrow);
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 34px; }
.tt-input:focus, .tt-select:focus { outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 var(--focus-ring-width) var(--focus-ring); }
.tt-input::placeholder { color: var(--text-placeholder); }

/* ── Chips / badges ──────────────────────────────────────── */
.tt-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:700;
  padding:3px 8px; border-radius: var(--radius-chip); background: var(--chip-bg); color: var(--chip-text); }
.tt-chip-neutral { background: var(--surface-note); color: var(--text-label); }
.tt-chip-good { background: color-mix(in srgb, var(--status-good) 14%, transparent); color: var(--status-good); }
.tt-chip-warn { background: color-mix(in srgb, var(--status-warn) 16%, transparent); color: var(--status-warn); }
.tt-chip-bad  { background: color-mix(in srgb, var(--status-bad) 14%, transparent); color: var(--status-bad); }

/* ── Tables ──────────────────────────────────────────────── */
.tt-table { width: 100%; border-collapse: collapse; }
.tt-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--text-label); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.tt-table tbody td { padding: 12px; border-bottom: 1px solid var(--line-card); color: var(--text-primary); }
.tt-table tbody tr:hover { background: var(--surface-selected); }
.tt-table .num { text-align: right; font-variant-numeric: tabular-nums; }


/* ── Canonical display typography (single source of truth) ─── */
.tt-page-title {
  font-family: var(--font-display) !important;
  font-size: 48px !important;
  font-weight: 400 !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  line-height: 1.05 !important;
  color: var(--text-heading);
  margin: 0;
}