/* ============================================================
   CLARION LABS — DESIGN SYSTEM  (ds.css)
   The single source of truth for the app re-skin.
   Light is the hero; dark is the alternate. Both derive from
   the same token names so screens stay twins.
   ============================================================ */

/* ---------- TOKENS : LIGHT (hero) ---------- */
:root,
[data-theme="light"] {
  /* surfaces — warm paper world */
  --paper:        #EFF3F0;   /* app canvas */
  --paper-dim:    #E6ECE8;   /* recessed wells */
  --surface:      #FFFFFF;   /* resting card */
  --surface-2:    #F6F9F7;   /* quiet card / input */
  --surface-3:    #FBFCFB;

  /* ink */
  --ink:          #16201C;   /* primary (green-black) */
  --ink-2:        #46514C;   /* secondary */
  --ink-3:        #79827D;   /* muted / captions */
  --ink-4:        #A2A9A4;   /* faint */

  /* lines */
  --line:         rgba(22,32,28,0.09);
  --line-2:       rgba(22,32,28,0.16);
  --line-strong:  rgba(22,32,28,0.24);

  /* brand */
  --forest:       #1F6F5B;
  --forest-deep:  #18584A;
  --forest-bright:#2A8C72;
  --forest-ink:   #0E4A3B;   /* text on wash */
  --forest-wash:  #E6F0EB;   /* tinted bg */
  --forest-wash-2:#D7E8E0;
  --on-forest:    #FFFFFF;

  /* semantic — meaning only */
  --amber:        #9A6B2E;   /* maintenance / watch */
  --amber-ink:    #6E4A18;
  --amber-wash:   #F4ECDC;
  --clay:         #B0443A;   /* flagged / low */
  --clay-ink:     #8A2E26;
  --clay-wash:    #F6E4E1;
  --good:         #1F6F5B;

  /* score gradient stops */
  --score-a:      #2A8C72;
  --score-b:      #1F6F5B;

  /* elevation (light) */
  --e0: none;
  --e1: 0 1px 2px rgba(22,32,28,0.05), 0 1px 1px rgba(22,32,28,0.03);
  --e2: 0 10px 28px -12px rgba(22,32,28,0.16), 0 2px 6px rgba(22,32,28,0.05);
  --e3: 0 30px 70px -24px rgba(22,32,28,0.26), 0 6px 16px rgba(22,32,28,0.08);
  --ring: 0 0 0 3px rgba(31,111,91,0.28);

  --grain-opacity: 0;
  color-scheme: light;
}

/* ---------- TOKENS : DARK (alternate) ---------- */
[data-theme="dark"] {
  --paper:        #0F1614;
  --paper-dim:    #0B100E;
  --surface:      #15201C;
  --surface-2:    #131D19;
  --surface-3:    #18241F;

  --ink:          #F3F6F4;
  --ink-2:        rgba(243,246,244,0.74);
  --ink-3:        rgba(243,246,244,0.50);
  --ink-4:        rgba(243,246,244,0.32);

  --line:         rgba(255,255,255,0.08);
  --line-2:       rgba(255,255,255,0.14);
  --line-strong:  rgba(255,255,255,0.22);

  --forest:       #2A8C72;
  --forest-deep:  #1F6F5B;
  --forest-bright:#36A98A;
  --forest-ink:   #8FE3C9;
  --forest-wash:  rgba(31,111,91,0.16);
  --forest-wash-2:rgba(31,111,91,0.24);
  --on-forest:    #FFFFFF;

  --amber:        #C4A060;
  --amber-ink:    #E2C589;
  --amber-wash:   rgba(196,160,96,0.14);
  --clay:         #C75C5C;
  --clay-ink:     #E89292;
  --clay-wash:    rgba(199,92,92,0.14);
  --good:         #2A8C72;

  --score-a:      #36A98A;
  --score-b:      #2A8C72;

  --e0: none;
  --e1: 0 1px 2px rgba(0,0,0,0.4);
  --e2: 0 14px 34px -16px rgba(0,0,0,0.7), 0 2px 8px rgba(0,0,0,0.4);
  --e3: 0 36px 80px -28px rgba(0,0,0,0.85), 0 8px 20px rgba(0,0,0,0.5);
  --ring: 0 0 0 3px rgba(54,169,138,0.4);

  --grain-opacity: 0.03;
  color-scheme: dark;
}

/* ---------- TYPE ---------- */
:root {
  --display: "Libre Baskerville", Georgia, serif;  /* moments only */
  --ui:      "Plus Jakarta Sans", system-ui, sans-serif; /* headings, labels, buttons */
  --body:    "Hanken Grotesk", system-ui, sans-serif;   /* paragraphs */
  --mono:    "IBM Plex Mono", ui-monospace, monospace;   /* numerals, data */

  /* spacing — 4pt rhythm */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s7: 32px; --s8: 48px; --s9: 64px; --s10: 96px; --s11: 128px;

  /* radii */
  --r-xs: 6px; --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-xl: 24px; --r-2xl: 32px; --r-pill: 999px;

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease:     cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --spring:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast: 160ms; --t: 240ms; --t-slow: 380ms;

  --shell-w: 264px;
  --maxw: 1320px;
}

/* ============================================================
   BASE
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--t) var(--ease), color var(--t) var(--ease);
}
::selection { background: var(--forest-wash-2); color: var(--forest-ink); }

/* ---------- type utilities ---------- */
.t-display {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(34px, 5vw, 60px); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--ink);
}
.t-display-sm {
  font-family: var(--display); font-weight: 700;
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.06; letter-spacing: -0.015em;
}
.t-serif { font-family: var(--display); font-weight: 700; letter-spacing: -0.01em; }
.t-h1 { font-family: var(--ui); font-weight: 600; font-size: 28px; letter-spacing: -0.02em; line-height: 1.12; }
.t-h2 { font-family: var(--ui); font-weight: 600; font-size: 21px; letter-spacing: -0.015em; line-height: 1.2; }
.t-h3 { font-family: var(--ui); font-weight: 600; font-size: 17px; letter-spacing: -0.01em; line-height: 1.3; }
.t-body { font-family: var(--body); font-size: 17px; color: var(--ink-2); line-height: 1.62; letter-spacing: -0.005em; }
.t-small { font-family: var(--body); font-size: 14.5px; color: var(--ink-3); }
.t-label {
  font-family: var(--ui); font-weight: 600; font-size: 11.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3);
}
.t-num { font-family: var(--mono); font-weight: 500; font-feature-settings: "tnum" 1; letter-spacing: -0.02em; }
.accent { color: var(--forest); }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  font-family: var(--ui); font-weight: 600; font-size: 15px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px; border-radius: var(--r); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t) var(--ease),
              background var(--t) var(--ease), border-color var(--t) var(--ease), filter var(--t) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn svg { width: 17px; height: 17px; }

.btn--primary {
  background: linear-gradient(180deg, var(--forest-bright), var(--forest));
  color: var(--on-forest);
  box-shadow: var(--e1), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn--primary:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: var(--e2), inset 0 1px 0 rgba(255,255,255,0.2); }

.btn--secondary { background: var(--surface); color: var(--ink); border-color: var(--line-2); box-shadow: var(--e1); }
.btn--secondary:hover { transform: translateY(-1px); border-color: var(--line-strong); box-shadow: var(--e2); }

.btn--ghost { background: transparent; color: var(--ink-2); }
.btn--ghost:hover { background: var(--surface-2); color: var(--ink); }

.btn--pill { border-radius: var(--r-pill); }
.btn--lg { padding: 15px 26px; font-size: 16px; }
.btn--sm { padding: 9px 14px; font-size: 13.5px; border-radius: var(--r-sm); }
.btn .arrow { transition: transform var(--t) var(--ease); }
.btn:hover .arrow { transform: translateX(3px); }

/* ============================================================
   CARDS  (elevation tiers)
   ============================================================ */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-lg); box-shadow: var(--e1);
  transition: transform var(--t) var(--ease), box-shadow var(--t) var(--ease), border-color var(--t) var(--ease);
}
.card--quiet { background: var(--surface-2); box-shadow: var(--e0); }
.card--raised { box-shadow: var(--e2); }
.card--pad { padding: var(--s7); }
.card--pad-sm { padding: var(--s6); }
.card--interactive { cursor: pointer; }
.card--interactive:hover { transform: translateY(-3px); box-shadow: var(--e2); border-color: var(--line-2); }

/* feature card with a soft brand wash header glow */
.card--feature {
  position: relative; overflow: hidden;
  background:
    radial-gradient(120% 90% at 0% 0%, var(--forest-wash) 0%, transparent 46%),
    var(--surface);
}

/* ============================================================
   CHIPS / SEGMENTED
   ============================================================ */
.chip {
  font-family: var(--ui); font-weight: 600; font-size: 14px;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--line-2); color: var(--ink-2);
  cursor: pointer; transition: all var(--t) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.chip:hover { border-color: var(--line-strong); color: var(--ink); }
.chip[aria-pressed="true"], .chip.is-active {
  background: var(--forest-wash); border-color: var(--forest); color: var(--forest-ink);
  box-shadow: inset 0 0 0 1px var(--forest);
}
.segmented {
  display: inline-flex; padding: 3px; gap: 3px;
  background: var(--paper-dim); border-radius: var(--r-pill); border: 1px solid var(--line);
}
.segmented button {
  font-family: var(--ui); font-weight: 600; font-size: 13.5px;
  padding: 7px 15px; border: none; border-radius: var(--r-pill);
  background: transparent; color: var(--ink-3); cursor: pointer;
  transition: all var(--t) var(--ease);
}
.segmented button.is-active { background: var(--surface); color: var(--ink); box-shadow: var(--e1); }

/* ============================================================
   STATUS TAGS  (semantic, rationed)
   ============================================================ */
.tag {
  font-family: var(--ui); font-weight: 600; font-size: 11px;
  letter-spacing: 0.08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: var(--r-pill); white-space: nowrap;
}
.tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: 0.9; }
.tag--need     { background: var(--forest-wash); color: var(--forest-ink); }
.tag--optimal  { background: var(--forest-wash); color: var(--forest-ink); }
.tag--maintain { background: var(--amber-wash); color: var(--amber-ink); }
.tag--low,
.tag--flag     { background: var(--clay-wash); color: var(--clay-ink); }
.tag--skip     { background: var(--paper-dim); color: var(--ink-3); }
.tag--neutral  { background: var(--paper-dim); color: var(--ink-2); }
.tag--plain::before { display: none; }

/* ============================================================
   SCORE DIAL  (SVG ring; .dial[data-score] + JS, or inline)
   ============================================================ */
.dial { position: relative; width: 132px; height: 132px; }
.dial svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.dial .track { fill: none; stroke: var(--paper-dim); stroke-width: 9; }
[data-theme="dark"] .dial .track { stroke: rgba(255,255,255,0.08); }
.dial .meter {
  fill: none; stroke: url(#clarionScore); stroke-width: 9; stroke-linecap: round;
  transition: stroke-dashoffset 1.4s var(--ease-out);
}
.dial .center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.dial .center b { font-family: var(--display); font-weight: 700; font-size: 40px; color: var(--ink); line-height: 1; }
.dial .center b .slash { font-family: var(--mono); font-size: 16px; color: var(--ink-3); font-weight: 400; }
.dial .center small { font-family: var(--ui); font-weight: 600; font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--forest); margin-top: 4px; }

/* ============================================================
   MARKER RANGE BAR  (the signature dual-range object)
   value vs Clarion band vs lab reference
   ============================================================ */
.range { width: 100%; }
.range-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.range-head .name { font-family: var(--ui); font-weight: 600; font-size: 16px; color: var(--ink); }
.range-head .val { font-family: var(--mono); font-weight: 600; font-size: 16px; color: var(--ink); }
.range-track {
  position: relative; height: 12px; border-radius: var(--r-pill);
  background: var(--paper-dim); overflow: visible;
}
.range-band {            /* the Clarion optimal band */
  position: absolute; top: 0; bottom: 0; border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--forest-bright), var(--forest));
  opacity: 0.9;
}
.range-band.is-flagged { background: linear-gradient(90deg, var(--clay), #c97a72); }
.range-marker {          /* your value */
  position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); border: 3px solid var(--ink);
  transform: translate(-50%, -50%); box-shadow: var(--e1); z-index: 2;
}
.range-marker.is-low { border-color: var(--clay); }
.range-marker.is-optimal { border-color: var(--forest); }
.range-ref {             /* lab reference tick */
  position: absolute; top: -4px; width: 2px; height: 20px; background: var(--line-strong); transform: translateX(-50%);
}
.range-scale { display: flex; justify-content: space-between; margin-top: 8px; }
.range-scale span { font-family: var(--mono); font-size: 11px; color: var(--ink-3); }
.range-caption { font-family: var(--body); font-size: 13.5px; color: var(--ink-3); margin-top: 8px; }

/* mini slider used in dashboard marker cards */
.mini-range { position: relative; height: 6px; border-radius: var(--r-pill); background: var(--paper-dim); }
.mini-range .dot { position: absolute; top: 50%; width: 12px; height: 12px; border-radius: 50%; transform: translate(-50%,-50%); box-shadow: 0 0 0 4px var(--forest-wash); background: var(--forest); }
.mini-range .dot.is-low { background: var(--clay); box-shadow: 0 0 0 4px var(--clay-wash); }

/* ============================================================
   SUPPLEMENT OBJECT  (icon + drain meter)  — branded, no photos
   ============================================================ */
.supp { display: flex; align-items: center; gap: var(--s4); padding: var(--s4); border-radius: var(--r); transition: background var(--t) var(--ease); }
.supp:hover { background: var(--surface-2); }
.supp-vial {
  position: relative; width: 44px; height: 52px; flex-shrink: 0;
  border-radius: 8px 8px 11px 11px;
  background: var(--surface-2); border: 1.5px solid var(--line-2);
  overflow: hidden; box-shadow: var(--e1);
}
.supp-vial::before { /* cap */
  content: ""; position: absolute; top: -1px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 7px; border-radius: 3px; background: var(--line-strong);
}
.supp-vial .fill { position: absolute; left: 0; right: 0; bottom: 0; background: linear-gradient(180deg, var(--forest-bright), var(--forest)); opacity: 0.85; transition: height var(--t-slow) var(--ease-out); }
.supp-vial.is-low .fill { background: linear-gradient(180deg, #cf8f49, var(--amber)); }
.supp-vial.is-out .fill { background: var(--clay); height: 4% !important; }
.supp-body { flex: 1; min-width: 0; }
.supp-name { font-family: var(--ui); font-weight: 600; font-size: 15.5px; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.supp-meta { font-family: var(--body); font-size: 13px; color: var(--ink-3); margin-top: 2px; }
.supp-days { font-family: var(--mono); font-weight: 600; font-size: 14px; text-align: right; }
.supp-days small { display: block; font-family: var(--ui); font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px; }
.supp-days.ok { color: var(--forest); }
.supp-days.low { color: var(--amber); }
.supp-days.out { color: var(--clay); }

/* ============================================================
   MONEY CLARITY BUCKETS  (need / maintain / skip)
   ============================================================ */
.buckets { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s4); }
.bucket { border-radius: var(--r-lg); padding: var(--s6); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--e1); }
.bucket-top { display: flex; align-items: center; justify-content: space-between; }
.bucket-dot { width: 10px; height: 10px; border-radius: 50%; }
.bucket--need   { border-top: 3px solid var(--forest); }
.bucket--need .bucket-dot { background: var(--forest); }
.bucket--maintain { border-top: 3px solid var(--amber); }
.bucket--maintain .bucket-dot { background: var(--amber); }
.bucket--skip   { border-top: 3px solid var(--ink-4); }
.bucket--skip .bucket-dot { background: var(--ink-4); }
.bucket h4 { font-family: var(--ui); font-weight: 600; font-size: 16px; color: var(--ink); margin-top: var(--s3); }
.bucket .sub { font-family: var(--body); font-size: 13.5px; color: var(--ink-3); margin-top: 4px; }
.bucket .amt { font-family: var(--mono); font-weight: 600; font-size: 22px; color: var(--ink); margin-top: var(--s4); }

/* ============================================================
   ICON BADGE
   ============================================================ */
.ibadge { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: var(--forest-wash); color: var(--forest); flex-shrink: 0; }
.ibadge svg { width: 21px; height: 21px; }
.ibadge--amber { background: var(--amber-wash); color: var(--amber); }
.ibadge--clay  { background: var(--clay-wash); color: var(--clay); }
.ibadge--neutral { background: var(--paper-dim); color: var(--ink-2); }

/* ============================================================
   REVEAL / MOTION
   ============================================================ */
/* Progressive enhancement — content stays readable if reveal JS is slow or scroll is blocked */
[data-reveal] { opacity: 1; transform: none; }
.js-reveal [data-reveal]:not(.in) {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  transition-delay: var(--delay, 0ms);
}
.js-reveal [data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

.divider { height: 1px; background: var(--line); border: none; }
.wash { background: var(--forest-wash); }