/* Tokens and base (docs/ui-ux/frontend-renewal.md, Theme).
   Load order: rn-tokens → rn-canonical → rn-shell → rn-components → rn-views.
   This file declares the cascade layers. `canonical` holds the shared partial
   styles kept from the retired app.css (rn-canonical.css); every unlayered rule
   wins over it regardless of specificity. Lengths are rem (1rem = the browser
   default); breakpoints px. */

@layer rn-base, canonical;

:root[data-interface="renewal"] {
  /* Surfaces */
  --rn-canvas: #111a1b;
  --rn-rail: #172326;
  --rn-surface: #1d2c30;
  --rn-raised: #243639;
  --rn-sink: #0d1516;
  --rn-border: #35484b;
  --rn-hair: #2a3c3f;
  /* Text */
  --rn-text: #eef0e8;
  --rn-text-2: #b6c4c2;
  --rn-text-3: #93a5a3;
  /* Interaction */
  --rn-accent: #69b8b5;
  --rn-accent-soft: rgb(105 184 181 / 0.14);
  --rn-primary: #286f73;
  --rn-primary-hover: #2f8086;
  --rn-on-primary: #f4f6ef;
  /* Meaning (colour roles: words and glyphs always accompany these) */
  --rn-warning: #e5b35f;
  --rn-warning-bg: rgb(229 179 95 / 0.1);
  --rn-danger: #ed9290;
  --rn-danger-bg: rgb(237 146 144 / 0.1);
  --rn-success: #88c9a5;
  --rn-brass: #c4a46a;
  /* Shape and rhythm */
  --rn-radius: 0.3125rem;
  --rn-radius-sm: 0.1875rem;
  --rn-gap: 1.25rem;
  --rn-row: 2.75rem;
  /* Shell geometry, by viewport band (design contract, Initial sizing) */
  --rn-rail-l: 10rem;
  --rn-rail-r: 16rem;
  --rn-utility-h: 3rem;
  --rn-gutter: 1.5rem;
  /* Type: Plex Sans for everything read, numbers included; Mono for codes only */
  --rn-font: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rn-mono: "IBM Plex Mono", ui-monospace, "Cascadia Code", Consolas, monospace;
  /* Motion */
  --rn-fast: 120ms;
  --rn-slide: 180ms;

  /* The older palette names, remapped so shared canonical partials (item refs,
     portraits, glyphs, grade marks) sit in the theme.
     Legacy numeric Mono retires: --mono resolves to Plex Sans with tabular
     figures (the .num rule supplies tabular-nums). */
  --bg: var(--rn-canvas);
  --panel: var(--rn-surface);
  --panel-2: var(--rn-raised);
  --sink: var(--rn-sink);
  --line: var(--rn-border);
  --line-2: var(--rn-hair);
  --rule: var(--rn-border);
  --text: var(--rn-text);
  --muted: var(--rn-text-2);
  --faint: var(--rn-text-3);
  --accent: var(--rn-accent);
  --accent-ink: #06141a;
  --warn: var(--rn-warning);
  --bad: var(--rn-danger);
  --good: var(--rn-success);
  --radius: var(--rn-radius-sm);
  --ui: var(--rn-font);
  --mono: var(--rn-font);
}

@media (min-width: 1280px) {
  :root[data-interface="renewal"] { --rn-rail-l: 11.5rem; --rn-rail-r: 18rem; --rn-gutter: 1.75rem; }
}
@media (min-width: 1600px) {
  :root[data-interface="renewal"] { --rn-rail-l: 13rem; --rn-rail-r: 20rem; --rn-gutter: 2rem; }
}

/* 100% is the browser's own default, so 1rem follows the player's text size. */
html[data-interface="renewal"] { font-size: 100%; }

@layer rn-base {
  *, *::before, *::after { box-sizing: border-box; }
  [hidden] { display: none !important; }
}

.rn {
  margin: 0;
  padding: 0;
  background: var(--rn-canvas);
  color: var(--rn-text);
  font: 400 1rem/1.5 var(--rn-font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
.rn :where(h1, h2, h3, h4) { font-family: var(--rn-font); font-weight: 600; margin: 0; }
.rn :where(p) { margin: 0; }
.rn :where(a) { color: var(--rn-accent); }
.rn :where(button, input, select, textarea) { font: inherit; color: inherit; }
.rn :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 0.125rem solid var(--rn-accent);
  outline-offset: 0.125rem;
}
.rn-num { font-variant-numeric: tabular-nums; }
.rn-code { font-family: var(--rn-mono); }
.rn .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.rn-i { width: 1.25rem; height: 1.25rem; flex: none; display: inline-block; vertical-align: middle; }

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