/*
 * PhoneRemo base styles (spec §9): self-hosted fonts, a small modern reset,
 * typography, focus, selection and a few layout utilities. Load after
 * tokens.css and before components.css. Every rule uses logical properties so
 * Hebrew (RTL, the default) and English (LTR) are both native.
 */

/* ---- fonts (§9.3) --------------------------------------------------------
 * Rubik is one variable family (300–900) split into a Hebrew and a Latin
 * subset by unicode-range; the browser downloads only what a page uses.
 * Pages preload the Hebrew subset (the default language).
 */
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('./fonts/rubik-var-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('./fonts/rubik-var-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;
}
/*
 * A metric-compatible stand-in shown while Rubik loads, so the swap does not
 * shift layout (CLS). Measured in Chromium: Rubik is 3.6 % (Latin) to 4.1 %
 * (Hebrew) wider than Arial, ascent .935, descent .25.
 */
@font-face {
  font-family: 'Rubik Fallback';
  src: local('Arial'), local('ArialMT'), local('Liberation Sans'), local('Helvetica');
  size-adjust: 104%;
  ascent-override: 90%;
  descent-override: 24%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./fonts/jetbrains-mono-latin-400.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212;
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./fonts/jetbrains-mono-latin-700.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2122, U+2212;
}

/* ---- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  color-scheme: dark;
  background: var(--bg);
  hanging-punctuation: first last;
}
[data-theme="light"] { color-scheme: light; }
body {
  margin: 0;
  min-block-size: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd, ul, ol { margin: 0; }
ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
h1, h2, h3, h4, h5, h6 { font-weight: var(--fw-bold); line-height: var(--lh-tight); text-wrap: balance; }
p { text-wrap: pretty; }
img, svg, video, canvas, picture { display: block; max-inline-size: 100%; }
img, video { block-size: auto; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
a { color: var(--accent-hover); text-decoration-thickness: .08em; text-underline-offset: .2em; }
a:hover { color: var(--violet-300); }
[data-theme="light"] a:hover { color: var(--violet-700); }
hr { border: 0; border-block-start: 1px solid var(--border); margin-block: var(--s-6); }
[hidden] { display: none !important; }
code, kbd, samp, pre { font-family: var(--font-mono); font-size: .92em; }
:where(input, textarea)::placeholder { color: var(--text-faint); opacity: 1; }
::selection { background: color-mix(in oklab, var(--violet-500) 55%, transparent); color: var(--text); }

/* ---- focus ------------------------------------------------------------------
 * Visible only for keyboard / remote focus. tv.css makes it bigger and adds
 * the spring scale; components may add their own glow.
 */
:focus { outline: none; }
:focus-visible {
  outline: var(--ring-width) solid var(--focus);
  outline-offset: var(--ring-offset);
}

/* ---- scrollbars ------------------------------------------------------------ */
* { scrollbar-width: thin; scrollbar-color: var(--ink-600) transparent; }

/* ---- typography helpers ----------------------------------------------------- */
.pr-display {
  font-size: clamp(var(--fs-3xl), 6vw, var(--fs-5xl));
  font-weight: var(--fw-black);
  line-height: 1.02;
  letter-spacing: var(--tracking-display);
}
.pr-h1 { font-size: var(--fs-4xl); font-weight: var(--fw-black); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.pr-h2 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); }
.pr-h3 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-snug); }
.pr-h4 { font-size: var(--fs-xl); font-weight: var(--fw-medium); line-height: var(--lh-snug); }
.pr-lead { font-size: var(--fs-lg); line-height: var(--lh-body); color: var(--text-muted); }
.pr-eyebrow {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--signal);
  letter-spacing: .08em;
}
:lang(en) .pr-eyebrow { text-transform: uppercase; }
.pr-muted { color: var(--text-muted); }
/* Faint text is below AA for body sizes: use it only for large or non-essential text. */
.pr-faint { color: var(--text-faint); }
.pr-mono { font-family: var(--font-mono); font-feature-settings: 'zero' 1; }
.pr-num { font-variant-numeric: tabular-nums; }
.pr-gradient-text {
  background: linear-gradient(100deg, var(--text) 10%, var(--violet-300) 55%, var(--mint-400) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---- surfaces and layout utilities ------------------------------------------ */
/* The cinematic page backdrop: a deep base with two soft light sources. */
.pr-backdrop {
  background:
    radial-gradient(60rem 40rem at 85% -10%, color-mix(in oklab, var(--violet-600) 26%, transparent), transparent 70%),
    radial-gradient(50rem 36rem at 0% 110%, color-mix(in oklab, var(--mint-600) 12%, transparent), transparent 70%),
    var(--bg);
}
[dir="rtl"] .pr-backdrop {
  background:
    radial-gradient(60rem 40rem at 15% -10%, color-mix(in oklab, var(--violet-600) 26%, transparent), transparent 70%),
    radial-gradient(50rem 36rem at 100% 110%, color-mix(in oklab, var(--mint-600) 12%, transparent), transparent 70%),
    var(--bg);
}
.pr-stack { display: flex; flex-direction: column; gap: var(--stack-gap, var(--s-4)); }
.pr-row { display: flex; align-items: center; gap: var(--row-gap, var(--s-3)); flex-wrap: wrap; }
.pr-spacer { flex: 1 1 auto; }
.pr-center { display: grid; place-items: center; }
.pr-visually-hidden {
  position: absolute !important;
  inline-size: 1px; block-size: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap;
}

/* Player color carriers: any element with .pr-pN exposes --pc (and --pc-ink for
 * legible text on it). Overrides from setPlayerMeta are set with CSSOM
 * (el.style.setProperty('--pc', color)), never with a style attribute. */
.pr-p0 { --pc: var(--p0); } .pr-p1 { --pc: var(--p1); } .pr-p2 { --pc: var(--p2); } .pr-p3 { --pc: var(--p3); }
.pr-p4 { --pc: var(--p4); } .pr-p5 { --pc: var(--p5); } .pr-p6 { --pc: var(--p6); } .pr-p7 { --pc: var(--p7); }
.pr-p0 { --pc-ink: #FFFFFF; }
.pr-p1, .pr-p2, .pr-p3, .pr-p4, .pr-p5, .pr-p6, .pr-p7 { --pc-ink: var(--ink-950); }

/* Icons from the sprite: <svg class="pr-icon"><use href="/ds/icons.svg#i-play"/></svg>. The sprite sets
 * stroke/fill to currentColor itself, so an icon takes the text color. */
.pr-icon {
  inline-size: var(--icon-size, 1.25em);
  block-size: var(--icon-size, 1.25em);
  flex: none;
  color: inherit;
  vertical-align: middle;
}
/* Direction-aware icons (arrows, chevrons, back) mirror in RTL. */
[dir="rtl"] .pr-icon--flip { transform: scaleX(-1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}