/* Vitesta theme — single source of truth for colours, type & base styles.
   Warm dark brand theme. To retheme, edit the variables in :root only — the Tailwind
   tokens in each page's tailwind.config point at these variables, so one change here
   re-themes the whole app. Fonts are loaded and named here too (see @import + --font-*). */

/* Brand fonts — self-hosted (woff2, latin subset) so type is centralised like colour
   with no third-party request. font-display:swap → text shows immediately in the
   fallback and swaps to the brand face when it loads. */
@font-face{font-family:'Spectral';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/spectral-400.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/spectral-500.woff2') format('woff2')}
@font-face{font-family:'Spectral';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/spectral-600.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/hanken-grotesk-400.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/hanken-grotesk-500.woff2') format('woff2')}
@font-face{font-family:'Hanken Grotesk';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/hanken-grotesk-600.woff2') format('woff2')}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/spline-sans-mono-400.woff2') format('woff2')}
@font-face{font-family:'Spline Sans Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/spline-sans-mono-500.woff2') format('woff2')}

:root {
  color-scheme: dark;                 /* native form controls (date pickers, scrollbars) render dark */

  /* surfaces — warm dark field, darkened for small-text legibility (contrast prioritised over exact brand) */
  --bg:        #16120D;               /* app background (deep warm near-black) — image 1 */
  --surface:   #1F1A14;               /* cards / panels — image 2 background */
  --surface2:  #271F18;               /* raised / secondary panels — image 2 second level */
  --field:     #1B1610;               /* inputs */
  --sel:       #1E2C34;               /* selected card tint (lens-blue tinted) */
  --hero:      #100D09;               /* intro hero block */
  --line:      #39322A;               /* borders / dividers */

  /* text — brightened for legibility */
  --ink:       #FAF6EE;               /* primary text (bright warm white) */
  --muted:     #C2B8A6;               /* secondary text (lighter than brand onDarkSoft, for ranges/comments) */

  /* brand
     NOTE: --mint keeps its name for compatibility but now holds the brand blue
     (Blue Lift), so existing text-mint / bg-mint usages retheme with no markup edits. */
  --primary:   #4A7290;               /* Lens Blue — button fills (cloud text ~4.8:1, AA) */
  --primaryink:#9DBCD0;               /* Blue Lift — light tint used as chip text */
  --mint:      #9DBCD0;               /* Blue Lift — text / links / icons on dark */
  --accent:    #BC6A4A;               /* Clay — warm secondary accent (was coral) */

  /* status chips (dark-tinted bg + light fg) — sage / amber / clay */
  --ok-bg:   #1F3329; --ok-fg:   #8FC2AC;   /* in range (sage) */
  --warn-bg: #33281A; --warn-fg: #E0B36A;   /* worth attention (amber) */
  --err-bg:  #331E16; --err-fg:  #D89A7E;   /* abnormal (clay — brand has no red) */

  /* 'what changed' solid latest arrow — LIGHT ink on the dark band (flips in light theme).
     Driven by CSS vars so a live theme toggle recolours the arrows without a reload. */
  --wc-arrow-in:  #A9D6A2;   /* latest sits in range (sage) */
  --wc-arrow-out: #F0B45E;   /* latest sits outside range (amber) */

  /* type — change the font here and it changes everywhere (pages map font-display/
     font-sans/font-mono to these vars in their tailwind.config). */
  --font-display: 'Spectral', Georgia, serif;              /* headings / wordmark */
  --font-sans:    'Hanken Grotesk', system-ui, sans-serif; /* body / UI */
  --font-mono:    'Spline Sans Mono', ui-monospace, monospace;

  /* base type scale (bumped for mobile readability) */
  --fs-base: 16px;
}

/* ---- LIGHT theme — the SAME brand re-grounded for a light background: warm cream (not stark white),
   Lens Blue + Clay darkened just enough to stay legible on light. Applied when <html data-theme="light">;
   the pre-paint script sets data-theme from the saved per-user choice or the global default. Everything
   reads these tokens (Tailwind utilities included), so one block re-themes the whole members app. ---- */
:root[data-theme="light"] {
  color-scheme: light;                /* native controls (date pickers, scrollbars) render light */
  --bg:        #F7F3EC;               /* warm cream */
  --surface:   #FFFFFF;               /* cards / panels */
  --surface2:  #F0EADF;               /* raised / secondary panels */
  --field:     #FFFFFF;               /* inputs */
  --sel:       #E7EEF3;               /* selected card tint (light lens-blue) */
  --hero:      #F0EAE0;               /* intro hero block */
  --line:      #E3DACB;              /* borders / dividers */
  --ink:       #241E16;               /* primary text (warm near-black) */
  --muted:     #6B6153;               /* secondary text (warm grey, AA on cream) */
  --primary:   #2C5A78;               /* Lens Blue on light — button fills (white text is AA) */
  --primaryink:#FFFFFF;               /* text on the primary fill */
  --mint:      #1C5A86;               /* Blue Lift → darker for links / icons on light */
  --accent:    #A6522F;               /* Clay, deepened for light */
  --ok-bg:   #E8F1EA; --ok-fg:   #3F7D53;   /* in range (sage) */
  --warn-bg: #F6EDD9; --warn-fg: #8A6516;   /* worth attention (amber) */
  --err-bg:  #F5E4DB; --err-fg:  #A6522F;   /* abnormal (clay — brand has no red) */
  --wc-arrow-in:  #3F6B3B;   /* DARK ink on the light band */
  --wc-arrow-out: #B26A16;
}
/* light-only fixups: the native date-picker glyph must NOT be inverted; keep selected text readable */
:root[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
:root[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: none; }
:root[data-theme="light"] ::selection { background: var(--mint); color: #fff; }

/* ---- base ---- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
html, body { background: var(--bg); }
body { color: var(--ink); font-family: var(--font-sans); font-size: var(--fs-base); line-height: 1.5; }

/* form controls render correctly on dark across browsers */
input, select, textarea, button { font: inherit; }
input, select, textarea {
  background: var(--field);
  color: var(--ink);
  border-color: var(--line);
}
input::placeholder, textarea::placeholder { color: var(--muted); opacity: 1; }
button { cursor: pointer; }

/* dark calendar/clock icon for date inputs (WebKit/Blink) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator { filter: invert(0.85); }

/* readable text selection */
::selection { background: var(--mint); color: #201C16; }

/* ===== package accents (optional, curated palette — class-based, constant in all states) ===== */
/* Soft tints layered OVER the card surface via background-image, so selecting never changes the colour.
   Tuned for the warm-dark surface; edit a single rgba here to restyle a colour everywhere. */
.acc-blue   { background-image: linear-gradient(rgba( 77,171,247,.14), rgba( 77,171,247,.14)); }
.acc-teal   { background-image: linear-gradient(rgba( 43,179,163,.14), rgba( 43,179,163,.14)); }
.acc-green  { background-image: linear-gradient(rgba( 95,174, 95,.15), rgba( 95,174, 95,.15)); }
.acc-amber  { background-image: linear-gradient(rgba(217,154, 78,.16), rgba(217,154, 78,.16)); }
.acc-rose   { background-image: linear-gradient(rgba(217,114,143,.15), rgba(217,114,143,.15)); }
.acc-violet { background-image: linear-gradient(rgba(154,127,230,.15), rgba(154,127,230,.15)); }

/* solid swatches for admin pickers/chips */
.sw-blue{background:#4dabf7}.sw-teal{background:#2bb3a3}.sw-green{background:#5fae5f}
.sw-amber{background:#d99a4e}.sw-rose{background:#d9728f}.sw-violet{background:#9a7fe6}

/* ===== paired split card ===== */
.pkg-split { background: var(--surface); border: 1px solid var(--line); border-radius: 1rem; overflow: hidden; }
.pkg-half { display:flex; align-items:center; gap:.75rem; width:100%; text-align:left; padding:.875rem; border:0; background-color: transparent; transition: box-shadow .15s ease; }
.pkg-half + .pkg-half { border-top: 1px solid var(--line); }
.pkg-half:first-child { border-top-left-radius: 1rem; border-top-right-radius: 1rem; }
.pkg-half:last-child  { border-bottom-left-radius: 1rem; border-bottom-right-radius: 1rem; }
.pkg-half.is-selected { box-shadow: inset 0 0 0 2px var(--mint); }  /* ring follows the rounded corners */

/* ===== admin packages list (replaces inline styles) ===== */
.pkg-row { display:flex; align-items:flex-start; gap:12px; }
.pkg-rowmain { flex:1 1 auto; min-width:0; }
.pkg-rank { width:42px; flex:0 0 auto; text-align:center; padding-top:2px; }
.pkg-rank-n { font-family: var(--font-display); font-size:26px; line-height:1; font-weight:700; }
.pkg-rank-cap { font-size:9px; letter-spacing:.05em; text-transform:uppercase; color: var(--muted); margin-top:3px; }
.pkg-chip { display:inline-flex; align-items:center; gap:4px; font-size:11px; color: var(--muted); }
.pkg-swatch { width:12px; height:12px; border-radius:9999px; display:inline-block; border:1px solid var(--line); }