/* ------------------------------------------------------------------ *
 * Råsta Lake — Semantic tokens
 * ------------------------------------------------------------------ *
 * Maps primitive scales to meaningful roles. Components consume ONLY
 * these (via the Tailwind utilities wired up in theme.css), never the
 * primitives directly. Light is :root, dark is .dark.
 * ------------------------------------------------------------------ */

:root {
  /* Surfaces */
  --background: var(--rl-white);
  --foreground: var(--rl-lagoon-950);
  --card: var(--rl-white);
  --card-foreground: var(--rl-lagoon-950);
  --popover: var(--rl-white);
  --popover-foreground: var(--rl-lagoon-950);

  /* Primary action — brand "black" */
  --primary: var(--rl-lagoon-950);
  --primary-foreground: var(--rl-neutral-50);

  /* Secondary / muted / accent surfaces */
  --secondary: var(--rl-neutral-100);
  --secondary-foreground: var(--rl-lagoon-900);
  --muted: var(--rl-neutral-100);
  /* Darker than a typical "muted" grey so small text (labels, table heads,
     descriptions) keeps a comfortable contrast ratio on white (~7:1). */
  --muted-foreground: var(--rl-neutral-600);
  --accent: var(--rl-neutral-100);
  --accent-foreground: var(--rl-lagoon-900);
  /* Placeholders remain lighter than muted copy while clearing 4.5:1. */
  --placeholder: var(--rl-neutral-500);

  /* Bright aqua gives brand actions and compact labels maximum clarity while
     the deep brand ink keeps small text comfortably above AA contrast. */
  --brand: var(--rl-brand-aqua);
  --brand-foreground: var(--rl-brand-ink);
  --brand-mark: var(--rl-brand-cyan);
  --brand-symbol: var(--rl-brand-cyan);
  --link: var(--rl-brand-deep);

  /* Status tints pair with their darkest family value so compact labels stay
     crisp without losing the mint and amber identities. */
  --success: var(--rl-mint-100);
  --success-foreground: var(--rl-mint-950);
  --warning: var(--rl-amber-100);
  --warning-foreground: var(--rl-amber-950);
  --destructive: var(--rl-coral-700);
  --destructive-foreground: var(--rl-white);
  --info: var(--rl-brand-deep);
  --info-foreground: var(--rl-white);

  /* Lines & focus — dividers stay subtle while controls and focus indicators
     meet the 3:1 non-text contrast requirement against white. */
  --border: var(--rl-neutral-200);
  --input: var(--rl-brand-lake);
  --ring: var(--rl-brand-deep);

  /* Charts — distinct hues + two teal shades for separation. */
  --chart-1: var(--rl-brand-lake);
  --chart-2: var(--rl-brand-mint);
  --chart-3: var(--rl-brand-amber);
  --chart-4: var(--rl-brand-coral);
  --chart-5: var(--rl-brand-cyan);

  /* Sidebar */
  --sidebar: var(--rl-neutral-50);
  --sidebar-foreground: var(--rl-lagoon-950);
  --sidebar-primary: var(--rl-lagoon-950);
  --sidebar-primary-foreground: var(--rl-neutral-50);
  --sidebar-accent: var(--rl-neutral-100);
  --sidebar-accent-foreground: var(--rl-lagoon-900);
  --sidebar-border: var(--rl-neutral-200);
  --sidebar-ring: var(--rl-brand-deep);

  /* Geometry & density — kept tight for data-dense UIs. Crisp-ish corners:
     drives rounded-md (buttons/inputs/selects) and rounded-lg (cards/dialogs). */
  --radius: 0.25rem; /* 4px */

  /* Control heights (referenced by component variants).
     Stepped 8px apart so sizes read as clearly distinct while the
     default (md) stays compact enough for dense valuation tables. */
  --control-h-sm: 1.75rem; /* 28px */
  --control-h-md: 2.25rem; /* 36px */
  --control-h-lg: 2.75rem; /* 44px */
}

.dark {
  /* Surfaces — a near-black canvas (not navy), with the brand navy lifted
     onto the card so panels read with real depth: bg < card < popover. */
  --background: var(--rl-neutral-950);
  --foreground: var(--rl-neutral-100);
  --card: var(--rl-lagoon-950);
  --card-foreground: var(--rl-neutral-50);
  --popover: var(--rl-lagoon-900);
  --popover-foreground: var(--rl-neutral-50);

  /* Primary inverts to light for contrast on the dark canvas */
  --primary: var(--rl-neutral-50);
  --primary-foreground: var(--rl-lagoon-950);

  --secondary: var(--rl-lagoon-800);
  --secondary-foreground: var(--rl-neutral-100);
  --muted: var(--rl-lagoon-800);
  /* Lighter on the dark canvas for the same readability goal. */
  --muted-foreground: var(--rl-neutral-300);
  --accent: var(--rl-lagoon-800);
  --accent-foreground: var(--rl-neutral-50);
  --placeholder: var(--rl-neutral-400);

  /* Bright aqua remains vivid and legible on dark surfaces. */
  --brand: var(--rl-brand-aqua);
  --brand-foreground: var(--rl-lagoon-950);
  --brand-mark: var(--rl-brand-cyan);
  --brand-symbol: var(--rl-brand-aqua);
  --link: var(--rl-brand-aqua);

  --success: var(--rl-mint-900);
  --success-foreground: var(--rl-mint-100);
  --warning: var(--rl-amber-900);
  --warning-foreground: var(--rl-amber-100);
  /* Lighter coral/ocean fills so dark text on them clears AA (4.5:1). */
  --destructive: var(--rl-coral-400);
  --destructive-foreground: var(--rl-lagoon-950);
  --info: var(--rl-lagoon-300);
  --info-foreground: var(--rl-lagoon-950);

  /* Divider lines stay subtle (dark teal); control borders (--input) are
     much lighter so checkboxes, inputs and selects have a ≥3:1 visible
     boundary on the dark canvas/cards (WCAG 1.4.11). */
  --border: var(--rl-lagoon-800);
  --input: var(--rl-lagoon-400);
  --ring: var(--rl-lagoon-400);

  --chart-1: var(--rl-lagoon-400);
  --chart-2: var(--rl-mint-400);
  --chart-3: var(--rl-amber-300);
  --chart-4: var(--rl-coral-400);
  --chart-5: var(--rl-lagoon-200);

  --sidebar: var(--rl-lagoon-900);
  --sidebar-foreground: var(--rl-neutral-100);
  --sidebar-primary: var(--rl-neutral-50);
  --sidebar-primary-foreground: var(--rl-lagoon-950);
  --sidebar-accent: var(--rl-lagoon-800);
  --sidebar-accent-foreground: var(--rl-neutral-50);
  --sidebar-border: var(--rl-lagoon-800);
  --sidebar-ring: var(--rl-lagoon-400);
}