/* =============================================================================
   Mythos Backtest — base layer: product-local token aliases, reset, type scale,
   focus, reduced motion. Consumes ./tokens.css (canonical, verbatim) only through
   var(--mythos-*). No literal colour values live in this file or components.css /
   app.css / unlock.css (tests/40-web-static.test.js enforces it).
   ============================================================================= */

/* ---- Product-local aliases (PRODUCT-LOCAL, see docs/DESIGN_IMPLEMENTATION.md §4) -------------
   tokens.css has no semantic status tier that switches with the theme, so status hues and chart
   series get a thin alias layer here. Dark uses the canonical hue; light uses the canonical
   "-light" hue (status) or the chart hue darkened toward paper-900 so marks keep >= 3:1. */
:root {
  color-scheme: dark;
  --bt-success: var(--mythos-success);
  --bt-success-dim: var(--mythos-success-dim);
  --bt-warning: var(--mythos-warning);
  --bt-warning-dim: var(--mythos-warning-dim);
  --bt-danger: var(--mythos-danger);
  --bt-danger-dim: var(--mythos-danger-dim);
  --bt-info: var(--mythos-info);
  --bt-info-dim: var(--mythos-info-dim);
  --bt-neutral: var(--mythos-text-secondary);
  --bt-neutral-dim: color-mix(in srgb, var(--mythos-text-secondary) 14%, transparent);
  --bt-series-1: var(--mythos-chart-1);
  --bt-series-2: var(--mythos-chart-2);
  --bt-series-3: var(--mythos-chart-3);
  --bt-series-4: var(--mythos-chart-4);
  --bt-series-5: var(--mythos-chart-5);
  --bt-series-6: var(--mythos-chart-6);
  --bt-series-7: var(--mythos-chart-7);
  --bt-series-8: var(--mythos-chart-8);
  --bt-hover: color-mix(in srgb, var(--mythos-text-primary) 6%, transparent);
  --bt-press: color-mix(in srgb, var(--mythos-text-primary) 10%, transparent);
  --bt-row-hover: color-mix(in srgb, var(--mythos-text-primary) 4%, transparent);
  --bt-scrim: color-mix(in srgb, var(--mythos-ground-deep) 82%, transparent);
  /* density */
  --bt-control-h: var(--mythos-size-control-comfortable);
  --bt-hit: 2px;
  --bt-gap-interactive: var(--mythos-space-4);
  --bt-row-pad: var(--mythos-space-4);
  --bt-card-pad: var(--mythos-space-6);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bt-success: var(--mythos-success-light);
  --bt-warning: var(--mythos-warning-light);
  --bt-danger: var(--mythos-danger-light);
  --bt-info: var(--mythos-info-light);
  --bt-series-1: color-mix(in srgb, var(--mythos-chart-1) 62%, var(--mythos-paper-900));
  --bt-series-2: color-mix(in srgb, var(--mythos-chart-2) 62%, var(--mythos-paper-900));
  --bt-series-3: color-mix(in srgb, var(--mythos-chart-3) 62%, var(--mythos-paper-900));
  --bt-series-4: color-mix(in srgb, var(--mythos-chart-4) 62%, var(--mythos-paper-900));
  --bt-series-5: color-mix(in srgb, var(--mythos-chart-5) 62%, var(--mythos-paper-900));
  --bt-series-6: color-mix(in srgb, var(--mythos-chart-6) 62%, var(--mythos-paper-900));
  --bt-series-7: color-mix(in srgb, var(--mythos-chart-7) 62%, var(--mythos-paper-900));
  --bt-series-8: color-mix(in srgb, var(--mythos-chart-8) 62%, var(--mythos-paper-900));
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="light"]) {
    color-scheme: light;
    --bt-success: var(--mythos-success-light);
    --bt-warning: var(--mythos-warning-light);
    --bt-danger: var(--mythos-danger-light);
    --bt-info: var(--mythos-info-light);
    --bt-series-1: color-mix(in srgb, var(--mythos-chart-1) 62%, var(--mythos-paper-900));
    --bt-series-2: color-mix(in srgb, var(--mythos-chart-2) 62%, var(--mythos-paper-900));
    --bt-series-3: color-mix(in srgb, var(--mythos-chart-3) 62%, var(--mythos-paper-900));
    --bt-series-4: color-mix(in srgb, var(--mythos-chart-4) 62%, var(--mythos-paper-900));
    --bt-series-5: color-mix(in srgb, var(--mythos-chart-5) 62%, var(--mythos-paper-900));
    --bt-series-6: color-mix(in srgb, var(--mythos-chart-6) 62%, var(--mythos-paper-900));
    --bt-series-7: color-mix(in srgb, var(--mythos-chart-7) 62%, var(--mythos-paper-900));
    --bt-series-8: color-mix(in srgb, var(--mythos-chart-8) 62%, var(--mythos-paper-900));
  }
}
:root[data-density="compact"] {
  --bt-control-h: var(--mythos-size-control-compact);
  --bt-hit: 4px;
  --bt-gap-interactive: var(--mythos-space-5);
  --bt-row-pad: var(--mythos-space-3);
  --bt-card-pad: var(--mythos-space-5);
}

/* ---- Reset ------------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html.is-locked { overflow: hidden; }
body {
  margin: 0;
  min-height: 100vh;
  background: var(--mythos-ground);
  color: var(--mythos-text-primary);
  font-family: var(--mythos-font-text);
  font-size: 16px;
  line-height: 1.62;
  text-rendering: optimizeLegibility;
  overflow-wrap: break-word;
}
h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dd, figure, fieldset, legend { margin: 0; padding: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
ul, ol { list-style: none; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { cursor: pointer; }
fieldset { border: 0; min-width: 0; }
summary { cursor: pointer; }
code, kbd, pre, samp { font-family: var(--mythos-font-mono); font-size: 0.875em; }
[hidden] { display: none !important; }

/* Links are never gold (LINK-1): underlined in text-primary, thickening on hover. */
a { color: var(--mythos-link); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

/* ---- Type scale (TYPOGRAPHY.md §2; fluid ranges per RESPONSIVE §1.5, 320 -> 1240) ---------------- */
.t-display-xl { font: 600 clamp(49px, calc(49px + 12 * (100vw - 320px) / 920), 61px)/1.02 var(--mythos-font-display); letter-spacing: -0.022em; font-stretch: 125%; }
.t-display-l  { font: 600 clamp(39px, calc(39px + 10 * (100vw - 320px) / 920), 49px)/1.06 var(--mythos-font-display); letter-spacing: -0.020em; font-stretch: 125%; }
.t-h1 { font: 600 clamp(31px, calc(31px + 8 * (100vw - 320px) / 920), 39px)/1.12 var(--mythos-font-display); letter-spacing: -0.018em; font-stretch: 125%; }
.t-h2 { font: 600 clamp(25px, calc(25px + 6 * (100vw - 320px) / 920), 31px)/1.18 var(--mythos-font-display); letter-spacing: -0.015em; font-stretch: 125%; }
.t-h3 { font: 600 clamp(20px, calc(20px + 5 * (100vw - 320px) / 920), 25px)/1.24 var(--mythos-font-text); letter-spacing: -0.012em; }
.t-h4 { font: 600 clamp(18px, calc(18px + 2 * (100vw - 320px) / 920), 20px)/1.32 var(--mythos-font-text); letter-spacing: -0.008em; }
.t-body-l { font: 400 18px/1.62 var(--mythos-font-text); }
.t-body { font: 400 16px/1.62 var(--mythos-font-text); }
.t-body-s { font: 400 14px/1.56 var(--mythos-font-text); }
.t-caption { font: 400 13px/1.46 var(--mythos-font-text); letter-spacing: 0.005em; }
.t-label { font: 500 12px/1.34 var(--mythos-font-text); letter-spacing: 0.10em; text-transform: uppercase; }
.t-data { font: 400 14px/1.44 var(--mythos-font-mono); font-variant-numeric: tabular-nums; }
.muted { color: var(--mythos-text-secondary); }
/* Arabic (A-014): +6 % size, +0.15 line-height, tracking forced to 0 */
:lang(ar) { font-family: var(--mythos-font-text-arabic); }
:lang(ar) body, body:lang(ar) { font-size: calc(16px * 1.06); line-height: 1.77; }
:lang(ar) * { letter-spacing: 0 !important; }

/* ---- Utilities ------------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; inset-block-start: var(--mythos-space-3); inset-inline-start: var(--mythos-space-3); z-index: 100;
  padding: var(--mythos-space-3) var(--mythos-space-5); min-height: var(--mythos-size-touch-min); display: inline-flex; align-items: center;
  background: var(--mythos-surface-card); color: var(--mythos-text-primary); border: 1px solid var(--mythos-border-control);
  border-radius: var(--mythos-radius-control); transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---- Focus: 2 px ring at 2 px offset, never removed (A-016) ------------------------------------- */
:focus-visible { outline: 2px solid var(--mythos-focus-ring); outline-offset: 2px; }
[tabindex="-1"]:focus:not(:focus-visible) { outline: none; }

/* ---- Reduced motion (A-018): durations -> motion-micro (tokens), transforms -> opacity ----------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: var(--mythos-motion-micro) !important;
    transition-duration: var(--mythos-motion-micro) !important;
    scroll-behavior: auto !important;
  }
}