/*
 * Karamatics design tokens: the single source of colours and sizes, loaded on every page shell by
 * layout/brand.html :: assets. Mapped to Tailwind names by src/main/frontend/tailwind.config.js; read by the chart
 * defaults (static/js/charts.js, resolved through a probe element) and the logo mark.
 *
 * Every colour is defined once as light-dark(light, dark): <html data-theme="light|dark"> (static/js/theme.js)
 * sets color-scheme, which picks the value. Never redefine a token for dark mode elsewhere.
 * Copies that cannot read CSS: static/images/favicon.svg, apple-touch-icon.png and the PDF table header in
 * ReportExportService; update those by hand if the brand colour changes.
 */

/* ---- From karamatics.com brand/v1/tokens.css on 2026-10-05 (vendored: keep names and values in step) ---------- */
:root {
  color-scheme: light dark;

  /* Type */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --font-sans: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  /* Surfaces and text */
  --bg:          light-dark(#FFFFFF, #080B1C);
  --bg-soft:     light-dark(#F8FAFC, #0C1029);
  --surface:     light-dark(#FFFFFF, #0F1433);
  --ink:         light-dark(#0F172A, #EEF1FB);
  --ink-2:       light-dark(#334155, #C5CBE3);
  --muted:       light-dark(#5B6478, #98A1C2);
  --line:        light-dark(rgba(15, 23, 42, .10), rgba(160, 170, 255, .14));
  --line-strong: light-dark(rgba(15, 23, 42, .18), rgba(160, 170, 255, .26));
  --grid:        light-dark(rgba(15, 23, 42, .05), rgba(160, 170, 255, .07));
  --dot:         light-dark(rgba(15, 23, 42, .16), rgba(160, 170, 255, .18));
  --nav-bg:      light-dark(rgba(255, 255, 255, .78), rgba(8, 11, 28, .72));

  /* Accents (lightened in dark mode for contrast) */
  --purple:      light-dark(#7C3AED, #A78BFA);
  --purple-deep: light-dark(#5B21B6, #8B5CF6);
  --blue:        light-dark(#2563EB, #60A5FA);
  --cyan:        light-dark(#06B6D4, #22D3EE);
  --accent-text: light-dark(#5B21B6, #C4B5FD);
  --tint:        light-dark(rgba(124, 58, 237, .07), rgba(139, 92, 246, .13));
  --glow:        light-dark(rgba(124, 58, 237, .16), rgba(139, 92, 246, .30));

  /* Feedback */
  --danger:      light-dark(#B42318, #FDA29B);
  --success:     light-dark(#067647, #75E0A7);

  /* Brand constants: the same in both themes (logo, primary button, toggle knob) */
  --brand-purple: #7C3AED;
  --brand-violet: #6D28D9;
  --brand-blue: #2563EB;
  --brand-gradient: linear-gradient(135deg, var(--brand-purple), var(--brand-blue));
  --on-brand: #FFFFFF;

  /* Data visualization (canvas and chart strokes) */
  --cv-grid:   light-dark(rgba(15, 23, 42, .07), rgba(160, 170, 255, .09));
  --cv-axis:   light-dark(rgba(15, 23, 42, .24), rgba(160, 170, 255, .30));
  --cv-circle: light-dark(rgba(91, 33, 182, .24), rgba(196, 181, 253, .22));

  /* Layout */
  --gutter: clamp(20px, 4vw, 48px);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
/* ---- end of brand/v1 ------------------------------------------------------------------------------------------ */

/* App tokens (not in the kit), in the same form */
:root {
  /* Dark surfaces in both themes (sidebar, sign-in panel, shop header) and the lighter accents shown on them */
  --navy: #080B1C;
  --navy-light: #0F1433;
  --brand-light: #A78BFA;
  --brand-blue-light: #60A5FA;
  --dot-dark: rgba(160, 170, 255, .18);

  /* Raised fills above --surface (hover rows, subtle and stronger fills) */
  --raised:   light-dark(#F8FAFC, #1A233C);
  --raised-2: light-dark(#F1F5F9, #242F4C);

  /* Status of records (badges, solid buttons, charts): stronger than the kit's text colours --success / --danger */
  --status-success: #10B981;
  --status-warning: #F59E0B;
  --status-danger: #EF4444;

  /* Neutral chart series */
  --slate: light-dark(#94A3B8, #64748B);

  /* Layout */
  --sidebar-w: 264px;
}

/* Printed documents (invoices, payslips) are always light */
@media print {
  :root, :root[data-theme="dark"] { color-scheme: light; }
}

/* Browsers without light-dark() (before 2024): the light values, so pages stay readable */
@supports not (color: light-dark(#fff, #000)) {
  :root {
    --bg: #FFFFFF; --bg-soft: #F8FAFC; --surface: #FFFFFF; --ink: #0F172A; --ink-2: #334155; --muted: #5B6478;
    --line: rgba(15, 23, 42, .10); --line-strong: rgba(15, 23, 42, .18); --grid: rgba(15, 23, 42, .05);
    --dot: rgba(15, 23, 42, .16); --nav-bg: rgba(255, 255, 255, .78);
    --purple: #7C3AED; --purple-deep: #5B21B6; --blue: #2563EB; --cyan: #06B6D4; --accent-text: #5B21B6;
    --tint: rgba(124, 58, 237, .07); --glow: rgba(124, 58, 237, .16); --danger: #B42318; --success: #067647;
    --cv-grid: rgba(15, 23, 42, .07); --cv-axis: rgba(15, 23, 42, .24); --cv-circle: rgba(91, 33, 182, .24);
    --raised: #F8FAFC; --raised-2: #F1F5F9; --slate: #94A3B8;
  }
}