/* Shared design tokens + interactive states for all three apps (client,
   dashboard, programs). Purely additive: each app keeps its own styles.css
   and its own :root color tokens untouched. This file adds the scales that
   were previously missing (type, spacing, radius, shadow) and the hover/
   focus/active/disabled states that no component in the product had, so
   they apply everywhere at once via the cascade instead of being retrofitted
   screen by screen. See "The Missing Design System" audit for the counts
   behind this file. */
:root{
  /* type system - "Ink & Violet": Instrument Sans for everything, a tabular
     mono for every number in the product (targets, sets, KPIs, timers,
     table data). The existing --pur/--pur2/--good/--warn/--bad colours are
     unchanged - this is the brand refined, not replaced. Each app's own
     index.html loads these two families from Google Fonts; the system-font
     stack stays as the fallback if that request is ever slow or blocked. */
  --font-body:'Instrument Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* type scale - replaces ad hoc font-size literals for anything touched going forward */
  --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-base:14px;
  --text-md:16px; --text-lg:20px; --text-xl:28px; --text-2xl:34px;
  /* line-height - none existed anywhere before this */
  --lh-tight:1.2; --lh-ui:1.4; --lh-body:1.6;
  /* spacing - 8px-based */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px;
  /* radius - collapses the 6-20px literal spread onto 4 named steps */
  --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-pill:999px;
  /* shadow - most surfaces should use none; borders already separate cards */
  --shadow-sm:0 2px 8px rgba(0,0,0,.22);
  --shadow-lg:0 16px 40px -14px rgba(0,0,0,.55);
}

/* ---------- interactive states ----------
   Nothing below changes layout or color identity - it only adds the states
   every interactive control needs (hover/focus/active/disabled) using the
   colors each app already defines (--pur/--pur2/--line/--bad). */
.btn,button.btn{transition:filter .1s ease, transform .05s ease;}
.btn:hover{filter:brightness(1.07);}
.btn:active{transform:translateY(1px);filter:brightness(.95);}
.btn:disabled,.btn[disabled],.btn.loading{opacity:.55;cursor:not-allowed;filter:none;transform:none;pointer-events:none;}
.btn.sec:hover{background:rgba(142,111,224,.08);}
/* Destructive - transparent, never filled, and never meant to sit in the
   same row as routine actions at the same visual weight. */
.btn.destructive{background:transparent;border:1px solid var(--bad,#E06B6B);color:var(--bad,#E06B6B);box-shadow:none;}
.btn.destructive:hover{background:rgba(224,107,107,.1);}

input,select,textarea{transition:border-color .1s ease;}
input:hover,select:hover,textarea:hover{border-color:var(--pur,#8E6FE0);}
input:disabled,select:disabled,textarea:disabled{opacity:.5;cursor:not-allowed;}

/* Keyboard focus only - mouse/touch clicks don't get an outline ring, but
   tabbing through a form does. This is the one accessibility affordance the
   product had none of anywhere. */
.btn:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
[tabindex]:focus-visible{
  outline:2px solid var(--pur2,#A98EF0);
  outline-offset:2px;
  border-radius:var(--radius-sm);
}

/* Small tap targets flagged across the mobile audit (rest-timer trigger,
   the intake form's "None" shortcut, exercise-swap selects) - a shared class
   so future one-off controls opt into a real touch target by default. */
.tap-target{display:inline-flex;align-items:center;justify-content:center;min-height:40px;padding:8px 14px;}

/* Loading / error / success feedback - a couple of screens already used
   var(--bad)/var(--good) inline for this; naming it means new code doesn't
   have to re-invent it. */
.msg.err{color:var(--bad,#E06B6B);}
.msg.ok{color:var(--good,#5BD6A0);}

/* ---------- badge ----------
   One component, colour as its only variant - replaces four separate
   implementations that had drifted apart (.pill, .flag, an inline tier
   badge and an inline status pill, each with its own padding/radius/size).
   Never made clickable - a badge states, it doesn't act (see the "compact
   label semantics" guideline: status is markup, not an interactive control). */
.badge{display:inline-flex;align-items:center;gap:4px;font-size:var(--text-2xs);font-weight:700;letter-spacing:.02em;text-transform:uppercase;padding:3px 9px;border-radius:var(--radius-pill);white-space:nowrap;line-height:var(--lh-ui);}
.badge.neutral{background:rgba(154,154,178,.16);color:var(--mut,#9a9ab2);}
.badge.good{background:rgba(91,214,160,.16);color:var(--good,#5BD6A0);}
.badge.warn{background:rgba(230,177,90,.16);color:var(--warn,#E6B15A);}
.badge.bad{background:rgba(224,107,107,.16);color:var(--bad,#E06B6B);}
.badge.accent{background:rgba(142,111,224,.18);color:var(--pur2,#A98EF0);}

/* ---------- toggle switch ----------
   A real checkbox underneath (native keyboard support, checked state,
   focus ring) styled as a switch - the one on/off control every app can
   share instead of a checkbox here, a two-state text button there, and a
   coloured pill somewhere else, all for the same "this is on or off" idea. */
label.switch{position:relative;display:inline-block;width:42px;height:24px;flex:none;cursor:pointer;}
label.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
label.switch .track{position:absolute;inset:0;background:var(--line,#2a2a3a);border-radius:var(--radius-pill);transition:background .15s ease;pointer-events:none;}
label.switch .track::before{content:"";position:absolute;width:18px;height:18px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .15s ease;}
label.switch input:checked+.track{background:var(--pur,#8E6FE0);}
label.switch input:checked+.track::before{transform:translateX(18px);}
label.switch input:focus-visible+.track{outline:2px solid var(--pur2,#A98EF0);outline-offset:2px;}
label.switch input:disabled+.track{opacity:.5;cursor:not-allowed;}

/* ---------- custom select chevron ----------
   Every input/select already shares one rule; the select's arrow was left
   as whatever the browser draws by default, which reads as unfinished
   against an otherwise fully custom dark theme. */
select{appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%239a9ab2' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");background-repeat:no-repeat;background-position:right 14px center;padding-right:34px!important;}

/* ---------- skeleton loading ----------
   Replaces the plain "Loading..." text every async screen used - same
   size and shape as the content it stands in for, so nothing jumps once
   the real content arrives, and a shimmer instead of a blank pause. */
.skeleton{background:linear-gradient(90deg,var(--card,var(--surface,#14141d)) 25%,var(--card2,var(--surface-2,#1b1b26)) 37%,var(--card,var(--surface,#14141d)) 63%);background-size:400% 100%;animation:skel-pulse 1.4s ease infinite;border-radius:var(--radius-sm);display:block;}
@keyframes skel-pulse{0%{background-position:100% 50%;}100%{background-position:0 50%;}}
@media (prefers-reduced-motion: reduce){.skeleton{animation:none;background:var(--card2,var(--surface-2,#1b1b26));}}
.skel-line{height:14px;margin-bottom:10px;}
.skel-line.w40{width:40%;} .skel-line.w60{width:60%;} .skel-line.w80{width:80%;}
.skel-block{height:72px;margin-bottom:10px;}

/* ---------- tabular mono ----------
   Applied per-app to specific numeric-only elements (KPI figures, set
   inputs, timers, data-table columns) - never to a class that can also
   hold a word, so a select full of options like "Good"/"Terrible" never
   ends up in a monospace face by accident. */
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums;}