/*
 * Design tokens. Generated by `pnpm tokens:sync` from tokens/site.ts and the crn_theme snapshot
 * (tokens/crn-theme-export.json), through tokens/mapping.ts. Do not edit this file: change the
 * source and run the sync. A unit test fails while this file is out of date.
 *
 * Two families:
 * - Page tokens (--bg, --ink, --primary, ...) follow the visitor's theme: light by default,
 *   dark when <html data-theme="dark">, or when the system prefers dark and no choice was made.
 * - Night tokens (--night-*) colour the always-dark bands (hero, controls, CTA, footer) and do
 *   not change with the theme.
 *
 * Status colours are fixed whatever the theme. Amber is used only for Pending and warnings.
 * No colour literal should appear anywhere else in the site; components use these variables.
 * Values marked crn_theme come from the product, so the site and CrineonERP share one brand.
 */

:root {
  color-scheme: light;

  --bg: #ffffff;
  --bg-alt: #f4f5f8;
  --surface: #ffffff;
  --ink: #1b1f3b;
  --text: #374151;
  --text-2: #4b5563;
  --kicker: #5f6673;
  --line: #e3e5ec;
  --line-strong: #d9dce5;
  --control-line: #c9cdd8;
  --primary: #0e6a75; /* crn_theme --crn-primary */
  --primary-hover: #0a525b;
  --on-primary: #ffffff;
  --primary-soft: #e3f1f2;

  /* The edge of a text field, select or number box: 3:1 against the page (WCAG 1.4.11). Ghost
     buttons and placeholders keep --control-line; their labels identify them. */
  --field-line: #878c9f;

  /* Floating header pill, menu panels and the scrim behind them (HeaderStates board). The pill is
     solid: white in light, the surface colour in dark. */
  --pill-bg: #ffffff;
  --pill-line: rgb(27 31 59 / 0.08);
  --scrim: rgb(17 20 42 / 0.18);

  --night: #11142a;
  --night-surface: #1a1e3a;
  --night-raised: #232848;
  --night-deep: #0c0f21;
  --night-ink: #ffffff;
  --night-text: #e8eaf2;
  --night-sub: #c3c7da;
  --night-muted: #a3a8c3;
  --night-line: rgb(255 255 255 / 0.12);
  --night-line-soft: rgb(255 255 255 / 0.08);
  --night-card-line: rgb(255 255 255 / 0.1);
  --night-control-line: rgb(255 255 255 / 0.28);
  --night-hover: rgb(255 255 255 / 0.08);
  --night-grid: rgb(255 255 255 / 0.04);
  --accent: #5fbcc6; /* crn_theme --crn-accent, dark */
  --accent-hover: #8fd3da;
  --on-accent: #11142a;
  --night-ok: #8fd9a8;

  --elevation-raised: 0 24px 56px rgb(17 20 42 / 0.14);
  --elevation-bubble: 0 1px 2px rgb(17 20 42 / 0.08);
  --elevation-pill: 0 8px 24px rgb(17 20 42 / 0.12);
  --elevation-panel: 0 24px 56px rgb(17 20 42 / 0.18);

  --ok: #1b6b43;
  --ok-soft: #e3f3ea;
  --warn: #8a5300;
  --warn-soft: #fcf1dc;
  --warn-strong: #f0b44c;
  --bad: #a3261b;
  --bad-soft: #fbe9e7;
  --draft: #374151;
  --draft-soft: #eef0f4;

  /* Solid status fills that carry white text, such as compliance calendar days (Controls board). */
  --ok-strong: #1b6b43;
  --bad-strong: #a3261b;

  /* A rule CrineonERP refused, on a night band (Controls board, "Try to break the rules"). */
  --night-bad: #ff9d8f;
  --night-bad-surface: #2a1a22;
  --night-bad-line: rgb(255 157 143 / 0.45);

  /* A fixed white ground for logos and swatches on /brand, whatever the theme. */
  --logo-ground: #ffffff;

  /* The paper form in the Controls before-and-after: a drawing of paper, the same in every theme. */
  --paper: #fffdf8;
  --paper-line: #d9d1c2;
  --paper-rule: #9a9488;
  --paper-ink: #3e3d38;
  --paper-note: #efe6cf;
  --pen: #1f3a8a;
  --elevation-paper: 0 10px 24px rgb(27 31 35 / 0.08);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    color-scheme: dark;
    --bg: #0e1124;
    --bg-alt: #131731;
    --surface: #181c36;
    --ink: #e8eaf2;
    --text: #c3c7da;
    --text-2: #a3a8c3;
    --kicker: #a3a8c3;
    --line: rgb(255 255 255 / 0.12);
    --line-strong: rgb(255 255 255 / 0.16);
    --control-line: rgb(255 255 255 / 0.24);
    --field-line: rgb(255 255 255 / 0.36);
    --primary: #5fbcc6; /* crn_theme --crn-primary */
    --primary-hover: #8fd3da;
    --on-primary: #11142a;
    --primary-soft: rgb(95 188 198 / 0.12);
    --pill-bg: #181c36;
    --pill-line: rgb(255 255 255 / 0.12);
    --scrim: rgb(0 0 0 / 0.4);
    --ok: #8fd9a8;
    --ok-soft: #14302a;
    --warn: #f0b44c;
    --warn-soft: #2a2118;
    --bad: #f4a39a;
    --bad-soft: #3a1c1c;
    --draft: #c3c7da;
    --draft-soft: #232848;
  }
}

:root[data-theme='dark'] {
  color-scheme: dark;
  --bg: #0e1124;
  --bg-alt: #131731;
  --surface: #181c36;
  --ink: #e8eaf2;
  --text: #c3c7da;
  --text-2: #a3a8c3;
  --kicker: #a3a8c3;
  --line: rgb(255 255 255 / 0.12);
  --line-strong: rgb(255 255 255 / 0.16);
  --control-line: rgb(255 255 255 / 0.24);
  --field-line: rgb(255 255 255 / 0.36);
  --primary: #5fbcc6; /* crn_theme --crn-primary */
  --primary-hover: #8fd3da;
  --on-primary: #11142a;
  --primary-soft: rgb(95 188 198 / 0.12);
  --pill-bg: #181c36;
  --pill-line: rgb(255 255 255 / 0.12);
  --scrim: rgb(0 0 0 / 0.4);
  --ok: #8fd9a8;
  --ok-soft: #14302a;
  --warn: #f0b44c;
  --warn-soft: #2a2118;
  --bad: #f4a39a;
  --bad-soft: #3a1c1c;
  --draft: #c3c7da;
  --draft-soft: #232848;
}