/* ==========================================================================
   Dentales design tokens
   Concept: "Harbour of Worlds" — a blue-hour coastline where a copper portal
   hangs over the sea. Ink-teal night, coral lantern light, seafoam glass.
   Colour is used for meaning: coral = act, seafoam = information, butter = credits.
   ========================================================================== */

@font-face {
  font-family: "Fraunces";
  src: url("/fonts/fraunces-latin-var.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter";
  src: url("/fonts/inter-latin-var.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallbacks keep the swap from shifting layout. */
@font-face { font-family: "Fraunces Fallback"; src: local("Georgia"); size-adjust: 108%; ascent-override: 92%; descent-override: 24%; }
@font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 107%; ascent-override: 90%; descent-override: 22%; }

:root {
  color-scheme: dark;

  /* Ink — backgrounds and surfaces */
  --ink-950: #040d10;
  --ink-900: #061418;
  --ink-850: #0a1e23;
  --ink-800: #0e282e;
  --ink-750: #13333a;
  --ink-700: #1b424a;

  /* Coral — primary / action */
  --coral-300: #ffb199;
  --coral-400: #ff8a6e;
  --coral-500: #ff6a4d;
  --coral-600: #e9502f;
  --coral-ink: #2a0d05;

  /* Seafoam — secondary / information */
  --sea-200: #c4f6e6;
  --sea-300: #9cecd5;
  --sea-400: #6fdcbf;
  --sea-600: #2f9e86;

  /* Butter — accent, used sparingly (credits, highlights) */
  --butter-200: #fff0cc;
  --butter-300: #ffe0a6;
  --butter-500: #f3bb5c;

  /* Text */
  --text: #f4efe6;
  --text-soft: #c9d6d4;
  --text-muted: #93aaab;
  --text-faint: #7d989b;

  /* Semantic */
  --bg: var(--ink-900);
  --surface: var(--ink-850);
  --surface-2: var(--ink-800);
  --surface-3: var(--ink-750);
  --line: rgb(196 246 230 / 0.1);
  --line-strong: rgb(196 246 230 / 0.2);
  --focus: var(--sea-300);
  --primary: var(--coral-500);
  --primary-hover: var(--coral-400);
  --glow: rgb(255 106 77 / 0.38);

  /* Type */
  --font-display: "Fraunces", "Fraunces Fallback", Georgia, serif;
  --font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-md: 1rem;
  --fs-lg: 1.125rem;
  --fs-xl: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --fs-2xl: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem);
  --fs-3xl: clamp(2rem, 1.4rem + 2.4vw, 3.25rem);
  --fs-hero: clamp(2.6rem, 1.4rem + 5vw, 5.6rem);

  /* Space (4pt) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; --s9: 96px; --s10: 128px;
  --gutter: clamp(16px, 4vw, 48px);
  --content: 1320px;

  /* Radii */
  --r-sm: 8px; --r-md: 14px; --r-lg: 22px; --r-xl: 32px; --r-pill: 999px;

  /* Elevation */
  --shadow-1: 0 1px 0 rgb(255 255 255 / 0.04) inset, 0 6px 18px rgb(0 0 0 / 0.28);
  --shadow-2: 0 1px 0 rgb(255 255 255 / 0.05) inset, 0 18px 40px -8px rgb(0 0 0 / 0.55);
  --shadow-3: 0 30px 80px -20px rgb(0 0 0 / 0.7), 0 10px 30px -10px rgb(0 0 0 / 0.5);
  --shadow-glow: 0 10px 30px -6px var(--glow);

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms;
  --t-med: 280ms;
  --t-slow: 520ms;

  --header-h: 68px;
  --tabbar-h: 0px;
}

/* Display lighting saved on the player's profile (values kept for data compatibility). */
body[data-scene="midnight"] {
  --bg: var(--ink-950);
  --surface: #071519;
  --glow: rgb(255 106 77 / 0.22);
}
body[data-scene="sunrise"] {
  --bg: #161214;
  --surface: #1e181a;
  --surface-2: #261e20;
  --surface-3: #30262a;
  --glow: rgb(255 150 100 / 0.45);
}

@media (max-width: 860px) {
  :root { --header-h: 60px; --tabbar-h: 68px; }
}