/* Semantic design tokens for the field + mesh viewers.
 *
 * Canonical source. Vendored copies live at:
 *   - core/viz/data_dashboard/static/theme.css
 *   - core/viz/_shared/theme.css
 * Keep all copies identical until a shared-static serving story exists.
 *
 * Brand alignment: palette + fonts pulled from arena-tech-blog
 * (Suisse Intl / Suisse Intl Mono, brand orange #ff4d33, warm/cool/neutral
 * tones). Font files vendored alongside this stylesheet under static/fonts/.
 */

@font-face {
  font-family: 'Suisse Intl';
  src: url('/static/fonts/SuisseIntl-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisse Intl';
  src: url('/static/fonts/SuisseIntl-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisse Intl';
  src: url('/static/fonts/SuisseIntl-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisse Intl Mono';
  src: url('/static/fonts/SuisseIntlMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Suisse Works';
  src: url('/static/fonts/SuisseWorks-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* === Arena brand palette (from arena-tech-blog) =================== */

  /* Warm */
  --warm-white:  #fefdf9;
  --warm-cream:  #eae9e3;
  --warm-sand:   #d7d7cd;
  --warm-brown:  #3a322f;
  --warm-muted:  #ada68f;

  /* Cool */
  --cool-gray:   #99a2b3;
  --cool-ice:    #c4d4dc;

  /* Neutral */
  --neutral-50:  #fafaf9;
  --neutral-100: #f5f5f4;
  --neutral-300: #d6d3d1;
  --neutral-400: #a8a29e;
  --neutral-500: #78716c;
  --neutral-600: #57534e;
  --neutral-700: #44403c;
  --neutral-800: #292524;
  --neutral-900: #1c1917;
  --neutral-950: #0c0a09;

  /* Dark */
  --dark-pure:     #000000;
  --dark-ink:      #0d0d0d;
  --dark-charcoal: #222222;

  /* === Semantic tokens — Dark theme (default) ======================= */

  /* Surfaces — depth-ordered low → high. Dark theme rests on the neutral
   * scale instead of pure black so the panels read as paper-stock at low
   * light rather than as voids. */
  --surface-bg:        var(--dark-ink);        /* page */
  --surface-1:         var(--neutral-900);     /* sidebar */
  --surface-2:         var(--dark-charcoal);   /* tab bar / toolbars */
  --surface-3:         var(--neutral-800);     /* hover */
  --surface-inset:     var(--dark-ink);        /* input + dropdown background */
  --surface-elevated:  var(--neutral-800);     /* palette / modal */

  /* Text */
  --text-primary:      var(--neutral-100);
  --text-body:         var(--neutral-300);
  --text-secondary:    var(--neutral-400);
  --text-muted:        var(--neutral-500);
  --text-on-accent:    var(--warm-white);

  /* Borders */
  --border-default:    var(--neutral-700);
  --border-strong:     var(--neutral-600);
  --border-subtle:     var(--neutral-800);

  /* Slider — used by the modern range styling below. Dark theme: dim
   * neutral track, accent fill on the played portion, off-white thumb. */
  --slider-track:      var(--neutral-700);
  --slider-fill:       var(--accent);
  --slider-thumb:      var(--neutral-100);
  --slider-thumb-ring: var(--accent);

  /* Accents — Arena brand orange */
  --accent:            #ff4d33;
  --accent-soft:       rgba(255, 77, 51, 0.14);
  --accent-soft-hi:    rgba(255, 77, 51, 0.22);
  --danger:            #FF1744;
  --danger-soft:       rgba(255, 23, 68, 0.10);
  --success:           #69FF47;

  /* Stats / S-Params overlay series — brand-aligned and theme-specific for
   * legibility. pred is the brand accent (the thing being evaluated); sim is
   * a cool companion (ground-truth reference); diff is green (pred − sim).
   * Held as literal hexes (not var() refs) so canvas getComputedStyle reads
   * resolve them directly. */
  --stat-sim:          #6cb6e0;
  --stat-pred:         #ff4d33;   /* mirrors --accent */
  --stat-diff:         #69ff47;   /* mirrors --success */

  /* Typography — match arena-tech-blog */
  --font-sans:         'Suisse Intl', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --font-serif:        'Suisse Works', Georgia, 'Times New Roman', serif;
  --font-mono:         'Suisse Intl Mono', 'SF Mono', 'Fira Code', ui-monospace, Menlo, Consolas, monospace;
  --font-size-xs:      10px;
  --font-size-sm:      11px;
  --font-size-base:    13px;
  --font-size-lg:      14px;
  --line-height-tight: 1.2;
  --line-height-base:  1.4;

  /* Layout */
  --sidebar-w:         270px;
  --mesh-panel-w:      288px;  /* mesh-stats sidebar, left of the 3D scene */
  --rail-w:            0px;  /* no activity rail; the collapse-handle math still reads it */
  --radius-sm:         3px;
  --radius-md:         4px;
  --radius-lg:         8px;

  /* Motion */
  --duration-fast:     0.15s;
  --duration-base:     0.25s;

  /* Shadows */
  --shadow-panel:      0 20px 60px rgba(0, 0, 0, 0.6);
}

[data-theme="light"] {
  /* Light theme rests on the warm palette so panels read as paper rather
   * than as a flat gray slab. */
  --surface-bg:        var(--warm-white);
  --surface-1:         var(--warm-white);
  --surface-2:         var(--warm-cream);
  --surface-3:         var(--warm-sand);
  --surface-inset:     var(--warm-white);
  --surface-elevated:  var(--warm-white);

  --text-primary:      var(--warm-brown);
  --text-body:         var(--warm-brown);
  --text-secondary:    var(--neutral-500);
  --text-muted:        var(--neutral-400);
  --text-on-accent:    var(--warm-white);

  --border-default:    var(--neutral-300);
  --border-strong:     var(--neutral-400);
  --border-subtle:     var(--warm-cream);

  --slider-track:      var(--neutral-300);
  --slider-fill:       var(--accent);
  --slider-thumb:      var(--warm-white);
  --slider-thumb-ring: var(--accent);

  /* Same brand orange — already has enough contrast on cream surfaces. */
  --accent:            #ff4d33;
  --accent-soft:       rgba(255, 77, 51, 0.14);
  --accent-soft-hi:    rgba(255, 77, 51, 0.22);
  --danger:            #c41e3a;
  --danger-soft:       rgba(196, 30, 58, 0.10);
  --success:           #2ea043;

  /* Cool sim series + green diff darken on the cream surface; pred keeps the
   * brand orange (enough contrast on cream already). */
  --stat-sim:          #2b7fb0;
  --stat-pred:         #ff4d33;
  --stat-diff:         #2ea043;

  --shadow-panel:      0 20px 60px rgba(58, 50, 47, 0.18);
}

/* === Modern range slider ============================================
 * Browsers' native sliders look ugly in light mode (dark track, weird
 * borders). Override the track + thumb on both WebKit and Firefox so the
 * sliders match the rest of the chrome. The thumb is a circle ringed in
 * the brand accent; the track is a thin pill in the neutral-300 / 700
 * range. */

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
  height: 18px;
  cursor: pointer;
  /* The native blue tint must be suppressed entirely or it shows through
   * on focus in some browsers. */
  accent-color: transparent;
  padding: 0;
}
input[type=range]:focus { outline: none; }

/* WebKit — Chrome, Safari, Edge */
input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 999px;
  background: var(--slider-track);
  border: none;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--slider-thumb);
  border: 2px solid var(--slider-thumb-ring);
  margin-top: -5px; /* center on the 4px track */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform var(--duration-fast);
}
input[type=range]:hover::-webkit-slider-thumb { transform: scale(1.1); }
input[type=range]:active::-webkit-slider-thumb { transform: scale(1.15); }

/* Firefox */
input[type=range]::-moz-range-track {
  height: 4px;
  border-radius: 999px;
  background: var(--slider-track);
  border: none;
}
input[type=range]::-moz-range-progress {
  height: 4px;
  border-radius: 999px;
  background: var(--slider-fill);
}
input[type=range]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--slider-thumb);
  border: 2px solid var(--slider-thumb-ring);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  transition: transform var(--duration-fast);
}
input[type=range]:hover::-moz-range-thumb { transform: scale(1.1); }
input[type=range]:active::-moz-range-thumb { transform: scale(1.15); }