/* WoxPop Console — design tokens, shared by the admin back-office and the
   partner portal. Every colour, size and radius in console.css comes from
   here; a page never writes a literal colour.

   Theme: light by default; dark when the OS asks for it, unless the user
   picked one — the console stamps data-theme="light|dark" on <html> for an
   explicit choice and nothing for "system". */

:root {
  color-scheme: light;

  /* Brand */
  --brand: #0BCFF5;            /* the logo's cyan: logo, highlights, never text */
  --primary: #0A6C94;          /* actions + links; 5.9:1 on white */
  --primary-hover: #085A7C;
  --primary-ink: #FFFFFF;      /* text on primary */
  --primary-soft: #E3F3F9;     /* selected nav item, info wash */
  --primary-line: #9FD3E6;

  /* Neutrals — a slight blue bias so greys belong to the brand */
  --ink: #0E1B2A;              /* body text */
  --ink-2: #2B3A4A;            /* strong secondary */
  --muted: #5A6B7D;            /* secondary text, 5.0:1 on white */
  --faint: #8796A6;            /* placeholders, disabled */
  --line: #DCE3EA;             /* borders */
  --line-strong: #C3CED9;
  --canvas: #F5F7FA;           /* page ground */
  --surface: #FFFFFF;          /* cards, tables, panels */
  --surface-2: #EEF2F6;        /* table head, inputs' fill, hover */
  --surface-3: #E4EAF0;
  --overlay: rgba(14, 27, 42, .48);

  /* Status — separate from the brand on purpose */
  --ok: #1E8E50;     --ok-bg: #E4F4EA;    --ok-line: #A8DBBC;
  --warn: #B86E00;   --warn-bg: #FBF0DD;  --warn-line: #F0CF95;
  --bad: #C62E45;    --bad-bg: #FBE6EA;   --bad-line: #F0B2BD;
  --info: #2563A8;   --info-bg: #E5EEF8;  --info-line: #ADC7E8;

  /* Chart series (colour-blind-safe order) */
  --c1: #0A6C94; --c2: #0BCFF5; --c3: #E08A1E; --c4: #6C5DD3; --c5: #1E8E50; --c6: #C62E45; --c7: #8796A6;

  /* Type */
  --font: "IBM Plex Sans", "IBM Plex Sans Thai", "Noto Sans Thai", "Noto Sans JP", "Noto Sans KR",
          "Noto Sans SC", "Noto Sans Myanmar", "Noto Sans Lao", "Noto Sans Khmer",
          system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-md: 14px;      /* body + tables */
  --fs-lg: 16px;
  --fs-xl: 20px;      /* section titles */
  --fs-2xl: 24px;     /* page title */
  --fs-3xl: 30px;     /* KPI figures */
  --lh: 1.55;

  /* Space (4px grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px;

  /* Shape */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(14, 27, 42, .06), 0 1px 1px rgba(14, 27, 42, .04);
  --shadow-2: 0 4px 12px rgba(14, 27, 42, .08), 0 1px 3px rgba(14, 27, 42, .06);
  --shadow-3: 0 16px 40px rgba(14, 27, 42, .18), 0 4px 12px rgba(14, 27, 42, .08);
  --focus: 0 0 0 3px rgba(10, 108, 148, .35);

  /* Shell */
  --topbar-h: 56px;
  --side-w: 248px;
  --rail-w: 72px;
  --content-max: 1280px;
  --drawer-w: 560px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --primary: #3FC4EA; --primary-hover: #6BD3F0; --primary-ink: #04202B;
    --primary-soft: #12303E; --primary-line: #1F5468;
    --ink: #E6EDF5; --ink-2: #C9D5E2; --muted: #A0B0C1; --faint: #74859A;
    --line: #243446; --line-strong: #31455B;
    --canvas: #0D1520; --surface: #142030; --surface-2: #1A293B; --surface-3: #22344A;
    --overlay: rgba(2, 6, 12, .66);
    --ok: #4CC584; --ok-bg: #12301F; --ok-line: #1F5A39;
    --warn: #E8A84A; --warn-bg: #33250E; --warn-line: #6A4C17;
    --bad: #F07186; --bad-bg: #38161E; --bad-line: #6E2735;
    --info: #79A9E6; --info-bg: #15253A; --info-line: #2A4A73;
    --c1: #3FC4EA; --c2: #8AE4F7; --c3: #F0A84A; --c4: #9C90F0; --c5: #4CC584; --c6: #F07186; --c7: #74859A;
    --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, .45);
    --shadow-3: 0 18px 44px rgba(0, 0, 0, .6);
    --focus: 0 0 0 3px rgba(63, 196, 234, .4);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --primary: #3FC4EA; --primary-hover: #6BD3F0; --primary-ink: #04202B;
  --primary-soft: #12303E; --primary-line: #1F5468;
  --ink: #E6EDF5; --ink-2: #C9D5E2; --muted: #A0B0C1; --faint: #74859A;
  --line: #243446; --line-strong: #31455B;
  --canvas: #0D1520; --surface: #142030; --surface-2: #1A293B; --surface-3: #22344A;
  --overlay: rgba(2, 6, 12, .66);
  --ok: #4CC584; --ok-bg: #12301F; --ok-line: #1F5A39;
  --warn: #E8A84A; --warn-bg: #33250E; --warn-line: #6A4C17;
  --bad: #F07186; --bad-bg: #38161E; --bad-line: #6E2735;
  --info: #79A9E6; --info-bg: #15253A; --info-line: #2A4A73;
  --c1: #3FC4EA; --c2: #8AE4F7; --c3: #F0A84A; --c4: #9C90F0; --c5: #4CC584; --c6: #F07186; --c7: #74859A;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, .45);
  --shadow-3: 0 18px 44px rgba(0, 0, 0, .6);
  --focus: 0 0 0 3px rgba(63, 196, 234, .4);
}