/*
 * Material Design 3 theme tokens for the 3d-models embed surface.
 *
 * Light is the default (matches VC-1909 acceptance criteria). Dark is
 * opt-in via `data-theme="dark"` on the root element. The runtime
 * applier (shared/theme-init.js) writes that attribute based on the
 * resolved theme value (postMessage > URL > manifest > 'light').
 *
 * Both palettes share the same llpv2-toolbar-blue primary identity so
 * embedded surfaces read as part of the same product family in either
 * theme. The light palette is M3's light-scheme mapping of that primary;
 * the dark palette mirrors the pre-VC-1909 tokens from index.html and
 * view/style.css exactly so the existing dark visual stays pixel-for-pixel.
 *
 * Consumed by:
 *   - index.html (gallery)
 *   - view/index.html via view/style.css (viewer chrome + effects panel)
 *
 * Tokens follow m3.material.io naming so Material Web components can
 * pick them up automatically without per-component CSS.
 */

/*
 * MLP-465: self-hosted Karla, replacing the runtime fonts.googleapis.com /
 * fonts.gstatic.com dependency on the critical path.
 *
 * Karla v33's Latin subset is a single variable-weight woff2 (the file Google
 * Fonts itself serves identically for every requested weight), so one file at
 * /shared/fonts/karla-latin.woff2 covers the whole 400-700 range the UI uses
 * (400 body, 500/600 labels incl. canvas labels in view/experiences/labels.js,
 * 700 headings). `font-display: swap` keeps text visible during load (no FOIT);
 * the Latin `unicode-range` mirrors Google's so non-Latin glyphs fall straight
 * through to the system-ui stack below instead of rendering tofu. The primary
 * weight is preloaded from index.html / view/index.html.
 */
@font-face {
  font-family: 'Karla';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url('/shared/fonts/karla-latin.woff2') format('woff2');
  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;
}

:root {
  /* -- VT light surface chain (MLP-614: retoned from the stock M3 purple
        baseline to the Varsity Tutors design-system neutrals the mockups
        use — cool slate surfaces, navy on-surface, slate outlines). ---- */
  --md-sys-color-surface: #ffffff;
  --md-sys-color-surface-dim: #e2e8f0;
  --md-sys-color-surface-bright: #ffffff;
  --md-sys-color-surface-container-lowest: #ffffff;
  --md-sys-color-surface-container-low: #f5f7fa;
  --md-sys-color-surface-container: #eef2f6;
  --md-sys-color-surface-container-high: #e8edf4;
  --md-sys-color-surface-container-highest: #e2e8f0;
  --md-sys-color-on-surface: #0b1b4f;
  --md-sys-color-on-surface-variant: #475569;
  --md-sys-color-outline: #64748b;
  --md-sys-color-outline-variant: #cbd5e1;

  /* -- Primary: VT trust blue ---------------------------------------- */
  --md-sys-color-primary: #2b59c3;
  --md-sys-color-on-primary: #ffffff;
  --md-sys-color-primary-container: #dce7ff;
  --md-sys-color-on-primary-container: #0b1b4f;
  --md-sys-color-inverse-primary: #aac7ff;

  /* -- Secondary / tertiary support roles ---------------------------- */
  --md-sys-color-secondary: #565f71;
  --md-sys-color-on-secondary: #ffffff;
  --md-sys-color-secondary-container: #dce7ff;
  --md-sys-color-on-secondary-container: #0b1b4f;
  --md-sys-color-tertiary: #705574;
  --md-sys-color-on-tertiary: #ffffff;
  --md-sys-color-tertiary-container: #fad8fc;
  --md-sys-color-on-tertiary-container: #28132e;
  --md-sys-color-error: #b3261e;
  --md-sys-color-on-error: #ffffff;

  /* -- Inverse / shadow / scrim -------------------------------------- */
  --md-sys-color-inverse-surface: #313036;
  --md-sys-color-inverse-on-surface: #f4eff4;
  --md-sys-color-shadow: #000000;
  --md-sys-color-scrim: #000000;

  /* -- Type ---------------------------------------------------------- */
  --md-ref-typeface-plain: 'Karla', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --md-ref-typeface-brand: 'Karla', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* -- Shape (corner radius) ----------------------------------------- */
  --md-sys-shape-corner-none: 0;
  --md-sys-shape-corner-extra-small: 4px;
  --md-sys-shape-corner-small: 8px;
  --md-sys-shape-corner-medium: 12px;
  --md-sys-shape-corner-large: 16px;
  --md-sys-shape-corner-extra-large: 28px;
  --md-sys-shape-corner-full: 9999px;

  /* -- M3 elevation ladder (drop shadows; surface tint comes from
        the surface-container-* token chain above) ------------------- */
  --md-sys-elevation-0: none;
  --md-sys-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.18), 0 1px 3px 1px rgba(0, 0, 0, 0.10);
  --md-sys-elevation-2: 0 1px 2px 0 rgba(0, 0, 0, 0.20), 0 2px 6px 2px rgba(0, 0, 0, 0.12);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.12), 0 1px 3px 0 rgba(0, 0, 0, 0.20);

  /* -- State-layer opacities (M3 spec) ------------------------------- */
  --md-sys-state-hover-opacity: 0.08;
  --md-sys-state-focus-opacity: 0.12;
  --md-sys-state-pressed-opacity: 0.12;

  /* -- Theme-aware extras -------------------------------------------- *
   * Hand-rolled tokens for pieces of the embed UI that aren't pure M3
   * (the 3D scene's idle backdrop, the animation badge plate, etc.).
   * They follow the surface chain so swapping data-theme below carries
   * them with it. */
  /* MLP-614 — calm, near-white studio backdrop (was the saturated lavender
   * #f3edf7) so the model is the focus on the viewer stage. */
  --vt-scene-background: #eef1f6;
  --vt-anim-badge-bg: rgba(255, 255, 255, 0.85);
}

:root[data-theme='dark'] {
  /* -- M3 dark surface chain (pre-VC-1909 baseline) ------------------ */
  --md-sys-color-surface: #141218;
  --md-sys-color-surface-dim: #141218;
  --md-sys-color-surface-bright: #3b383e;
  --md-sys-color-surface-container-lowest: #0f0d13;
  --md-sys-color-surface-container-low: #1d1b20;
  --md-sys-color-surface-container: #211f26;
  --md-sys-color-surface-container-high: #2b2930;
  --md-sys-color-surface-container-highest: #36343b;
  --md-sys-color-on-surface: #e6e0e9;
  --md-sys-color-on-surface-variant: #cac4d0;
  --md-sys-color-outline: #938f99;
  --md-sys-color-outline-variant: #49454f;

  /* -- Primary: llpv2 toolbar blue, M3 dark mapping ------------------ */
  --md-sys-color-primary: #aac7ff;
  --md-sys-color-on-primary: #102f60;
  --md-sys-color-primary-container: #284777;
  --md-sys-color-on-primary-container: #d6e3ff;
  --md-sys-color-inverse-primary: #415f91;

  /* -- Secondary / tertiary support roles ---------------------------- */
  --md-sys-color-secondary: #bcc6dc;
  --md-sys-color-on-secondary: #263141;
  --md-sys-color-secondary-container: #3e4759;
  --md-sys-color-on-secondary-container: #dae2f9;
  --md-sys-color-tertiary: #ddbce0;
  --md-sys-color-on-tertiary: #3f2845;
  --md-sys-color-tertiary-container: #573e5d;
  --md-sys-color-on-tertiary-container: #fad8fc;
  --md-sys-color-error: #ffb4ab;
  --md-sys-color-on-error: #690005;

  /* -- Inverse / shadow / scrim -------------------------------------- */
  --md-sys-color-inverse-surface: #e6e0e9;
  --md-sys-color-inverse-on-surface: #313036;

  /* -- Elevation shadows are heavier on dark to push the surface
        away from the background tint. */
  --md-sys-elevation-1: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-2: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --md-sys-elevation-3: 0 4px 8px 3px rgba(0, 0, 0, 0.15), 0 1px 3px 0 rgba(0, 0, 0, 0.30);

  /* -- Theme-aware extras (dark variant) ----------------------------- */
  --vt-scene-background: #060912;
  --vt-anim-badge-bg: rgba(0, 0, 0, 0.55);
}