/* ==========================================================================
   Zoo — tokens.css
   Design tokens: light/dark themes, typography scale, spacing, elevation.
   Reference direction: a white editorial layout with one confident blue accent,
   headlines set over photography, and no decorative clutter.
   ========================================================================== */

:root {
  /* ---- brand accents ----
     The accent is used both as link text on white and as a button fill with a
     white label, so it has to clear 4.5:1 in both directions: #1772c2 gives
     4.97:1 either way, while #1a7fd4 (the visual target) only reaches 4.17. */
  --c-accent: #1772c2;
  --c-accent-strong: #125fa6;
  --c-accent-soft: #eaf3fc;
  --c-emerald: #0f8a7a;
  --c-emerald-soft: #e6f5f2;
  --c-amber: #b45309;
  --c-violet: #6d5bd0;
  --c-danger: #d92d20;

  /* ---- surfaces (light) ---- */
  --c-bg: #ffffff;
  --c-surface: #ffffff;
  --c-surface-2: #f6f8fa;
  --c-surface-3: #eef1f5;
  --c-border: #e6eaef;
  --c-border-strong: #d3dae3;

  /* ---- text (light) ---- */
  --c-text: #101828;
  --c-text-soft: #475467;
  /* muted text is used at 11-13px, so it must still clear 4.5:1 on --c-surface-2 */
  --c-text-muted: #5b6a7e;
  --c-text-invert: #ffffff;
  /* label colour for filled buttons; dark text is used in the dark theme where
     the accent is light */
  --c-on-accent: #ffffff;

  /* ---- effects ---- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-sm: 0 2px 6px rgba(16, 24, 40, .06);
  --shadow-md: 0 8px 24px rgba(16, 24, 40, .08);
  --shadow-lg: 0 18px 48px rgba(16, 24, 40, .14);
  --ring: 0 0 0 3px rgba(26, 127, 212, .3);

  /* ---- photography overlays ---- */
  --overlay-scrim: linear-gradient(180deg, rgba(6, 14, 24, 0) 34%, rgba(6, 14, 24, .55) 62%, rgba(6, 14, 24, .88) 100%);

  /* ---- typography ---- */
  --font-sans: "Manrope", "Inter", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Georgia, "Times New Roman", serif;
  --font-ar: "Tajawal", "Cairo", "Noto Naskh Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-head: var(--font-sans);
  --fs-11: .6875rem;
  --fs-12: .75rem;
  --fs-13: .8125rem;
  --fs-14: .875rem;
  --fs-15: .9375rem;
  --fs-16: 1rem;
  --fs-18: 1.125rem;
  --fs-20: 1.25rem;
  --fs-24: 1.5rem;
  --fs-28: 1.75rem;
  --fs-34: 2.125rem;
  --fs-42: 2.625rem;
  --lh-tight: 1.22;
  --lh-snug: 1.38;
  --lh-body: 1.72;

  /* ---- spacing / geometry ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --radius-sm: 6px;
  --radius: 10px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---- layout ---- */
  --container: 1240px;
  --gutter: 24px;
  --sidebar-w: 320px;
  --header-h: 66px;
  --topbar-h: 34px;

  /* ---- motion ---- */
  --t-fast: .14s ease;
  --t: .22s cubic-bezier(.4, 0, .2, 1);

  color-scheme: light;
}

/* ==========================  DARK THEME  ================================= */
:root[data-theme="dark"] {
  --c-bg: #0e1420;
  --c-surface: #161e2c;
  --c-surface-2: #1c2536;
  --c-surface-3: #243044;
  --c-border: #26324a;
  --c-border-strong: #33425e;

  --c-text: #e9eef6;
  --c-text-soft: #b9c5d6;
  --c-text-muted: #93a2b8;
  --c-text-invert: #0e1420;

  --c-accent: #4c9dff;
  --c-accent-strong: #7ab8ff;
  --c-accent-soft: #12293f;
  /* the dark accent is light, so filled buttons take dark labels */
  --c-on-accent: #0e1420;
  --c-emerald: #34d3b4;
  --c-emerald-soft: #102b28;
  --c-amber: #f0a44a;
  --c-violet: #a882ff;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .45);
  --shadow-md: 0 10px 28px rgba(0, 0, 0, .5);
  --shadow-lg: 0 22px 54px rgba(0, 0, 0, .6);
  --ring: 0 0 0 3px rgba(76, 157, 255, .35);

  color-scheme: dark;
}

/* Category accents, theme-aware. The `-ink` values are the small-caps pill
   label colours and must clear 4.5:1 against their own 14-16% tint; the base
   values are used for chart marks and mini-thumbnails.
   NOTE: dark overrides MUST repeat the `:root` prefix — `:root` and
   `[data-theme="dark"]` have equal specificity (0,1,0), so without it the light
   palette wins in dark mode regardless of order. */
:root {
  --cat-wild: #0f8a7a;
  --cat-wild-ink: #0b6b5f;
  --cat-care: #1a7fd4;
  --cat-care-ink: #1466ad;
  --cat-supplies: #b45309;
  --cat-supplies-ink: #92400e;
  --cat-birds: #6d5bd0;
  --cat-birds-ink: #5843b8;
}
:root[data-theme="dark"] {
  --cat-wild: #34d3b4;
  --cat-wild-ink: #4fe0c3;
  --cat-care: #4c9dff;
  --cat-care-ink: #6cb0ff;
  --cat-supplies: #f0a44a;
  --cat-supplies-ink: #ffbb6b;
  --cat-birds: #c4a8ff;
  --cat-birds-ink: #d3bdff;
}