/* ============================================================
   Wateer Theme — أزرق مائي / كحلي
   Brand: #075AA1 (primary blue) / #12113B (deep navy)
   Usage: data-brand="wateer"
   ============================================================ */

[data-brand="wateer"],
.theme-wateer {
  /* ── Brand Scale ── */
  --brand-50: #e6f0fa;
  --brand-100: #b3d4f2;
  --brand-200: #80b8ea;
  --brand-300: #4d9ce2;
  --brand-400: #1a80da;
  --brand-500: #075AA1;
  --brand-600: #064a83;
  --brand-700: #053a66;
  --brand-800: #042b4d;
  --brand-900: #12113B;
  --brand-950: #0a0920;

  /* ── Semantic Mappings ── */
  --color-accent: var(--brand-500);
  --color-accent-hover: var(--brand-600);
  --color-accent-active: var(--brand-700);
  --color-accent-text: var(--neutral-0);
  --color-brand-surface: var(--brand-950);
  --color-brand-border: rgba(7, 90, 161, 0.2);

  /* ── Brand Shadows ── */
  --shadow-brand: 0 4px 14px rgba(7, 90, 161, 0.25);
}

/* ── Wateer Light Mode ── */
[data-brand="wateer"][data-theme="light"],
.theme-wateer.theme-light {
  --brand-900: #12113B;
  --color-accent-text: var(--neutral-0);
}

/* ── Wateer Dark Mode ── (proposed fix, fix/wateer-contrast-aa)
   tokens/index.css's --color-text-link is var(--brand-500) with no
   brand-specific override, so a link/icon/selected-tab rendered in
   --brand-500 (#075AA1) on this brand's dark background is TEXT on a
   near-black ground (--color-bg-primary dark = --neutral-1000 #08090a):
     #075AA1 on #08090a  →  2.98:1  (needs 4.5:1, fails)
   Same two-role split mywateer-app already shipped for this exact reason
   (src/constants/theme.ts: `accent` for text/icons vs `accentStrong` for a
   filled surface with white on top) — `--color-accent` here keeps #075AA1
   for a FILLED surface (a button/badge background; white --color-accent-text
   on it is 7.05:1, fine in both themes), and a new `--color-accent-on-dark`
   is what dark-mode TEXT/link/icon usage should read instead:
     #3b9eff on #08090a  →  8.4:1   (mywateer-app's own dark `accent`, reused
                                     rather than deriving a third blue) */
[data-brand="wateer"][data-theme="dark"],
.theme-wateer.theme-dark {
  --color-accent-on-dark: #3b9eff;
  --color-text-link: var(--color-accent-on-dark);
}