/* Palette primitives -> semantic theme roles -> app / Bootstrap aliases in tokens.css.
 * Components consume roles, never individual swatches. Derived tones provide
 * accessible text and distinct surfaces without adding unrelated brand colors. */
:root {
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-serif: "Fraunces", ui-serif, Georgia, serif;
  --palette-charcoal: #264653;
  --palette-verdigris: #73c6b6;
  --palette-burnt-peach: #e76f51;
  --palette-driftwood: #302d29;
  --palette-deep-tide: #3b4848;
  --palette-horizon-blue: #687f80;
  --palette-dune-sand: #b98b55;
  --palette-sunset-clay: #b96f50;
  --palette-sea-foam: #f3f0e8;

  /* Stable categorical data colors, independent of the interface theme. */
  --chart-2: #c27a2c;
  --chart-3: #258f72;
  --chart-4: #4b87c8;
  --chart-5: #ae6b9f;
  --spacing: 0.25rem;
  --radius: 0.75rem;
}

:root,
[data-bs-theme="light"] {
  color-scheme: light;
  --brand-paper: #f5f7f4;
  --brand-ink: var(--palette-charcoal);
  --brand-foreground: var(--brand-paper);

  --background: var(--brand-paper);
  --foreground: var(--brand-ink);
  --card: #ffffff;
  --card-foreground: var(--foreground);
  --popover: #ffffff;
  --popover-foreground: var(--foreground);
  --header: #ffffff;
  --field: #ffffff;
  --primary: var(--palette-verdigris);
  --primary-hover: #85cebf;
  --primary-foreground: var(--foreground);
  --primary-rgb: 115, 198, 182;
  --link: #196e63;
  --link-rgb: 25, 110, 99;
  --link-hover: #14564f;
  --secondary: color-mix(in srgb, var(--primary) 14%, var(--card));
  --secondary-foreground: var(--foreground);
  --muted: #f1f4f1;
  --muted-foreground: #526570;
  --accent: color-mix(in srgb, var(--primary) 20%, var(--card));
  --accent-foreground: var(--link);
  --selected: color-mix(in srgb, var(--primary) 32%, var(--card));
  --border: #d7e0da;
  --input: var(--border);
  --ring: var(--link);
  --checkbox-mark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23264653' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  /* Embedded native-control icons use this theme's text/on-accent colors. */
  --radio-mark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='4' fill='%23264653'/%3e%3c/svg%3e");
  --indeterminate-mark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath stroke='%23264653' stroke-linecap='round' stroke-width='3' d='M5 10h10'/%3e%3c/svg%3e");
  --select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23526570' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --valid-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23196e63' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 8 3 3 7-7'/%3e%3c/svg%3e");
  --invalid-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle fill='none' stroke='%23a3413e' stroke-width='1.5' cx='8' cy='8' r='6'/%3e%3cpath stroke='%23a3413e' stroke-linecap='round' stroke-width='1.5' d='M8 4.5v4M8 11.5h0'/%3e%3c/svg%3e");
  --table-header: color-mix(in srgb, var(--primary) 12%, var(--card));
  --table-row-hover: color-mix(in srgb, var(--primary) 10%, var(--card));
  --disclosure-row: color-mix(in srgb, var(--primary) 24%, var(--card));
  --disclosure-body: color-mix(in srgb, var(--primary) 6%, var(--card));

  --success: var(--link);
  --success-rgb: var(--link-rgb);
  --success-surface: var(--accent);
  --warning: var(--palette-burnt-peach);
  --warning-text: color-mix(in srgb, var(--warning) 45%, var(--foreground));
  --warning-rgb: 231, 111, 81;
  --warning-surface: color-mix(in srgb, var(--warning) 10%, var(--card));
  --destructive: #b45450;
  --destructive-text: #a3413e;
  --destructive-foreground: #ffffff;
  --destructive-rgb: 180, 84, 80;
  --destructive-surface: color-mix(in srgb, var(--destructive) 12%, var(--card));
  --info-surface: color-mix(in srgb, var(--primary) 18%, var(--card));

  --brand-gradient: linear-gradient(135deg, var(--palette-charcoal), color-mix(in srgb, var(--palette-verdigris) 20%, var(--palette-charcoal)));
  --page-gradient: none;
  --chart-1: var(--link);
  --sidebar: var(--card);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--accent);
  --sidebar-accent-foreground: var(--accent-foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
  --shadow-sm: 0 1px 2px rgb(38 70 83 / 4%), 0 5px 16px -12px rgb(38 70 83 / 12%);
  --shadow-md: 0 2px 5px rgb(38 70 83 / 5%), 0 14px 30px -16px rgb(38 70 83 / 20%);
  --shadow-lg: 0 20px 60px rgb(38 70 83 / 18%);
}

/* Driftwood surrounds Deep Tide surfaces; blue-green actions and Sea Foam text. */
.dark,
[data-bs-theme="dark"] {
  color-scheme: dark;
  --brand-paper: var(--palette-driftwood);
  --brand-ink: var(--palette-sea-foam);
  --brand-foreground: var(--brand-ink);

  --background: var(--brand-paper);
  --foreground: var(--brand-ink);
  --card: var(--palette-deep-tide);
  --card-foreground: var(--foreground);
  --popover: color-mix(in srgb, var(--palette-horizon-blue) 12%, var(--card));
  --popover-foreground: var(--foreground);
  --header: color-mix(in srgb, var(--palette-driftwood) 75%, black);
  --field: color-mix(in srgb, var(--palette-driftwood) 20%, var(--card));
  --primary: color-mix(in srgb, var(--palette-horizon-blue) 85%, var(--foreground));
  --primary-hover: color-mix(in srgb, var(--primary) 80%, var(--foreground));
  --primary-foreground: color-mix(in srgb, var(--palette-driftwood) 80%, black);
  --primary-rgb: 125, 144, 144;
  --link: color-mix(in srgb, var(--primary) 35%, var(--foreground));
  --link-rgb: 202, 206, 201;
  --link-hover: var(--foreground);
  --secondary: color-mix(in srgb, var(--palette-horizon-blue) 18%, var(--card));
  --secondary-foreground: var(--foreground);
  --muted: color-mix(in srgb, var(--palette-driftwood) 12%, var(--card));
  --muted-foreground: color-mix(in srgb, var(--palette-horizon-blue) 24%, var(--foreground));
  --accent: color-mix(in srgb, var(--primary) 10%, var(--card));
  --accent-foreground: var(--link);
  /* Match a disabled primary action (65% opacity) on the page background. */
  --selected: color-mix(in srgb, var(--primary) 65%, var(--background));
  --border: color-mix(in srgb, var(--palette-horizon-blue) 38%, var(--card));
  --input: var(--border);
  --ring: var(--link);
  --checkbox-mark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23262421' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
  --radio-mark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle cx='8' cy='8' r='4' fill='%23262421'/%3e%3c/svg%3e");
  --indeterminate-mark: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath stroke='%23262421' stroke-linecap='round' stroke-width='3' d='M5 10h10'/%3e%3c/svg%3e");
  --select-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23f3f0e8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  --valid-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23cacec9' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3 8 3 3 7-7'/%3e%3c/svg%3e");
  --invalid-indicator: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3ccircle fill='none' stroke='%23debbb4' stroke-width='1.5' cx='8' cy='8' r='6'/%3e%3cpath stroke='%23debbb4' stroke-linecap='round' stroke-width='1.5' d='M8 4.5v4M8 11.5h0'/%3e%3c/svg%3e");
  --table-header: var(--secondary);
  --table-row-hover: var(--secondary);
  --disclosure-row: color-mix(in srgb, var(--primary) 14%, var(--card));
  --disclosure-body: var(--muted);

  /* Functional feedback retains recognizable signals at readable lightness. */
  --success: var(--link);
  --success-rgb: var(--link-rgb);
  --success-surface: var(--accent);
  --warning: var(--palette-sunset-clay);
  --warning-text: color-mix(in srgb, var(--warning) 40%, var(--foreground));
  --warning-rgb: 185, 111, 80;
  --warning-surface: color-mix(in srgb, var(--warning) 10%, var(--card));
  --destructive: #c98580;
  --destructive-text: color-mix(in srgb, var(--destructive) 50%, var(--foreground));
  --destructive-foreground: var(--primary-foreground);
  --destructive-rgb: 201, 133, 128;
  --destructive-surface: color-mix(in srgb, var(--destructive) 14%, var(--card));
  --info-surface: var(--secondary);

  --brand-gradient: linear-gradient(135deg, var(--brand-paper), var(--card));
  --page-gradient: none;
  --chart-1: var(--primary);
  --sidebar: var(--card);
  --sidebar-foreground: var(--foreground);
  --sidebar-primary: var(--primary);
  --sidebar-primary-foreground: var(--primary-foreground);
  --sidebar-accent: var(--accent);
  --sidebar-accent-foreground: var(--accent-foreground);
  --sidebar-border: var(--border);
  --sidebar-ring: var(--ring);
  --shadow-sm: 0 1px 3px color-mix(in srgb, var(--palette-driftwood) 18%, transparent), 0 5px 16px -12px color-mix(in srgb, var(--palette-driftwood) 26%, transparent);
  --shadow-md: 0 3px 6px color-mix(in srgb, var(--palette-driftwood) 22%, transparent), 0 16px 32px -14px color-mix(in srgb, var(--palette-driftwood) 40%, transparent);
  --shadow-lg: 0 20px 60px color-mix(in srgb, var(--palette-driftwood) 45%, transparent);
}