/* ============================================================================
   IOU Design Tokens
   ----------------------------------------------------------------------------
   Purpose: single source of truth for spacing, type and semantic status colors
            used by the new card primitive and Today dashboard rebuild.

   Scope:   iouhome skin only (loaded from base.html). Other skins continue on
            style.css alone until the Today rebuild proves out.

   Rules:
     - Never hardcode a spacing value in new components. Use --sp-*.
     - Never hardcode a type size in new components. Use --tp-*.
     - Never hardcode a status color. Use --st-*, which reads from --accent
       and the skin palette so status stays theme-aware.
   ============================================================================ */

:root {
  /* ---- Space scale (8pt grid + 4pt micro) ------------------------------ */
  --sp-1: 4px;   /* micro: icon padding, chip inner */
  --sp-2: 8px;   /* tight: form control gaps */
  --sp-3: 12px;  /* default inner card padding at phone width */
  --sp-4: 16px;  /* card body padding, list item vertical rhythm */
  --sp-5: 24px;  /* card outer gutter, section separation */
  --sp-6: 32px;  /* hero padding, dashboard row gap */
  --sp-7: 48px;  /* section break */
  --sp-8: 64px;  /* page-level breathing room */

  /* ---- Type ramp (six sizes) ------------------------------------------- */
  --tp-display: clamp(28px, 4.5vw, 40px);   /* hero, Today status */
  --tp-title:   clamp(20px, 2.6vw, 24px);   /* card titles */
  --tp-subtitle: 17px;                       /* section heads */
  --tp-body:    15px;                        /* body copy */
  --tp-meta:    13px;                        /* labels, timestamps */
  --tp-micro:   11px;                        /* chips, badge text */

  /* Line heights paired to sizes */
  --lh-tight:   1.15;   /* display / title */
  --lh-normal:  1.4;    /* subtitle / body */
  --lh-loose:   1.5;    /* long-form copy */

  /* ---- Status color set (semantic, theme-aware) ------------------------ */
  /* --accent comes from the active theme (set in base.html inline block).
     Status tokens map to muted, purposeful hues that read as calm status
     rather than alert-first. Fallbacks match the modern theme. */
  --st-ok:        var(--accent, #3C7E76);              /* on-track, healthy */
  --st-ok-bg:     color-mix(in srgb, var(--st-ok) 12%, transparent);
  --st-attention: #C6870C;                              /* needs a look */
  --st-attention-bg: color-mix(in srgb, var(--st-attention) 12%, transparent);
  --st-warn:      #B4472B;                              /* time-sensitive */
  --st-warn-bg:   color-mix(in srgb, var(--st-warn) 12%, transparent);
  --st-quiet:     var(--text-light, #6b7280);           /* informational */
  --st-quiet-bg:  color-mix(in srgb, var(--st-quiet) 8%, transparent);
}

/* Dark theme override: status tokens stay legible on dark surfaces */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --st-attention:    #E5A63A;
    --st-attention-bg: color-mix(in srgb, var(--st-attention) 18%, transparent);
    --st-warn:         #E56A4E;
    --st-warn-bg:      color-mix(in srgb, var(--st-warn) 18%, transparent);
  }
}
:root[data-theme="dark"] {
  --st-attention:    #E5A63A;
  --st-attention-bg: color-mix(in srgb, var(--st-attention) 18%, transparent);
  --st-warn:         #E56A4E;
  --st-warn-bg:      color-mix(in srgb, var(--st-warn) 18%, transparent);
}