/* ===========================================================================
   Motor de Renovaciones — design system
   Octopus Energy España · internal pricing/renewals console
   ---------------------------------------------------------------------------
   Dark-only by intent: this is an operator tool that lives on a wall screen and
   on analysts' second monitors, and OEES has no light brand surface to fall
   back to. Everything is painted explicitly — nothing relies on a UA default.

   Reading order:
     1  tokens          8  charts
     2  reset/base      9  day strip (screen 1)
     3  shell           10 filter panel + sliders (screen 2)
     4  page header     11 tables
     5  grid            12 forms & buttons
     6  cards/KPIs      13 banners, messages, misc
     7  chips & pills   14 responsive + motion
                        15 explainers & glossary
   =========================================================================== */

/* ------------------------------------------------------------- 1  tokens */

:root {
  /* Brand ---------------------------------------------------------------- */
  --siphon: #0d0030;
  --hemo: #18004a;
  --blueberry: #2d1a83;
  --ink: #5840ff;
  --tang: #6675f6;
  --soho: #f05dfb;
  --akoya: #fa89ff;
  --plum: #600e68;
  --voltage: #06f0fb;
  --ice: #fcffff;
  --dusty: #dcddff;
  --haze: #a49fc6;

  /* Status — reserved. Never a series colour, always beside a label. ------ */
  --ok: #3ddc97;
  --warn: #ffc857;
  --bad: #ff6b6b;

  /* Categorical series — validated on this surface, used in this fixed
     order and never cycled past slot 5. Colour follows the entity, not its
     rank, so filtering a series out never repaints the survivors. --------- */
  --s1: #1a9eae;
  --s2: #cf48d6;
  --s3: #b3841f;
  --s4: #6f79ee;
  --s5: #2a9e67;

  /* Sequential magnitude — one hue, light to dark (Ink family). ----------- */
  --seq1: #d7d3ff;
  --seq2: #b0a7ff;
  --seq3: #897cff;
  --seq4: #6250ff;
  --seq5: #4a35d6;
  --seq6: #33249c;

  /* Surfaces ------------------------------------------------------------- */
  --bg: var(--hemo);
  --surface: #1f0c5c;
  --card: var(--blueberry);
  --sunken: rgba(13, 0, 48, 0.55);
  --raised: rgba(88, 64, 255, 0.14);

  /* Text ----------------------------------------------------------------- */
  --text: var(--ice);
  --text-2: var(--dusty);
  --muted: var(--haze);
  /* --tang is only 3.43:1 on --card; --link is the resting link tone that
     clears AA on both --card (~5.2:1) and --bg (~7.3:1). Hover goes --soho. */
  --link: #8f9bff;

  /* Lines ---------------------------------------------------------------- */
  --border: rgba(88, 64, 255, 0.45);
  --border-subtle: rgba(164, 159, 198, 0.24);
  --grid-line: rgba(220, 221, 255, 0.13);

  /* Spacing scale -------------------------------------------------------- */
  --s1x: 4px;
  --s2x: 8px;
  --s3x: 12px;
  --s4x: 16px;
  --s6x: 24px;
  --s8x: 32px;

  /* Radii ---------------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 10px;

  /* Type scale ----------------------------------------------------------- */
  --t-xs: 13px;
  --t-sm: 13px;
  --t-md: 14px;
  --t-lg: 16px;
  --t-xl: 20px;
  --t-2xl: 28px;

  --sans:
    "Montserrat", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:
    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --shadow:
    0 1px 0 rgba(252, 255, 255, 0.05) inset,
    0 8px 24px -16px rgba(13, 0, 48, 0.9);

  color-scheme: dark;
}

/* The mock is dark-first by design intent; there is no light brand palette to
   fall back to, so an explicit light request keeps the same tokens rather than
   rendering a half-inverted scheme that would read as broken. */
:root[data-theme="light"] {
  color-scheme: dark;
}

/* --------------------------------------------------------- 2  reset/base */

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  background-image:
    radial-gradient(1200px 620px at 12% -10%, #24106b 0%, transparent 62%),
    linear-gradient(180deg, var(--hemo) 0%, var(--siphon) 78%);
  background-attachment: fixed;
  color: var(--text);
  font: var(--t-md) / 1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--link);
  text-decoration-color: rgba(143, 155, 255, 0.4);
  text-underline-offset: 2px;
}

a:hover {
  color: var(--soho);
  text-decoration-color: currentColor;
}

h1,
h2,
h3,
h4 {
  font-family: var(--sans);
  line-height: 1.2;
  margin: 0 0 var(--s2x);
  letter-spacing: -0.012em;
}

h1 {
  font-size: var(--t-2xl);
  font-weight: 700;
}

h2 {
  font-size: var(--t-xl);
  font-weight: 600;
}

h3 {
  font-size: var(--t-lg);
  font-weight: 600;
}

h4 {
  font-size: var(--t-sm);
  font-weight: 700;
  color: var(--text-2);
}

p {
  margin: 0 0 var(--s3x);
}

.mono,
code,
kbd {
  font-family: var(--mono);
  font-size: 0.92em;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.num,
.tnum {
  font-variant-numeric: tabular-nums;
}

.eyebrow {
  font-size: var(--t-xs);
  color: var(--muted);
  font-weight: 600;
  margin: 0 0 var(--s1x);
}

.hint {
  color: var(--muted);
  font-size: var(--t-sm);
  margin: var(--s1x) 0 var(--s3x);
  max-width: 78ch;
}

.lead {
  color: var(--text-2);
  font-size: var(--t-md);
  max-width: 78ch;
  margin: 0;
}

.inline {
  display: inline;
}

.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;
}

/* Focus is a first-class state: Voltage ring, everywhere, no exceptions. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--voltage);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--ice);
  padding: 10px 16px;
  border-radius: 0 0 var(--r-sm) 0;
  z-index: 100;
  font-weight: 600;
}

.skip-link:focus {
  left: 0;
}