/* Design v2 "Heather" (Milestone D1 — Skin). Token NAMES are unchanged from
   F7.1 so every screen re-skins from this one file; only VALUES moved to the
   Heather palette (docs/10-design-v2-spec.md section 4). New tokens are
   additive: --color-primary-soft, --ink-nav, --scale-1..5, --font-display,
   --font-ui, --radius-sheet, --bottom-nav-offset and the photo/scrim
   helpers.

   Contrast (WCAG AA, 4.5:1) against --color-bg #F6F2EF unless noted:
   --color-text 13.8, --color-text-secondary 6.7, --color-text-muted 5.4,
   --color-primary 5.9, --color-primary-dark 7.7, --status-success 5.4,
   --status-danger (text) >=4.5, white on --color-primary 6.6,
   --color-primary-dark on --color-primary-soft 6.6.
   --color-primary stays the action/fill colour; --color-primary-dark is
   the one used for interactive TEXT. */
:root {
  /* Core */
  --color-primary: #7B4F73;
  --color-primary-dark: #654060;
  --color-primary-soft: #EADFE8;
  --color-secondary: #385A72;
  --color-accent: #E3B25C;
  --color-accent-pressed: #CC9A44;
  --color-on-primary: #FFFFFF;
  --color-on-photo: #FFFFFF;

  /* Surfaces */
  --color-bg: #F6F2EF;
  --color-bg-warm: #FBF8F5;
  --color-card: #FFFDFB;
  --color-surface-soft: #EFE9EC;
  --color-surface-muted: #E6DEE3;
  --ink-nav: #2A2230;

  /* Text */
  --color-text: #2A2230;
  --color-text-secondary: #5C5262;
  --color-text-muted: #6B5F70;
  --color-placeholder: #7A7082;

  /* Lines */
  --color-border: #DDD3DA;
  --color-divider: #E1D8DE;
  --color-disabled: #C9C0CB;

  /* Status */
  --status-success: #4E6B4B;
  --status-warning: #F0B24B;
  --status-danger: #A8423F;
  --status-inactive: #D8D0D8;

  /* Skin scale — the one categorical ramp (calm to rough) */
  --scale-1: #9DB596;
  --scale-2: #E3C26E;
  --scale-3: #D49A7A;
  --scale-4: #B58AAE;
  --scale-5: #7B4F73;

  /* Categories — retained so existing accordions/chart series resolve;
     repointed to the restrained Heather palette. Retired in D2. */
  --category-medication: #7B4F73;
  --category-general: #6F8F6B;
  --category-training: #C98A4B;
  --category-movement: #4E6B4B;
  --category-physio: #8C6A9A;
  --category-itchiness: #B58AAE;
  --category-poop: #8A6A52;

  /* Typography */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-ui: "Figtree", -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;

  /* Spacing */
  --space-0-5: 4px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;

  /* Radius */
  --radius-small: 10px;
  --radius-input: 14px;
  --radius-button: 16px;
  --radius-card: 16px;
  --radius-large: 16px;
  --radius-sheet: 28px;
  --radius-pill: 999px;

  /* Shadow */
  --shadow-card:
    0 1px 3px rgba(42, 34, 48, 0.06), 0 1px 2px rgba(42, 34, 48, 0.04);

  --shadow-floating:
    0 8px 24px rgba(42, 34, 48, 0.18);

  /* Photo scrims and overlays */
  --scrim-sheet: rgba(32, 20, 36, 0.5);
  --scrim-photo: linear-gradient(to top, rgba(32, 20, 36, 0.74) 0%, rgba(32, 20, 36, 0.36) 42%, rgba(32, 20, 36, 0) 70%);
  --overlay-on-photo: rgba(32, 20, 36, 0.38);
  --overlay-on-photo-soft: rgba(32, 20, 36, 0.18);
  --focus-ring: rgba(123, 79, 115, 0.22);
  --hairline: rgba(42, 34, 48, 0.08);
  --text-shadow-photo: 0 1px 4px rgba(0, 0, 0, 0.28);

  /* Motion */
  --motion-fast: 150ms;
  --motion-standard: 180ms;
  --motion-slow: 220ms;
  --motion-sheet: 320ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-sheet: cubic-bezier(0.2, 0.9, 0.25, 1);

  /* Theme previews (Appearance swatches): fixed, so every theme shows its own
     colours whichever one is active. Not overridden by any theme. */
  --swatch-autumn-primary: #7B4F73;
  --swatch-autumn-bg: #F6F2EF;
  --swatch-spring-primary: #4C5A9B;
  --swatch-spring-bg: #F4F5F8;
  --swatch-summer-primary: #946000;
  --swatch-summer-bg: #FBF7E6;
  --swatch-winter-primary: #3F5D7D;
  --swatch-winter-bg: #F2F4F6;

  /* Layout */
  --screen-padding: 20px;
  /* One banner size and one fade for Today and Wilma. */
  --hero-height: clamp(230px, 64vw, 270px);
  --hero-fade: linear-gradient(to bottom, #000 0%, #000 42%, rgba(0, 0, 0, 0.5) 70%, transparent 95%);
  --bottom-nav-height: 62px;
  --bottom-nav-offset: 8px;
  /* Space beneath the floating nav: the smaller of "a little" and the home
     indicator's inset, so the pill sits just clear of the indicator instead of
     floating a full inset higher. Every "clear the nav" calculation and the
     scrim behind the nav use this one value. */
  --bottom-nav-gap: max(var(--bottom-nav-offset), calc(env(safe-area-inset-bottom) - 8px));
}

/* Seasonal themes (D5 feature; the architecture lands in D1). A theme may
   override ONLY these six tokens — everything that carries meaning (skin
   scale, success, text, status) is fixed across seasons. Autumn Heather is
   the default and is the :root block above, so it needs no block here.
   Nothing sets data-theme yet; D5 adds the Settings control. */
:root[data-theme="spring"] {
  --color-primary: #4C5A9B;
  --color-primary-dark: #3B4780;
  --color-primary-soft: #E2E6F4;
  --color-bg: #F4F5F8;
  --color-accent: #E8C56A;
  --ink-nav: #232738;
}

:root[data-theme="summer"] {
  --color-primary: #946000;
  --color-primary-dark: #784E00;
  --color-primary-soft: #F8EBB4;
  --color-bg: #FBF7E6;
  --color-accent: #F5C518;
  --ink-nav: #2E2410;
}

:root[data-theme="winter"] {
  --color-primary: #3F5D7D;
  --color-primary-dark: #304A66;
  --color-primary-soft: #DFE8F1;
  --color-bg: #F2F4F6;
  --color-accent: #DDB86E;
  --ink-nav: #1F2A36;
}