/*
  Gener8 style kit — design tokens (colours, type, sizes).

  Shared by every Gener8 3D viewer (G8 Anatomy, and later G8 Dental) so they look
  and behave the same. Change a value here and every viewer follows.

  Look: an anatomy plate rather than an app. Warm paper panels, near-black ink,
  one typeface (Outfit, Regular and Bold only: kit/css/fonts.css), and one
  ultramarine accent kept for "selected / on".

  Themes: light (paper) is the default. Dark is for dark Intuiface scenes:
  set by the viewer with <html data-theme="dark"> (?theme=dark or a saved view).

  The page itself is always transparent so the model drops straight onto the
  Intuiface scene. Only the panels have a background.

  Sizing: everything is measured in --u, which scales with screen height and the
  ?ui= setting, so one layout works from a laptop to a 4 m wall. Touch targets
  never go below about 5 --u. Text is measured in --tu (the same unit times --text)
  and never goes below 1.2 --tu, so it stays sharp on 1080p projectors.
*/
@import url('fonts.css');

:root {
  /* ---- Size ---------------------------------------------------------------- */
  --scale: .7;                                         /* ?ui= (control size) */
  /* --size makes every panel, button and gap bigger at once, on top of ?ui=, so saved
     views that stored ui 0.7 grow too. Raised to 1.3 (7 Oct 2026): text was too small
     and blurred on projectors. */
  --size: 1.3;
  --u: calc(clamp(7.5px, .86vh, 22px) * var(--scale) * var(--size)); /* base unit */
  /* Text unit: every font size is calc(var(--tu) * n). --text makes text grow more
     than the boxes around it; no text in the kit goes below 1.2 --tu. */
  --text: 1.25;
  --tu: calc(var(--u) * var(--text));
  --reach: 55%;                                        /* ?reach= (control height) */

  /* ---- Type ---------------------------------------------------------------- */
  /* One typeface everywhere: Outfit Regular (400) and Bold (700). The three names are
     kept so each part of a viewer can still be retuned on its own later. */
  --font-ui: 'Outfit', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-display: var(--font-ui);
  --font-mono: var(--font-ui);

  /* ---- Paper (light theme) -------------------------------------------------- */
  --panel: rgba(250, 248, 244, .95);         /* panels, cards, labels */
  --panel-line: rgba(28, 24, 18, .14);       /* panel outline */
  --panel-shadow: 0 1px 0 rgba(28, 24, 18, .04), 0 calc(var(--u) * .8) calc(var(--u) * 2.6) rgba(40, 32, 20, .12);
  --ink: #17150f;                            /* main text */
  --muted: #5d574d;                          /* secondary text */
  --faint: #8a8376;                          /* hints, counts */
  --line: rgba(28, 24, 18, .12);             /* dividers, slider track */
  --well: rgba(28, 24, 18, .05);             /* grouped control background */
  --press: rgba(28, 24, 18, .1);             /* pressed state (no hover on touch) */
  --raised: #ffffff;                         /* selected segment in a segmented control */

  /* ---- Accent: selected / on ------------------------------------------------- */
  --accent: #2a3bd1;
  --accent-ink: #ffffff;
  --accent-soft: rgba(42, 59, 209, .1);
  --danger: #a4493d;

  /* ---- Labels on the model --------------------------------------------------- */
  --label-bg: rgba(250, 248, 244, .96);
  --label-ink: #17150f;
  --label-line: rgba(23, 21, 15, .55);       /* leader lines */
  --label-dot: #17150f;

  /* ---- Shape and motion ------------------------------------------------------ */
  --r-lg: calc(var(--u) * 1.6);              /* panels and cards */
  --r: calc(var(--u) * 1.1);                 /* buttons */
  --r-sm: calc(var(--u) * .7);               /* labels, small chips */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 180ms;

  color-scheme: light;
}

/* Dark theme, for dark Intuiface scenes */
:root[data-theme="dark"] {
  --panel: rgba(27, 26, 23, .94);
  --panel-line: rgba(240, 234, 222, .14);
  --panel-shadow: 0 1px 0 rgba(0, 0, 0, .3), 0 calc(var(--u) * .9) calc(var(--u) * 2.8) rgba(0, 0, 0, .45);
  --ink: #eeeae1;
  --muted: #b3ac9e;
  --faint: #8f897c;
  --line: rgba(240, 234, 222, .14);
  --well: rgba(240, 234, 222, .06);
  --press: rgba(240, 234, 222, .12);
  --raised: rgba(240, 234, 222, .16);
  --accent: #97a2ff;
  --accent-ink: #0d0f2a;
  --accent-soft: rgba(151, 162, 255, .16);
  --danger: #ff9a8c;
  --label-bg: rgba(28, 27, 24, .94);
  --label-ink: #eeeae1;
  --label-line: rgba(238, 234, 225, .7);
  --label-dot: #eeeae1;
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur: 0ms; }
  *, *::before, *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}