/* ============================================================================
   STAND TO - Design Tokens  ·  "FIELD" dark theme
   Grounded, quietly strong identity for UK military veterans. NOT clinical,
   NOT airy wellness. Deep pine-charcoal canvas, bone text, a single ember
   signal accent, mil-spec mono labels + Fraunces serif headlines.
   Token NAMES are unchanged from the light theme so the whole app re-skins;
   the light/dark ramps are inverted (the -50 tints are now dark subtle
   surfaces, the -strong colours are bright-on-dark for text/icons).
   ============================================================================ */

:root {
  /* ---- Surfaces (deep pine-charcoal, layered) ---- */
  --color-bg:            #10150F;  /* base canvas */
  --color-bg-tint:       #0C100B;  /* deeper, behind the app */
  --color-surface:       #1A221A;  /* cards & sheets */
  --color-surface-raised:#212B20;
  --color-surface-sunken:#141B14;
  --color-border:        #2B382A;  /* hairline dividers */
  --color-border-strong: #3A4B38;

  /* ---- Primary: grounded pine-green (calm, structural; button fills) ---- */
  --color-primary-50:  #16241D;  /* dark green-tinted surface (chips, banners) */
  --color-primary-100: #1C2F26;
  --color-primary-200: #2A4438;
  --color-primary-300: #3E6655;
  --color-primary-400: #2E8069;
  --color-primary:     #2E8069;  /* fill (white text reads on it) */
  --color-primary-strong: #7FC2A8;  /* bright-on-dark: text / icons / links */
  --color-primary-700: #9CD2BB;
  --color-primary-900: #C7E8DC;

  /* ---- Accent: EMBER - the one signal colour, used sparingly ---- */
  --color-accent-50:  #2A1812;  /* dark ember-tinted surface */
  --color-accent-100: #3A2016;
  --color-accent-200: #5E3422;
  --color-accent-300: #B5572C;
  --color-accent:     #E0683A;  /* ember fill */
  --color-accent-strong: #F0976A;  /* bright-on-dark ember for text/icons */

  /* ---- Tertiary illustration tints ---- */
  --color-rose:  #C77B66;
  --color-sky:   #4C6A74;

  /* ---- Text ramp (bone -> sage -> faint, all AA on the dark canvas) ---- */
  --color-text:          #ECE7D8;  /* bone */
  --color-text-secondary:#A6AE9E;  /* sage-grey */
  --color-text-tertiary: #6E776A;  /* faint, UI/large only */
  --color-on-primary:    #FFFFFF;  /* white on the deep-green fill */
  --color-on-accent:     #1C130C;  /* near-black on ember */

  /* ---- Semantic ---- */
  --color-success:       #4E9E84;
  --color-success-text:  #88C4AE;
  --color-info:          #5B93AE;
  --color-warning:       #D49A4C;
  --color-warning-text:  #E2B36E;
  --color-danger:        #CD6552;  /* muted brick, lifted for dark */
  --color-danger-text:   #E69180;
  --color-danger-soft:   #2C1814;  /* dark red surface */

  /* ---- RAG (case-handler status, on dark) ---- */
  --rag-green:    #4E9E84;
  --rag-green-bg: #16241D;
  --rag-amber:    #D49A4C;
  --rag-amber-bg: #2A2113;
  --rag-red:      #CD6552;
  --rag-red-bg:   #2C1814;

  /* ---- Mood scale (5-point, low-arousal cool->warm, no red=bad) ---- */
  --mood-1: #5E7A8C;  /* very low - dusty slate-blue */
  --mood-2: #6E8C90;  /* low - muted teal-grey */
  --mood-3: #9A9486;  /* neutral - warm grey */
  --mood-4: #C9914E;  /* good - amber */
  --mood-5: #D9A05A;  /* great - warm amber */

  /* ---- Typography ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

  --fs-display: 2.6rem;
  --fs-h1:      2.0rem;
  --fs-h2:      1.55rem;
  --fs-h3:      1.3rem;
  --fs-title:   1.125rem;
  --fs-body-lg: 1.0625rem;
  --fs-body:    1rem;
  --fs-caption: 0.875rem;
  --fs-label:   0.75rem;

  /* ---- Radii (slightly tighter than the soft wellness theme) ---- */
  --radius-xs:   6px;
  --radius-sm:   9px;
  --radius-md:   13px;
  --radius-lg:   18px;
  --radius-xl:   26px;
  --radius-pill: 999px;

  /* ---- Shadows: deep + a hairline top-light for elevation on dark ---- */
  --shadow-xs:   0 1px 2px rgba(0,0,0,.30);
  --shadow-sm:   0 2px 8px rgba(0,0,0,.34);
  --shadow-md:   0 8px 24px rgba(0,0,0,.40);
  --shadow-lg:   0 18px 44px rgba(0,0,0,.52);
  --shadow-card: 0 2px 10px rgba(0,0,0,.28);

  /* ---- Spacing (4pt base) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 64px;

  /* ---- Motion ---- */
  --ease-calm: cubic-bezier(.22,.61,.36,1);
  --dur:       320ms;
  --dur-fast:  200ms;

  /* ---- Accessibility ---- */
  --tap-min: 48px;
  --focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-accent);
}

/* ---- Base reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; margin: 0; color: var(--color-text); letter-spacing: -.01em; }
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
p  { margin: 0 0 var(--space-3); }
a  { color: var(--color-primary-strong); text-decoration: none; }
button { font-family: inherit; border: none; background: none; color: inherit; }
img, svg { display: block; }
small { font-size: var(--fs-caption); }

/* ---- Focus visibility ---- */
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); }

/* ---- Honour reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Utilities ---- */
.u-display { font-family: var(--font-display); }
.u-muted   { color: var(--color-text-secondary); }
.u-tertiary{ color: var(--color-text-tertiary); }
.u-center  { text-align: center; }
.u-bold    { font-weight: 600; }
.u-caption { font-size: var(--fs-caption); }
/* mil-spec label: mono, wide tracking, uppercase - a Field signature */
.u-label   { font-family: var(--font-mono); font-size: var(--fs-label); letter-spacing: .16em; text-transform: uppercase; font-weight: 500; color: var(--color-text-tertiary); }
.u-hidden  { display: none !important; }
.stack > * + * { margin-top: var(--space-3); }
.stack-lg > * + * { margin-top: var(--space-5); }
.row { display: flex; align-items: center; gap: var(--space-3); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.grow { flex: 1; }
.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; }