/*
 * Syncfusion Blazor theme overrides — maps the DESIGN.md palette/type/radius tokens onto
 * Syncfusion's "tailwind3" base theme (loaded in index.html just before this file).
 *
 * Syncfusion's theme is CSS-custom-property driven (see node_modules-free copy of
 * Syncfusion.Blazor.Themes' tailwind3.css for the full token set), so we redeclare the
 * --color-sf-* / --e-* tokens rather than fighting individual component classes.
 *
 * Known gaps, tracked for later features/follow-up rather than solved here:
 *  - Syncfusion exposes a single global --e-radius (set to DESIGN.md's "md" 10px below);
 *    it doesn't support DESIGN.md's per-context sm/lg/full radius scale.
 *  - Syncfusion has no motion/duration/easing custom properties — per-component transition
 *    timings stay at Syncfusion's defaults.
 *  - --e-font-family carries DESIGN.md's body/UI font (DM Sans) only. Fraunces (display) and
 *    Geist (tabular data) aren't global Syncfusion tokens; apply them per-component
 *    (e.g. Grid column templates) in the features that need them.
 *  - Dark mode tokens are defined for Syncfusion's .e-dark-mode class so components are ready
 *    once the app wires up a global dark-mode toggle (none exists yet — AppShell's Theme
 *    parameter styles the nav shell only, it isn't an app-wide light/dark switch).
 */

:root {
  /* Primary — Canopy Green (DESIGN.md) */
  --color-sf-primary: #2C4A3E;
  --color-sf-primary-bg-color: #2C4A3E;
  --color-sf-primary-bg-color-hover: #1E3329;
  --color-sf-primary-bg-color-pressed: #1E3329;
  --color-sf-primary-bg-color-focus: #1E3329;
  --color-sf-primary-bg-color-disabled: #8A8071;
  --color-sf-primary-border-color: #2C4A3E;
  --color-sf-primary-border-color-hover: #1E3329;
  --color-sf-primary-border-color-pressed: #1E3329;
  --color-sf-primary-border-color-focus: #1E3329;
  --color-sf-primary-border-color-disabled: #8A8071;
  --color-sf-primary-dark: #1E3329;
  --color-sf-primary-darker: #1E3329;
  --color-sf-primary-light: #4F7C66;
  --color-sf-primary-lighter: #E8E1D4;
  --color-sf-primary-outline: #2C4A3E;
  --color-sf-primary-text: #FAF6EF;
  --color-sf-primary-text-color: #FAF6EF;
  --color-sf-primary-text-hover: #FAF6EF;
  --color-sf-primary-text-pressed: #FAF6EF;
  --color-sf-primary-text-focus: #FAF6EF;
  --color-sf-primary-text-disabled: rgba(250, 246, 239, .6);

  /* Secondary — Harvest Terracotta (DESIGN.md; -button shade for WCAG AA text-on-color) */
  --color-sf-secondary: #C76B3C;
  --color-sf-secondary-bg-color: #A84D28;
  --color-sf-secondary-bg-color-hover: #8f3f20;
  --color-sf-secondary-bg-color-pressed: #8f3f20;
  --color-sf-secondary-bg-color-focus: #8f3f20;
  --color-sf-secondary-bg-color-disabled: #D98A5F;
  --color-sf-secondary-border-color: #A84D28;
  --color-sf-secondary-border-color-hover: #8f3f20;
  --color-sf-secondary-border-color-pressed: #8f3f20;
  --color-sf-secondary-border-color-focus: #8f3f20;
  --color-sf-secondary-border-color-disabled: #D98A5F;
  --color-sf-secondary-outline: #A84D28;
  --color-sf-secondary-text-color: #FAF6EF;
  --color-sf-secondary-text-color-hover: #FAF6EF;
  --color-sf-secondary-text-color-pressed: #FAF6EF;
  --color-sf-secondary-text-color-focus: #FAF6EF;
  --color-sf-secondary-text-color-disabled: rgba(250, 246, 239, .6);

  /* Semantic status colors (DESIGN.md) */
  --color-sf-success: #3D6B4F;
  --color-sf-success-bg-color: #3D6B4F;
  --color-sf-success-bg-color-hover: #2f5440;
  --color-sf-success-bg-color-pressed: #2f5440;
  --color-sf-success-bg-color-focus: #2f5440;
  --color-sf-success-bg-color-disabled: #BFB6A3;
  --color-sf-success-border-color: #3D6B4F;
  --color-sf-success-border-color-hover: #2f5440;
  --color-sf-success-border-color-pressed: #2f5440;
  --color-sf-success-border-color-focus: #2f5440;
  --color-sf-success-border-color-disabled: #BFB6A3;
  --color-sf-success-dark: #2f5440;
  --color-sf-success-light: #6a9a7d;
  --color-sf-success-lighter: #E8E1D4;
  --color-sf-success-outline: #3D6B4F;
  --color-sf-success-text: #FAF6EF;
  --color-sf-success-text-hover: #FAF6EF;
  --color-sf-success-text-pressed: #FAF6EF;
  --color-sf-success-text-focus: #FAF6EF;
  --color-sf-success-text-disabled: rgba(250, 246, 239, .6);

  --color-sf-warning: #D9A441;
  --color-sf-warning-bg-color: #D9A441;
  --color-sf-warning-bg-color-hover: #c28f2f;
  --color-sf-warning-bg-color-pressed: #c28f2f;
  --color-sf-warning-bg-color-focus: #c28f2f;
  --color-sf-warning-bg-color-disabled: #e6c684;
  --color-sf-warning-border-color: #D9A441;
  --color-sf-warning-border-color-hover: #c28f2f;
  --color-sf-warning-border-color-pressed: #c28f2f;
  --color-sf-warning-border-color-focus: #c28f2f;
  --color-sf-warning-border-color-disabled: #e6c684;
  --color-sf-warning-dark: #c28f2f;
  --color-sf-warning-light: #e6c684;
  --color-sf-warning-lighter: #E8E1D4;
  --color-sf-warning-outline: #D9A441;
  --color-sf-warning-text: #2B2622;
  --color-sf-warning-text-hover: #2B2622;
  --color-sf-warning-text-pressed: #2B2622;
  --color-sf-warning-text-focus: #2B2622;
  --color-sf-warning-text-disabled: rgba(43, 38, 34, .5);

  /* DESIGN.md's "error" maps to Syncfusion's "danger" token family */
  --color-sf-danger: #B6452C;
  --color-sf-danger-bg-color: #B6452C;
  --color-sf-danger-bg-color-hover: #973922;
  --color-sf-danger-bg-color-pressed: #973922;
  --color-sf-danger-bg-color-focus: #973922;
  --color-sf-danger-bg-color-disabled: #d9998a;
  --color-sf-danger-border-color: #B6452C;
  --color-sf-danger-border-color-hover: #973922;
  --color-sf-danger-border-color-pressed: #973922;
  --color-sf-danger-border-color-focus: #973922;
  --color-sf-danger-border-color-disabled: #d9998a;
  --color-sf-danger-dark: #973922;
  --color-sf-danger-light: #cc7057;
  --color-sf-danger-lighter: #E8E1D4;
  --color-sf-danger-outline: #B6452C;
  --color-sf-danger-text: #FAF6EF;
  --color-sf-danger-text-hover: #FAF6EF;
  --color-sf-danger-text-pressed: #FAF6EF;
  --color-sf-danger-text-focus: #FAF6EF;
  --color-sf-danger-text-disabled: rgba(250, 246, 239, .6);

  --color-sf-info: #5C7A8A;
  --color-sf-info-bg-color: #5C7A8A;
  --color-sf-info-bg-color-hover: #4a6270;
  --color-sf-info-bg-color-pressed: #4a6270;
  --color-sf-info-bg-color-focus: #4a6270;
  --color-sf-info-bg-color-disabled: #a8bac2;
  --color-sf-info-border-color: #5C7A8A;
  --color-sf-info-border-color-hover: #4a6270;
  --color-sf-info-border-color-pressed: #4a6270;
  --color-sf-info-border-color-focus: #4a6270;
  --color-sf-info-border-color-disabled: #a8bac2;
  --color-sf-info-dark: #4a6270;
  --color-sf-info-light: #a8bac2;
  --color-sf-info-lighter: #E8E1D4;
  --color-sf-info-outline: #5C7A8A;
  --color-sf-info-text: #FAF6EF;
  --color-sf-info-text-hover: #FAF6EF;
  --color-sf-info-text-pressed: #FAF6EF;
  --color-sf-info-text-focus: #FAF6EF;
  --color-sf-info-text-disabled: rgba(250, 246, 239, .6);

  /* Warm neutrals (DESIGN.md) — content surfaces and text */
  --color-sf-content-bg-color: #FAF6EF;
  --color-sf-content-bg-color-alt1: #E8E1D4;
  --color-sf-content-bg-color-alt2: #E8E1D4;
  --color-sf-content-bg-color-hover: #E8E1D4;
  --color-sf-content-bg-color-selected: #E8E1D4;
  --color-sf-flyout-bg-color: #FAF6EF;
  --color-sf-flyout-bg-color-hover: #E8E1D4;
  --color-sf-content-text-color: #2B2622;
  --color-sf-content-text-color-alt1: #5C5447;
  --color-sf-content-text-color-alt2: #8A8071;
  --color-sf-flyout-text-color: #2B2622;
  --color-sf-border: #BFB6A3;
  --color-sf-border-light: #E8E1D4;
  --color-sf-border-dark: #8A8071;

  /* Typography — DESIGN.md body/UI font. Display (Fraunces) and tabular (Geist) fonts are
     applied per-component where digit alignment/hero treatment matters, not globally. */
  --e-font-name: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --e-font-sans: sans-serif;

  /* Radius — DESIGN.md's "md" (10px); Syncfusion has one global radius token. */
  --e-radius: 10px;
}

.e-dark-mode {
  --color-sf-primary: #4F7C66;
  --color-sf-primary-bg-color: #4F7C66;
  --color-sf-primary-bg-color-hover: #3D6151;
  --color-sf-primary-bg-color-pressed: #3D6151;
  --color-sf-primary-border-color: #4F7C66;
  --color-sf-primary-text: #1E211C;
  --color-sf-primary-text-color: #1E211C;

  --color-sf-secondary: #D98A5F;
  --color-sf-secondary-bg-color: #D98A5F;
  --color-sf-secondary-bg-color-hover: #c76b3c;
  --color-sf-secondary-bg-color-pressed: #c76b3c;
  --color-sf-secondary-border-color: #D98A5F;
  --color-sf-secondary-text-color: #1E211C;

  --color-sf-content-bg-color: #1E211C;
  --color-sf-content-bg-color-alt1: #26302A;
  --color-sf-content-bg-color-alt2: #26302A;
  --color-sf-content-bg-color-hover: #26302A;
  --color-sf-content-bg-color-selected: #26302A;
  --color-sf-flyout-bg-color: #26302A;
  --color-sf-flyout-bg-color-hover: #26302A;
  --color-sf-content-text-color: #F2ECE2;
  --color-sf-content-text-color-alt1: #F2ECE2;
  --color-sf-flyout-text-color: #F2ECE2;
  --color-sf-border: #3a453e;
  --color-sf-border-light: #26302A;
  --color-sf-border-dark: #4d5950;
}