/* ============================================================================
   STAND EASY - Design Tokens
   A warm, hopeful, Headspace-inspired system for UK veterans' mental health.
   Palette deliberately avoids the two failure modes: clinical (cold blue +
   pure white) and military (olive/khaki/camo). Warm sand canvas, grounded
   teal-green primary, soft apricot accent. All text pairings meet WCAG AA.
   ============================================================================ */

:root {
  /* ---- Surfaces (warm, never clinical) ---- */
  --color-bg:            #FBF7F0;  /* warm sand-cream canvas */
  --color-bg-tint:       #F6EFE4;  /* subtly deeper canvas for sections */
  --color-surface:       #FFFFFF;  /* cards & sheets */
  --color-surface-raised:#FFFDFA;
  --color-surface-sunken:#F4EDE3;
  --color-border:        #EAE1D4;  /* hairline dividers */
  --color-border-strong: #DED2BF;

  /* ---- Primary: hopeful grounded teal-green ---- */
  --color-primary-50:  #E6F2EF;
  --color-primary-100: #C7E3DC;
  --color-primary-200: #9CCDC1;
  --color-primary-300: #6BB3A3;
  --color-primary-400: #459683;
  --color-primary:     #2E7D6B;
  --color-primary-strong: #246456;
  --color-primary-700: #1C4E44;
  --color-primary-900: #11302B;

  /* ---- Accent: warm apricot (Headspace warmth, softened) ---- */
  --color-accent-50:  #FCF1E9;
  --color-accent-100: #F8DEC9;
  --color-accent-200: #F2C29E;
  --color-accent-300: #EDA877;
  --color-accent:     #E8915B;
  --color-accent-strong: #A24A1F;

  /* ---- Tertiary illustration tints (not for text) ---- */
  --color-rose:  #E7B7A8;
  --color-sky:   #BFD8DE;

  /* ---- Text ramp (all AA+ on cream) ---- */
  --color-text:          #23302E;  /* warm near-black, 13.5:1 (AAA) */
  --color-text-secondary:#5A6664;  /* 6.0:1 (AA) */
  --color-text-tertiary: #8A938F;  /* large/UI only */
  --color-on-primary:    #FFFFFF;
  --color-on-accent:     #3A2415;

  /* ---- Semantic (gentle, non-alarming) ---- */
  --color-success:       #3E8E7E;
  --color-success-text:  #2C6A5D;
  --color-info:          #4F8AA8;
  --color-warning:       #D89A3C;
  --color-warning-text:  #9A6A1E;
  --color-danger:        #C0564B;  /* muted brick-red, never fire-engine */
  --color-danger-text:   #A8443A;
  --color-danger-soft:   #F7E7E3;

  /* ---- RAG (case-handler status) ---- */
  --rag-green:    #3E8E7E;
  --rag-green-bg: #E6F2EF;
  --rag-amber:    #D89A3C;
  --rag-amber-bg: #FBEFD9;
  --rag-red:      #C0564B;
  --rag-red-bg:   #F7E3DF;

  /* ---- Mood scale (5-point, low-arousal, no red=bad moralising) ---- */
  --mood-1: #7E8CA8;  /* very low - dusty blue */
  --mood-2: #9AAFB6;  /* low - slate-teal */
  --mood-3: #C9C2B4;  /* neutral - warm grey */
  --mood-4: #E8B57E;  /* good - soft amber */
  --mood-5: #E89B6B;  /* great - apricot */

  /* ---- Typography ---- */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --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 (round everything; no sharp edges) ---- */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-xl:   32px;
  --radius-pill: 999px;

  /* ---- Soft, warm-tinted shadows (never hard black) ---- */
  --shadow-xs:   0 1px 2px rgba(60,45,30,.04);
  --shadow-sm:   0 2px 8px rgba(60,45,30,.06);
  --shadow-md:   0 6px 20px rgba(60,45,30,.08);
  --shadow-lg:   0 12px 32px rgba(60,45,30,.10);
  --shadow-card: 0 4px 16px rgba(46,125,107,.06);

  /* ---- 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-primary);
}

/* ---- 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.15; margin: 0; color: var(--color-text); }
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; }
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); }
.u-label   { font-size: var(--fs-label); letter-spacing: .04em; text-transform: uppercase; font-weight: 600; 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; }