/* ════════════════════════════════════════════════════════════════
   Webbybrain — design tokens (shared across all family apps)
   ════════════════════════════════════════════════════════════════
   Override --accent in app-level theme classes:
     .app-untangle { --accent: #5E6F8C; }
     .app-regulate { --accent: #9F8AAB; }
     .app-budget   { --accent: #C9A663; }
     .app-twonests { --accent: #8AA17F; }
   Default --accent = Webbybrain umbrella clay (#C97B5A).
   ════════════════════════════════════════════════════════════════ */

/* ─── Webfont imports ────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Atkinson+Hyperlegible:wght@400;700&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ─── Surfaces (warm neutrals — same across all family apps) ── */
  --surface:     #FAF6F1;   /* page bg — warm off-white, paper-like */
  --surface-2:   #F2EBE0;   /* card bg, secondary surfaces */
  --surface-3:   #E8DFD3;   /* tertiary, hover states */

  /* ─── Ink (text — slightly warm, never pure black) ──────────── */
  --ink:         #2D2825;
  --ink-muted:   #7A7068;
  --ink-soft:    #A89E92;
  --ink-inverse: #FAF6F1;   /* on coloured backgrounds */

  /* ─── Borders ───────────────────────────────────────────────── */
  --border:       #E8DFD3;
  --border-soft:  #F2EBE0;
  --border-strong:#D9CFC1;

  /* ─── Webbybrain umbrella accent (default) ──────────────────── */
  --accent:        #C97B5A;   /* clay */
  --accent-soft:   #F4E4DA;   /* tinted bg */
  --accent-strong: #A85D3F;   /* hover/press */

  /* ─── Per-app accents (use as utility, not via theme class) ─── */
  --c-untangle: #5E6F8C;
  --c-regulate: #9F8AAB;
  --c-budget:   #C9A663;
  --c-twonests: #8AA17F;
  --c-webbybrain: #C97B5A;

  /* ─── Capacity tiers (universal across family apps) ─────────── */
  --cap-shutdown:  #A57F7F;   /* dusty earthen rose — never alarming */
  --cap-low:       #E0B891;   /* sand / faded orange */
  --cap-medium:    #D4C39A;   /* wheat / soft yellow */
  --cap-high:      #9CB594;   /* soft green */

  --cap-shutdown-soft: #F0E2E2;
  --cap-low-soft:      #F5E6D6;
  --cap-medium-soft:   #F0EAD9;
  --cap-high-soft:     #DDE9D7;

  /* ─── Status colours (used sparingly) ───────────────────────── */
  --warn:    #C9A663;
  --error:   #B26B6B;
  --success: #7E9C77;

  /* ─── Spacing (generous — whitespace is a feature) ──────────── */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 40px;
  --sp-7: 64px;
  --sp-8: 96px;

  /* ─── Type ──────────────────────────────────────────────────── */
  --font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
  --font-body:    'Atkinson Hyperlegible', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  --text-xs:   12px;
  --text-sm:   14px;
  --text-base: 16px;
  --text-lg:   18px;
  --text-xl:   22px;
  --text-2xl:  28px;
  --text-3xl:  38px;

  --leading-tight:  1.25;
  --leading-normal: 1.55;
  --leading-loose:  1.75;

  /* ─── Radii (soft, never sharp) ─────────────────────────────── */
  --r-sm:   8px;
  --r-md:   12px;
  --r-lg:   18px;
  --r-pill: 999px;

  /* ─── Shadows (warm-toned, subtle) ──────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(45, 40, 37, 0.06);
  --shadow-md: 0 8px 24px rgba(45, 40, 37, 0.08);
  --shadow-lg: 0 24px 48px rgba(45, 40, 37, 0.10);

  /* ─── Motion ────────────────────────────────────────────────── */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --duration:    180ms;
}

/* ─── App theme classes — switch the accent ─────────────────── */
.app-untangle  { --accent: #5E6F8C; --accent-soft: #E1E5EC; --accent-strong: #455673; }
.app-regulate  { --accent: #9F8AAB; --accent-soft: #ECE6F0; --accent-strong: #846E92; }
.app-budget    { --accent: #C9A663; --accent-soft: #F1E8D0; --accent-strong: #A88847; }
.app-twonests  { --accent: #8AA17F; --accent-soft: #DDE5D9; --accent-strong: #6B8362; }
.app-webbybrain{ --accent: #C97B5A; --accent-soft: #F4E4DA; --accent-strong: #A85D3F; }

/* ─── Reduced motion respect ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  :root { --duration: 0ms; }
}