/* ==========================================================================
   Quercia viva 2.0 — Design tokens
   Single source of truth for color/type/motion of the web back-office.
   Loaded AFTER Tabler: it remaps the --tblr-* variables onto the --qc-*
   tokens, so the whole UI (buttons aside, re-skinned in components.css)
   recolors without touching the templates.

   Color architecture (2.0): a warm NEUTRAL canvas (surfaces/text/borders)
   with forest green reserved for action / active / brand, and acorn bronze
   as the rare brand accent. Data pops on a calm ground; the app reads
   "designed, not skinned". See docs/brand/quercia-viva.md §2.

   Golden rules: use ONLY these tokens. Never hardcode hex in feature
   stylesheets. Every text >= 4.5:1 on its background (verified, brand §2).
   ========================================================================== */

:root, [data-bs-theme="light"] {
  /* ---- Quercia viva 2.0 — light theme: tela neutra calda (brand §2.1) ---- */
  --qc-background: #F5F6F1;      /* page — warm calm paper */
  --qc-surface: #FCFCFA;         /* raised card / dialog — near-white */
  --qc-surface-light: #ECEEE6;   /* sunken input / well / table header */
  --qc-primary: #2E6B45;         /* the jewel: action, links, active, focus */
  --qc-primary-light: #43855A;
  --qc-primary-dark: #1F5233;
  --qc-on-primary: #FFFFFF;
  --qc-accent: #8F6128;          /* acorn bronze — brand highlight only */
  --qc-on-accent: #FFFFFF;
  --qc-text-primary: #1A1E1A;    /* warm near-black neutral */
  --qc-text-secondary: #4C5650;  /* neutral grey-green */
  --qc-text-tertiary: #636C65;   /* metadata / placeholders / hints */
  --qc-border: #DBDED4;          /* hairline */
  --qc-divider: #E7E9E1;

  /* Elevation surfaces (semantic; swapped per theme so a card always
     reads "raised" relative to the page and a field reads "sunken"). */
  --qc-card-bg: var(--qc-surface);        /* raised card = near-white in light */
  --qc-field-bg: var(--qc-surface-light); /* sunken field = darker in light */

  /* RGB forms (for rgba()/color-mix fallbacks) */
  --qc-background-rgb: 245, 246, 241;
  --qc-surface-rgb: 252, 252, 250;
  --qc-surface-light-rgb: 236, 238, 230;
  --qc-primary-rgb: 46, 107, 69;
  --qc-accent-rgb: 143, 97, 40;
  --qc-text-primary-rgb: 26, 30, 26;
  --qc-on-primary-rgb: 255, 255, 255;
  --qc-border-rgb: 219, 222, 212;

  /* ---- Semantic + status (fixed in both themes, brand §2.3) ---- */
  --qc-success: #66BB6A;
  --qc-error: #EF5350;
  --qc-warning: #FFCA28;
  --qc-info: #64B5F6;
  --qc-status-yellow: #FFC107; /* "to see" */
  --qc-status-orange: #FF9800; /* "to do" */
  --qc-status-purple: #CE93D8; /* "to confirm" */
  --qc-status-red: #EF5350;    /* "suspended" */
  --qc-status-lime: #C5E1A5;   /* "scheduled" */
  --qc-status-cyan: #80DEEA;   /* "to validate" */

  /* Text-safe variants of the semantic colors — for colored DATA TEXT
     (numbers, deltas). The status hues above are tuned for FILLS; as text on
     the warm-white canvas they fail AA. These are darkened to clear ≥4.5:1 on
     background / surface / surface-light (brand §2.2). Fills/badges keep the
     vivid hue; only text utilities are re-pointed (components.css). */
  --qc-warning-text: #8A5A00; /* dark amber */
  --qc-error-text: #B92C1D;   /* deep red */
  --qc-success-text: var(--qc-primary); /* forest green already AA */

  /* ---- Typography (brand §3) ---- */
  --qc-font-display: 'Bricolage Grotesque', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --qc-font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* ---- Radii (brand §6) ---- */
  --qc-radius-sm: 4px;
  --qc-radius-input: 10px;   /* crisper field radius (was 8px) */
  --qc-radius-btn: 12px;     /* action radius — tighter, modern (was 16px) */
  --qc-radius-card: 16px;
  --qc-radius-panel: 20px;
  --qc-radius-pill: 999px;

  /* ---- Shadows (brand §6) — two-stop, warm neutral tint ---- */
  --qc-shadow-sm: 0 1px 2px rgba(20, 30, 20, .05), 0 1px 3px rgba(20, 30, 20, .07);
  --qc-shadow-md: 0 4px 12px rgba(20, 30, 20, .08), 0 2px 4px rgba(20, 30, 20, .05);
  --qc-shadow-lg: 0 16px 40px rgba(20, 30, 20, .14), 0 4px 10px rgba(20, 30, 20, .07);

  /* ---- Motion (brand §7) ---- */
  --qc-ease-press: ease-in;
  --qc-ease-fast: cubic-bezier(.215, .61, .355, 1);       /* ease-out-cubic */
  --qc-ease-standard: cubic-bezier(.645, .045, .355, 1);  /* ease-in-out-cubic */
  --qc-ease-reveal: cubic-bezier(.215, .61, .355, 1);
  --qc-ease-emphasized: cubic-bezier(.34, 1.56, .64, 1);  /* overshoot */
  --qc-dur-press: 100ms;
  --qc-dur-fast: 180ms;
  --qc-dur-standard: 280ms;
  --qc-dur-reveal: 400ms;
  --qc-dur-emphasized: 550ms;

  /* ==== Remap Tabler/Bootstrap → Quercia (light theme) ==== */
  --tblr-primary: var(--qc-primary);
  --tblr-primary-rgb: var(--qc-primary-rgb);
  --tblr-primary-fg: var(--qc-on-primary);

  --tblr-body-bg: var(--qc-background);
  --tblr-body-bg-rgb: var(--qc-background-rgb);
  --tblr-body-color: var(--qc-text-primary);
  --tblr-body-color-rgb: var(--qc-text-primary-rgb);
  --tblr-secondary-color: var(--qc-text-secondary);
  --tblr-muted: var(--qc-text-tertiary);
  --tblr-secondary: var(--qc-text-secondary);

  --tblr-border-color: var(--qc-border);
  --tblr-border-color-translucent: var(--qc-border);

  --tblr-card-bg: var(--qc-card-bg);
  --tblr-card-color: var(--qc-text-primary);
  --tblr-card-border-color: var(--qc-border);
  --tblr-bg-surface: var(--qc-surface);
  --tblr-bg-surface-secondary: var(--qc-surface-light);
  --tblr-bg-surface-tertiary: var(--qc-background);
  /* `.bg-light` subtle panel → theme-aware surface (was literal near-white,
     which stayed white in dark, e.g. the timbratura datetime box) */
  --tblr-light: var(--qc-surface-light);
  --tblr-light-rgb: var(--qc-surface-light-rgb);

  --tblr-link-color: var(--qc-primary);
  --tblr-link-color-rgb: var(--qc-primary-rgb);
  --tblr-link-hover-color: var(--qc-primary-dark);

  --tblr-font-sans-serif: var(--qc-font-body);

  /* Historically-blue "brand/action" colors → forest green, for cohesion */
  --tblr-blue: var(--qc-primary);
  --tblr-blue-rgb: var(--qc-primary-rgb);
  --tblr-azure: var(--qc-primary);
  --tblr-azure-rgb: var(--qc-primary-rgb);
  --tblr-indigo: var(--qc-primary);
  --tblr-indigo-rgb: var(--qc-primary-rgb);
  --tblr-green: var(--qc-success);
  --tblr-green-rgb: 102, 187, 106;

  /* Work STATUS colors (single source: Work constants) → brand values §2.3 */
  --tblr-yellow: var(--qc-status-yellow);
  --tblr-yellow-rgb: 255, 193, 7;
  --tblr-orange: var(--qc-status-orange);
  --tblr-orange-rgb: 255, 152, 0;
  --tblr-purple: var(--qc-status-purple);
  --tblr-purple-rgb: 206, 147, 216;
  --tblr-red: var(--qc-status-red);
  --tblr-red-rgb: 239, 83, 80;
  --tblr-lime: var(--qc-status-lime);
  --tblr-lime-rgb: 197, 225, 165;
  --tblr-cyan: var(--qc-status-cyan);
  --tblr-cyan-rgb: 128, 222, 234;

  /* card/button radius (compat with legacy quercia.css) */
  --quercia-card-border-radius: var(--qc-radius-card);
  --quercia-btn-border-radius: var(--qc-radius-btn);
}

[data-bs-theme="dark"] {
  /* ---- Quercia viva 2.0 — dark theme: carbone caldo (brand §2.2) ---- */
  --qc-background: #0E1210;      /* warm charcoal, faint green */
  --qc-surface: #171C18;         /* sunken field surface (mid) */
  --qc-surface-light: #212823;   /* raised card (lightest) */
  --qc-primary: #7EDB9B;         /* mint jewel */
  --qc-primary-light: #A9EBBB;
  --qc-primary-dark: #54C17B;
  --qc-on-primary: #04120A; /* near-black green, NOT #000 (brand §9.9) */
  --qc-accent: #E0AC66;
  --qc-on-accent: #241703;
  --qc-text-primary: #ECEFEA;    /* neutral near-white */
  --qc-text-secondary: #AEB4AC;  /* neutral grey (NOT green) */
  --qc-text-tertiary: #8E958D;
  --qc-border: #2A302B;
  --qc-divider: #1C221D;

  /* Text-safe semantic colors on the near-black canvas: here the vivid hues
     are already high-contrast, so we keep bright, legible variants. */
  --qc-warning-text: #F5B84B;
  --qc-error-text: #F08A86;
  --qc-success-text: var(--qc-primary); /* mint jewel, AA on dark */

  /* In dark, the raised card is the LIGHTEST surface and a field sinks. */
  --qc-card-bg: var(--qc-surface-light);
  --qc-field-bg: var(--qc-surface);

  --qc-background-rgb: 14, 18, 16;
  --qc-surface-rgb: 23, 28, 24;
  --qc-surface-light-rgb: 33, 40, 35;
  --qc-primary-rgb: 126, 219, 155;
  --qc-accent-rgb: 224, 172, 102;
  --qc-text-primary-rgb: 236, 239, 234;
  --qc-on-primary-rgb: 4, 18, 10;
  --qc-border-rgb: 42, 48, 43;

  /* shadows carry more weight on a dark ground */
  --qc-shadow-sm: 0 1px 2px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .4);
  --qc-shadow-md: 0 4px 12px rgba(0, 0, 0, .45), 0 2px 4px rgba(0, 0, 0, .4);
  --qc-shadow-lg: 0 16px 40px rgba(0, 0, 0, .6), 0 4px 10px rgba(0, 0, 0, .5);

  /* The --tblr-* remaps must be reassigned here: Tabler sets them
     explicitly under [data-bs-theme="dark"] (equal specificity, last
     loaded wins: this file). */
  --tblr-primary: var(--qc-primary);
  --tblr-primary-rgb: var(--qc-primary-rgb);
  --tblr-primary-fg: var(--qc-on-primary);
  --tblr-body-bg: var(--qc-background);
  --tblr-body-bg-rgb: var(--qc-background-rgb);
  --tblr-body-color: var(--qc-text-primary);
  --tblr-body-color-rgb: var(--qc-text-primary-rgb);
  --tblr-secondary-color: var(--qc-text-secondary);
  --tblr-muted: var(--qc-text-tertiary);
  --tblr-secondary: var(--qc-text-secondary);
  --tblr-border-color: var(--qc-border);
  --tblr-border-color-translucent: var(--qc-border);
  --tblr-card-bg: var(--qc-card-bg);
  --tblr-card-color: var(--qc-text-primary);
  --tblr-card-border-color: var(--qc-border);
  --tblr-bg-surface: var(--qc-surface);
  --tblr-bg-surface-secondary: var(--qc-surface-light);
  --tblr-bg-surface-tertiary: var(--qc-background);
  --tblr-light: var(--qc-surface-light);
  --tblr-light-rgb: var(--qc-surface-light-rgb);
  --tblr-link-color: var(--qc-primary);
  --tblr-link-color-rgb: var(--qc-primary-rgb);
  --tblr-link-hover-color: var(--qc-primary-light);
  --tblr-blue: var(--qc-primary);
  --tblr-blue-rgb: var(--qc-primary-rgb);
  --tblr-azure: var(--qc-primary);
  --tblr-azure-rgb: var(--qc-primary-rgb);
  --tblr-indigo: var(--qc-primary);
  --tblr-indigo-rgb: var(--qc-primary-rgb);
}

/* Tabular figures — mandatory on data (brand §3.2) */
.qc-numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

/* Base body: brand font + warm neutral canvas */
body {
  font-family: var(--qc-font-body);
  background-color: var(--qc-background);
  color: var(--qc-text-primary);
}

/* prefers-reduced-motion: disable loops/reveals, keep fades (brand §7) */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}