/* ── Brand primaries (Brand Guidelines 3.0) ─────────────────────────── */
:root {
  --clairo-white: #FAFBFF;        /* Primary 01 */
  --clairo-blue: #5CB6F2;         /* Primary 02 — the action colour */
  --clairo-navy-brand: #00103D;   /* Primary 03 — print/brand navy */
  --clairo-light-blue: #9AD6F7;   /* Primary 04 — sunburst rays, on-navy text */

  /* Grayscale ramp (Brand Guidelines 3.0 — named) */
  --gray-cloud: #EDEFF7;
  --gray-smoke: #D3D6E0;
  --gray-steel: #BCBFCC;
  --gray-space: #9DA2B3;
  --gray-graphite: #6E7180;
  --gray-arsenic: #40424D;
  --gray-phantom: #1E1E24;
  --gray-black: #000000;
}

/* ── Product runtime palette ────────────────────────────────────────────
   The app declares colour as bare HSL triplets so Tailwind can compose
   opacity (bg-clairo-blue/10). Both forms are exported: use the *-hsl
   triplet inside hsl()/color-mix(), or the resolved custom property. */
:root {
  --background-hsl: 214 60% 98%; /* @kind color */
  --foreground-hsl: 222 47% 10%; /* @kind color */
  --card-hsl: 0 0% 100%; /* @kind color */
  --card-foreground-hsl: 222 47% 10%; /* @kind color */
  --popover-hsl: 0 0% 100%; /* @kind color */
  --popover-foreground-hsl: 222 47% 10%; /* @kind color */
  --primary-hsl: 207 89% 65%; /* @kind color */
  --primary-foreground-hsl: 0 0% 100%; /* @kind color */
  --secondary-hsl: 214 60% 94%; /* @kind color */
  --secondary-foreground-hsl: 222 47% 15%; /* @kind color */
  --muted-hsl: 214 40% 93%; /* @kind color */
  --muted-foreground-hsl: 215 20% 50%; /* @kind color */
  --accent-hsl: 222 47% 11%; /* @kind color */
  --accent-foreground-hsl: 0 0% 100%; /* @kind color */
  --destructive-hsl: 0 72% 58%; /* @kind color */
  --destructive-foreground-hsl: 0 0% 100%; /* @kind color */
  --border-hsl: 214 30% 88%; /* @kind color */
  --input-hsl: 214 30% 88%; /* @kind color */
  --ring-hsl: 207 89% 65%; /* @kind color */

  /* product navy — headers, hero panels */
  --clairo-navy-hsl: 222 47% 11%; /* @kind color */
  --clairo-blue-hsl: 207 89% 65%; /* @kind color */
  --clairo-light-blue-hsl: 204 85% 80%; /* @kind color */
  --clairo-cloud-hsl: 220 40% 96%; /* @kind color */

  --background: hsl(var(--background-hsl));
  --foreground: hsl(var(--foreground-hsl));
  --card: hsl(var(--card-hsl));
  --card-foreground: hsl(var(--card-foreground-hsl));
  --popover: hsl(var(--popover-hsl));
  --popover-foreground: hsl(var(--popover-foreground-hsl));
  --primary: hsl(var(--primary-hsl));
  --primary-foreground: hsl(var(--primary-foreground-hsl));
  --secondary: hsl(var(--secondary-hsl));
  --secondary-foreground: hsl(var(--secondary-foreground-hsl));
  --muted: hsl(var(--muted-hsl));
  --muted-foreground: hsl(var(--muted-foreground-hsl));
  --accent: hsl(var(--accent-hsl));
  --accent-foreground: hsl(var(--accent-foreground-hsl));
  --destructive: hsl(var(--destructive-hsl));
  --destructive-foreground: hsl(var(--destructive-foreground-hsl));
  --border: hsl(var(--border-hsl));
  --input: hsl(var(--input-hsl));
  --ring: hsl(var(--ring-hsl));

  --clairo-navy: hsl(var(--clairo-navy-hsl));
  --clairo-cloud: hsl(var(--clairo-cloud-hsl));

  /* Semantic aliases */
  --text-body: var(--foreground);
  --text-muted: var(--muted-foreground);
  --text-on-navy: #ffffff;
  --text-on-navy-soft: rgba(255, 255, 255, 0.6);
  --text-accent-on-navy: hsl(var(--clairo-light-blue-hsl));
  --surface-page: var(--background);
  --surface-card: var(--card);
  --surface-sunken: var(--muted);
  --surface-navy: var(--clairo-navy);
  --border-subtle: var(--border);
  --focus-ring: var(--ring);
  --link: var(--clairo-blue);
}

/* ── Status palette ─────────────────────────────────────────────────────
   Task and record states are painted with tinted-surface + dark-text pairs.
   approved → green, submitted/in-review → yellow, in progress → blue,
   rejected/incident → red, pending review → purple, warning → amber. */
:root {
  --status-approved-bg: #dcfce7;   --status-approved-fg: #15803d;
  --status-approved-solid: #22c55e; --status-approved-border: #bbf7d0;
  --status-approved-surface: #f0fdf4; --status-approved-strong: #166534;

  --status-submitted-bg: #fef9c3;  --status-submitted-fg: #a16207;
  --status-submitted-solid: #eab308; --status-submitted-border: #fef08a;
  --status-submitted-surface: #fefce8; --status-submitted-strong: #854d0e;

  --status-progress-bg: #dbeafe;   --status-progress-fg: #1d4ed8;
  --status-progress-solid: #2563eb; --status-progress-border: #bfdbfe;
  --status-progress-surface: #eff6ff; --status-progress-strong: #1e40af;

  --status-rejected-bg: #fee2e2;   --status-rejected-fg: #b91c1c;
  --status-rejected-solid: #dc2626; --status-rejected-border: #fecaca;
  --status-rejected-surface: #fef2f2; --status-rejected-strong: #991b1b;

  --status-review-bg: #f3e8ff;     --status-review-fg: #7e22ce;
  --status-review-solid: #9333ea;

  --status-warning-bg: #fef3c7;    --status-warning-fg: #b45309;
  --status-warning-solid: #f59e0b; --status-warning-border: #fde68a;
  --status-warning-surface: #fffbeb; --status-warning-strong: #92400e;

  --status-locked-bg: #fff7ed;     --status-locked-fg: #c2410c;
  --status-locked-border: #fed7aa; --status-locked-strong: #9a3412;

  /* Entity accents used in admin lists */
  --entity-participant-bg: #f3e8ff; --entity-participant-fg: #9333ea;
  --entity-goal-bg: #d1fae5;        --entity-goal-fg: #047857;
  --entity-family-bg: #fce7f3;      --entity-family-fg: #be185d;
  --entity-team-bg: #e0e7ff;        --entity-team-fg: #4f46e5;
}