/*
 * Syncfusion Blazor theme overrides — maps the DESIGN.md palette/type/radius/motion tokens onto
 * Syncfusion's "tailwind3" base theme (loaded in index.html just before this file).
 *
 * Syncfusion's theme is CSS-custom-property driven for color (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.
 *
 * Radius: Syncfusion computes every component's border-radius as `calc(var(--e-radius) * N)`
 * with a different fixed fraction N per component (buttons 0.25, inputs 0.375, badges 0.125,
 * dialogs 1.25, etc.) — a proportional scale, not a flat radius. Those fractions don't line up
 * with DESIGN.md's sm/md/lg/full scale (6/10/16/9999px is not a fixed ratio), so one global
 * --e-radius value can't hit more than one of those targets at once. Below, --e-radius stays a
 * reasonable fallback for components DESIGN.md doesn't name, and the components DESIGN.md does
 * name (buttons, inputs, badges, pills) get direct border-radius overrides instead.
 *
 * Motion: Syncfusion exposes no CSS custom properties for transition timing — durations/easings
 * are hardcoded per-selector throughout the theme (~50+ declarations, e.g. `0.25s cubic-bezier(...)`,
 * `300ms ease-out`), and some components (e.g. SfToast's slide-in/out) animate via a Blazor
 * `AnimationSettings` markup property rather than CSS at all. There's no single hook to redirect
 * that to DESIGN.md's tokens globally. What's defined below are DESIGN.md's actual motion tokens
 * as real, reusable custom properties (--motion-ease-*, --motion-duration-*) for the app's own
 * hand-authored transitions and for future Syncfusion component wiring (e.g. SfToast's
 * AnimationSettings.Duration) to reference by value. Syncfusion's own internal component
 * transitions stay at their defaults until each component is actually built against a real
 * screen (per DESIGN.md's "Open Items" note) and its specific selector can be verified rather
 * than guessed.
 *
 * 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).
 *
 * Remaining gap: --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.
 */

: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 fallback — DESIGN.md's "md" (10px) — for components not explicitly overridden below. */
  --e-radius: 10px;

  /* Motion — DESIGN.md tokens, exposed as real custom properties (see file header for why
     Syncfusion's own components can't consume these directly yet). */
  --motion-ease-enter: ease-out;
  --motion-ease-exit: ease-in;
  --motion-ease-move: ease-in-out;
  --motion-duration-micro: 75ms;
  --motion-duration-short: 200ms;
  --motion-duration-medium: 300ms;
  --motion-duration-long: 500ms;
}

/* Radius overrides — the components DESIGN.md names explicitly (see file header). */
.e-btn,
.e-css.e-btn {
  border-radius: 10px; /* md — buttons */
}

.e-input-group,
.e-input-group.e-control-wrapper,
.e-float-input,
.e-float-input.e-control-wrapper {
  border-radius: 6px; /* sm — inputs */
}

.e-badge {
  border-radius: 6px; /* sm — badges */
}

.e-badge.e-badge-pill {
  border-radius: 9999px; /* full — pill badges */
}

/* Toast status tints — ToastNotification.razor (#164) maps Success/Error/Info onto these via
   SfToast's CssClass. Specificity matches the theme's own .e-toast-container .e-toast rule
   (2 classes + 1) so these reliably win over the base background/border. */
.e-toast-container .e-toast.e-toast-success {
  background-color: rgba(61, 107, 79, 0.1);
  border-color: rgba(61, 107, 79, 0.3);
  color: var(--color-sf-success);
}

.e-toast-container .e-toast.e-toast-danger {
  background-color: rgba(182, 69, 44, 0.1);
  border-color: rgba(182, 69, 44, 0.3);
  color: var(--color-sf-danger);
}

.e-toast-container .e-toast.e-toast-info {
  background-color: rgba(92, 122, 138, 0.1);
  border-color: rgba(92, 122, 138, 0.3);
  color: var(--color-sf-info);
}

.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;
}