/* eSync platforma – design tokens (Graphite & Lime, sharp)
   Light = default, dark = [data-theme="dark"] on <html>. */

/* fonts are loaded by <link> in includes/template.php (copy of docs/design/tokens.css without the @import) */

:root {
  /* brand (logo gradient – never change) */
  --brand-1: #00A5FA;
  --brand-2: #00FB96;
  --brand-gradient: linear-gradient(90deg, var(--brand-1), var(--brand-2));

  /* fonts */
  --font-display: 'Bricolage Grotesque', system-ui, sans-serif; /* headings, big numbers */
  --font-body: 'Geist', system-ui, sans-serif;                  /* UI text */
  --font-mono: 'Geist Mono', ui-monospace, monospace;           /* numbers in tables, labels, codes */

  /* shape: sharp */
  --radius: 0;
  --shadow: 0 1px 2px rgba(12,24,22,.06), 0 10px 26px -8px rgba(12,24,22,.14);
  --shadow-hero: 0 18px 40px -14px rgba(5,24,41,.45);

  /* surfaces */
  --bg: #F0F1EE;
  --surface: #FFFFFF;
  --surface-2: #F7F8F8;
  --input: #F0F1EE;
  --line: #EDF0EF;
  --border: #DCE2E0;
  --dash: #B8C3BF;

  /* text */
  --text: #0E1716;
  --text-2: #2F3B39;
  --muted: #56625F;
  --link: #3F6B12;

  /* sidebar + hero (dark graphite in both themes) */
  --side: #141614;
  --side-2: #2C302C;
  --side-edge: #141614;
  --side-text: #D9E2E0;
  --side-muted: #A3B3AF;
  --side-label: #93A5A1;
  --hero: #141614;
  --hero-ring: #2C302C;

  /* accents */
  --accent: #C8F23C;      /* lime – active nav, hero number, send button */
  --on-accent: #0A0F0E;
  --hi: #7EE8C8;          /* secondary highlight – AI badge, avatar, highlight card */
  --on-hi: #0A0F0E;

  /* buttons */
  --btn: #141614;         /* primary button */
  --on-btn: #FFFFFF;

  /* charts – use these everywhere (dashboard, BI, Asistent answers); never library default blue */
  --bar: #141614;          /* main series */
  --bar-2: #3F6B12;        /* highlight (top item / current period) */
  --bar-idle: #E3E8E6;     /* empty days */
  --chart-track: #EDF0EE;  /* background track of horizontal bars */
  --chart-compare: #00A5FA;/* comparison series (last year), brand blue */
  --chart-trend: #D98A00;  /* average / trend line */
  --chart-grid: #EDF0EF;   /* grid lines */

  /* status */
  --ok-bg: #DDF5EC;  --ok-fg: #0B5E50;  --ok-dot: #12A58A;
  --warn-bg: #FCEBC7; --warn-fg: #6E4300; --warn-dot: #D98A00;
  --info-bg: #E2ECFB; --info-fg: #1F4A8A; --info-dot: #3D7BE0;
  --neu-bg: #ECEFEE;  --neu-fg: #3F4D4A;  --neu-dot: #8A9794;
}

[data-theme="dark"] {
  --shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 12px 28px -10px rgba(0,0,0,.6);
  --shadow-hero: 0 16px 36px -12px rgba(0,0,0,.7);

  --bg: #0E0F0E;
  --surface: #1A1C1A;
  --surface-2: rgba(255,255,255,.04);
  --input: rgba(255,255,255,.07);
  --line: rgba(255,255,255,.07);
  --border: rgba(255,255,255,.12);
  --dash: rgba(255,255,255,.22);

  --text: #EEF2F1;
  --text-2: #CAD3D1;
  --muted: #A4B0AD;
  --link: #C8F23C;

  --side-edge: rgba(255,255,255,.06);
  --hero: #2C302C;
  --hero-ring: rgba(255,255,255,.09);

  --btn: #C8F23C;
  --on-btn: #0A0F0E;

  --bar: #C8F23C;
  --bar-2: #C8F23C;
  --bar-idle: rgba(255,255,255,.09);
  --chart-track: rgba(255,255,255,.07);
  --chart-compare: #5CC8FF;
  --chart-trend: #F0A020;
  --chart-grid: rgba(255,255,255,.07);

  --ok-bg: rgba(18,165,138,.18);  --ok-fg: #7BE9C9;  --ok-dot: #2ED3A6;
  --warn-bg: rgba(217,138,0,.2);  --warn-fg: #FFCB66; --warn-dot: #F0A020;
  --info-bg: rgba(61,123,224,.22); --info-fg: #A9C8FF; --info-dot: #5B95F0;
  --neu-bg: rgba(255,255,255,.08); --neu-fg: #C3CCC9; --neu-dot: #8A9794;
}