/* Floow design tokens: ONE system for Business, Pocket, POS, Akun, Ops and floow.id (Aliran,
   2026-10-27). Loaded before every other stylesheet. Products differ only by accent and density:
   <html data-product="business|pocket|pos|akun|ops|site">. Green (--ok) means success only.
   The brand colours (--p-*) are for the Floow dot, Floo and charts; buttons and text use
   --accent, which keeps WCAG AA contrast with --accent-ink in both themes. */

/* Colour tokens: exactly the reference design (docs/desain/*.dc.html), light and dark. */
:root {
  color-scheme: light;
  --bg: #F5F6FA; --surface: #FFFFFF; --surface2: #EEF0F6; --border: #E2E5EE;
  --text: #0E1428; --muted: #5A6377;
  --accent: #3451C6; --accent-soft: #E6EAFB; --accent-ink: #FFFFFF;
  --ok: #0F7A5C; --ok-soft: #E1F3EC;
  --warn: #9A4D07; --warn-soft: #FCEFDD;
  --danger: #B42318; --danger-soft: #FDE8E6;
  /* Needs a person (late, overdue, no candidate). Coral, kept apart from danger = real errors. */
  --need: #B8432A; --need-soft: #FBE9E4;
  --info: #1F5FBF; --info-soft: #E6EFFD; /* 5.2:1 on its soft fill (was 4.17) */
  --chart2: #A9B7F0; --lane: #FAFBFD;
  --shadow: 0 1px 2px rgba(13,27,42,.05), 0 10px 28px rgba(13,27,42,.06);
  --violet: #6B4FD8; --violet-soft: #EFEAFD;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0E1C; --surface: #111729; --surface2: #182036; --border: #263050;
  --text: #E7EAF4; --muted: #96A0BA;
  --accent: #8FA6FF; --accent-soft: #1A2448; --accent-ink: #0A0E1C;
  --ok: #3DD9A4; --ok-soft: #0F2E27;
  --warn: #F5A524; --warn-soft: #33250D;
  --danger: #FF7A6E; --danger-soft: #3A1715;
  --need: #FF9B83; --need-soft: #3A1C14;
  --info: #7CB3FF; --info-soft: #14233D;
  --chart2: #3B4C8C; --lane: #0D1222;
  --shadow: 0 1px 2px rgba(0,0,0,.4), 0 10px 28px rgba(0,0,0,.35);
  --violet: #B49CFF; --violet-soft: #1F1838;
}
/* Light first (ADR 0005): dark applies only via data-theme="dark", set by the user's
   choice or, for "Ikuti sistem", by the early script in base.html when the device is dark. */

/* Component aliases (older names) derived from the reference tokens, plus layout scale. */
:root {
  --font: "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Bricolage Grotesque", "Geist", system-ui, sans-serif;
  /* Product colours (ADR 0005): the Floow dot takes the product's colour. */
  --p-business: #3451C6; --p-pocket: #F26B4E; --p-pos: #0E9F8E;
  --mono: "Geist Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --surface-2: var(--surface2);
  --surface-3: color-mix(in srgb, var(--surface2) 70%, var(--border));
  --border-strong: color-mix(in srgb, var(--border) 65%, var(--muted));
  --text-2: color-mix(in srgb, var(--text) 82%, var(--muted));
  --primary: var(--accent); --primary-soft: var(--accent-soft); --primary-text: var(--accent-ink);
  --primary-hover: color-mix(in srgb, var(--accent) 85%, var(--text));
  --success: var(--ok); --success-soft: var(--ok-soft);
  --warning: var(--warn); --warning-soft: var(--warn-soft);
  --ring: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent);
  --shadow-xs: var(--shadow); --shadow-sm: var(--shadow);
  --shadow-md: var(--shadow), 0 16px 40px -12px color-mix(in srgb, var(--text) 18%, transparent);
  --shadow-lg: var(--shadow), 0 30px 70px -20px color-mix(in srgb, var(--text) 30%, transparent);
  --glow: none;

  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-xl: 20px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px;
  --sidebar: 232px; --sidebar-collapsed: 68px; --topbar: 64px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-fast: 120ms; --t: 200ms; --t-slow: 420ms;
}

/* Product accents --------------------------------------------------------------------- */
[data-product="pocket"] {
  --accent: #B8432A; --accent-soft: #FBE9E4; --accent-ink: #FFFFFF;
  --accent-brand: var(--p-pocket);
}
[data-product="pocket"][data-theme="dark"] { --accent: #FF9B83; --accent-soft: #3A1C14; --accent-ink: #1A0A06; }
[data-product="pos"] {
  /* Cyan-leaning teal so it never reads as the success green. */
  --accent: #0E7490; --accent-soft: #E0F2F7; --accent-ink: #FFFFFF;
  --accent-brand: var(--p-pos);
}
[data-product="pos"][data-theme="dark"] { --accent: #22C3D6; --accent-soft: #0F2A33; --accent-ink: #06151A; }
:root { --accent-brand: var(--p-business); --focus-ring: var(--ring); }