/* =========================================================
   Design Tokens — single source of truth for all CSS variables
   ========================================================= */
:root {
  /* ── Generic palette (admin, indicator, entry pages) ── */
  --green: #1a7a52;
  --green-light: #e6f4ee;
  --green-dark: #15623f;
  --blue: #1a5c8a;
  --blue-light: #e6f0f8;
  --amber: #7a3a1a;
  --amber-light: #f8ede6;
  --teal: #0e7490;
  --teal-light: #e0f2fe;

  /* ── Core neutrals (shared by component/field/modal/control pages) ── */
  --bg: #f3f6fb;
  --surface: #ffffff;
  --surface-alt: #f7f9fb;
  --card: #ffffff;
  --ink: #0e1726;
  --muted: #667085;
  --line: #e6ebf2;
  --border: #e4eaf0;
  --border-soft: #f0f3f7;
  --border-strong: #cccccc;
  --text: #1f2937;
  --text-main: #1a2332;
  --text-muted: #6b7a8d;
  --text-light: #9aabb8;
  --col-width: 80px;

  /* ── Feature / accent (toolbar, modals) ── */
  --feature-accent: #2f6aa3;
  --feature-border: #787878;
  --feature-muted: #7a8aa0;
  --feature-ink: #2e3c52;
  --primary: #6ba539;
  --primary-ink: #0b3d0b;
  --primary-600: #2b3f69;
  --primary-hover: #1f5a97;
  --secondary: #2f6df6;

  /* ── Status colors ── */
  --danger: #e54848;
  --danger-700: #d9362b;
  --success: #4caf50;
  --success-700: #3b8e40;
  --warning: #f4a100;
  --info: #008cba;
  --info-700: #027aa3;
  --ok: #74d53c;

  /* ── Brand theme (fields/buttons) ── */
  --brand-1: var(--brand-start, #3c7fbe);
  --brand-2: var(--brand-end, #2f6aa3);
  --bg-app: var(--color-app, #f6f7fb);
  --bg-panel: var(--color-panel, #ffffff);
  --surface-1: var(--color-surface-1, #f9f9f9);
  --surface-2: var(--color-surface-2, #f8f9fa);
  --border-1: var(--color-border, #e5e7eb);
  --shadow-1: 0 10px 30px rgba(0,0,0,.12);

  /* ── SARES brand palette (dashboard pages) ── */
  --sares-green: #7A8C2E;
  --sares-green-dark: #5E6D20;
  --sares-green-deep: #4E2310;
  --sares-green-soft: #EEF2DC;
  --sares-sand: #D4A84B;
  --sares-sand-dark: #A8832A;
  --sares-clay: #4E2310;
  --sares-sun: #D4A84B;
  --sares-sky: #5B8FA8;
  --sares-mist: #C8D8E0;
  --sares-ink: #1A1A1A;
  --sares-ink-2: #3D4B44;
  --sares-muted: #6B7B74;
  --sares-line: #E2E8E5;
  --sares-bg: #F7F9F5;
  --sares-surface: #FFFFFF;

  /* ── Data-viz palette ── */
  --dv-male: var(--sares-sky);
  --dv-female: #C97B8A;
  --dv-youth: var(--sares-sun);
  --dv-ok: var(--sares-green);
  --dv-warn: var(--sares-sun);
  --dv-danger: var(--sares-clay);
  --dv-pending: var(--sares-mist);

  /* ── Typography ── */
  --font-display: "Poppins", "Inter", system-ui, Arial, sans-serif;
  --font-body: "Inter", system-ui, Arial, sans-serif;
  --font-mono: "Inter", system-ui, Arial, sans-serif;

  /* ── Radii ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-tile: 14px;
  --radius: 14px;

  /* ── Shadows ── */
  --shadow-sm: 0 2px 10px rgba(0,0,0,.04);
  --shadow-md: 0 4px 12px rgba(78,35,16,.08);
  --shadow-lg: 0 10px 30px rgba(78,35,16,.12);

  /* ── Motion ── */
  --duration: .25s;
  --easing: cubic-bezier(.2,.8,.2,1);
  --transition: 220ms cubic-bezier(.2,.7,.2,1);

  /* ── Loader ── */
  --loader-veil: rgba(0,0,0,.28);

  /* ── Surface tokens ── */
  --surface-hero: var(--sares-green-deep);
  --surface-header: var(--sares-green-deep);
  --surface-sun: var(--sares-sun);
  --surface-dune: var(--sares-mist);
}

/* ── Radzen Pager — SARES brand override ── */
.rz-pager-page.rz-state-active {
    background: var(--sares-green) !important;
    color: #fff !important;
    border-color: var(--sares-green) !important;
}

.rz-pager-page:hover:not(.rz-state-active) {
    background: var(--sares-green-soft) !important;
    color: var(--sares-green-dark) !important;
}

.rz-pager-element:hover {
    color: var(--sares-green-dark) !important;
}