/*
 * Karamatics design tokens: the single source of colours, sizes, shapes and motion, 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 mail-mark.png, the account and
 * company mails (templates/mail), and the PDF table header in ReportExportService; update those by hand if the brand
 * colour changes.
 */

/* ---- karamatics.com brand/v2 ("Cobalt"), the app's variant (2026-10-17) ------------------------------------------
 * Same token names, light/dark pairs, shapes and motion as the kit; every colour turned 6 degrees towards indigo so
 * the app is related to the website without being identical. Text pairs keep 4.5:1 or better (on-primary on primary,
 * accent-text on bg and tint, muted on bg-soft). */
: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, #0B0E1A);
  --bg-soft:     light-dark(#F4F5FB, #101427);
  --surface:     light-dark(#FFFFFF, #14192D);
  --ink:         light-dark(#0E1325, #EDEFF7);
  --ink-2:       light-dark(#363D55, #C3C7D8);
  --muted:       light-dark(#585F76, #9AA0B8);
  --line:        light-dark(#E2E5EE, #232942);
  --line-strong: light-dark(#C5CADA, #363E5E);
  --grid:        light-dark(rgba(14, 19, 37, .05), rgba(142, 154, 255, .07));
  --dot:         light-dark(rgba(14, 19, 37, .18), rgba(142, 154, 255, .20));
  --nav-bg:      light-dark(rgba(255, 255, 255, .84), rgba(11, 14, 26, .80));

  /* Primary: the one saturated colour. Hover and press step darker in light mode, lighter in dark mode. */
  --primary:       light-dark(#2536C8, #8E9AFF);
  --primary-hover: light-dark(#1A299F, #ADB7FF);
  --primary-press: light-dark(#142080, #C4CBFF);
  --on-primary:    light-dark(#FFFFFF, #0A0C33);
  --accent-text:   light-dark(#2536C8, #9DA8FF);
  --tint:          light-dark(#EDEFFD, #191E4A);
  --mark:          light-dark(#2536C8, #8E9AFF);
  --focus:         var(--primary);

  /* Feedback (kept apart from the primary colour; always pair with text or an icon) */
  --danger:      light-dark(#B42318, #FDA29B);
  --success:     light-dark(#067647, #75E0A7);
  --warning:     light-dark(#8A5A00, #F5C76B);

  /* Brand constants: the same in both themes */
  --brand-cobalt: #2536C8;
  --brand-ink:    #0E144D;   /* dark brand surfaces */
  --on-brand:     #FFFFFF;
  --panel:        var(--brand-ink);
  --panel-ink:    #EEF0FD;
  --panel-muted:  #B8BDEE;

  /* Data visualization (canvas and chart strokes) */
  --cv-grid:   light-dark(rgba(14, 19, 37, .07), rgba(142, 154, 255, .09));
  --cv-axis:   light-dark(rgba(14, 19, 37, .24), rgba(142, 154, 255, .30));
  --cv-circle: light-dark(rgba(37, 54, 200, .24), rgba(142, 154, 255, .24));

  /* Shape: square-edged. Controls (buttons, fields, tabs, chips) take --radius-sm, containers (cards, menus) --radius.
     Tailwind's rounded-* scale is mapped onto these (tailwind.config.js); rounded-full stays for real circles. */
  --radius-sm: 2px;
  --radius:    3px;
  --shadow-pop: 0 1px 2px light-dark(rgba(14, 19, 37, .06), rgba(0, 0, 0, .4)), 0 12px 32px -18px light-dark(rgba(14, 19, 37, .28), rgba(0, 0, 0, .7));

  /* Motion: presses land fast, releases spring back */
  --ease-out: cubic-bezier(.2, .7, .3, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);

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

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

/* 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 accent shown on them */
  --navy: #0D1136;
  --navy-light: #181D49;
  --brand-light: #8E9AFF;
  --dot-dark: rgba(142, 154, 255, .18);

  /* Raised fills above --surface (hover rows, subtle and stronger fills) */
  --raised:   light-dark(#F7F8FC, #1A203C);
  --raised-2: light-dark(#EEF0F7, #242B4C);

  /* The second chart series beside --primary (the kit has one saturated colour; charts need more) */
  --series-2: light-dark(#0E8A96, #5ED3DC);

  /* 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;

  /* Tables (.data-table in src/main/frontend/tailwind.css): change these to restyle every table in the app */
  --table-grid:        var(--line);         /* lines between rows and between columns */
  --table-head-line:   var(--line-strong);  /* under the header and over the totals */
  --table-head-bg:     var(--bg-soft);
  --table-head-text:   var(--muted);
  --table-foot-bg:     var(--bg-soft);
  --table-row-hover:   var(--raised);
  --table-cell-x:      1.25rem;             /* list tables */
  --table-cell-y:      .75rem;
  --table-cell-x-compact: .75rem;           /* .data-table-compact: documents, line items, tables inside a card's padding */
  --table-cell-y-compact: .5rem;
  --table-resize-grip:  10px;             /* grab area on a header's edge (static/js/table-resize.js) */
  --table-col-min:      72px;             /* narrowest a column can be resized to (cell padding + ~3 characters) */
}

/* 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: #F4F5FB; --surface: #FFFFFF; --ink: #0E1325; --ink-2: #363D55; --muted: #585F76;
    --line: #E2E5EE; --line-strong: #C5CADA; --grid: rgba(14, 19, 37, .05); --dot: rgba(14, 19, 37, .18);
    --nav-bg: rgba(255, 255, 255, .84);
    --primary: #2536C8; --primary-hover: #1A299F; --primary-press: #142080; --on-primary: #FFFFFF;
    --accent-text: #2536C8; --tint: #EDEFFD; --mark: #2536C8;
    --danger: #B42318; --success: #067647; --warning: #8A5A00;
    --cv-grid: rgba(14, 19, 37, .07); --cv-axis: rgba(14, 19, 37, .24); --cv-circle: rgba(37, 54, 200, .24);
    --shadow-pop: 0 1px 2px rgba(14, 19, 37, .06), 0 12px 32px -18px rgba(14, 19, 37, .28);
    --raised: #F7F8FC; --raised-2: #EEF0F7; --series-2: #0E8A96; --slate: #94A3B8;
  }
}