/* XCET design tokens, v1.0.0
   One definition of every colour, size, radius and shadow used by the XCET tools. Copy this file unchanged into each
   repo; do not edit it there. Change it here, bump the version above, and re-copy.

   Palette: navy #142146, plum #953d76, sand #cfccbc, gold #ebd166, red #c4232a, white.
   Themes: Match System (default), Light, Dark. xcet-theme.js sets data-theme="light"|"dark" on <html> for an explicit
   choice; with no attribute the OS preference applies. Both dark blocks below are generated from one list, so keep
   them identical.

   Contrast (WCAG 2.2 AA): every text pair is 4.5:1 or better; --control-border and --focus are 3:1 or better against
   --surface, --surface-2 and --bg in their theme. */

:root {
  color-scheme: light dark;

  --bg: #f7f5f0;
  --surface: #ffffff;
  --surface-2: #faf8f4;
  --table-head-bg: #f7f5f0;
  --border: #e3e0d4;            /* decorative: card edges, dividers */
  --border-strong: #cfccbc;     /* section rules, table frame */
  --control-border: #857f6e;    /* inputs, checkboxes, outlined buttons: 3:1 or better */
  --input-bg: #ffffff;
  --text: #142146;
  --text-muted: #6e6a5c;

  --accent: #953d76;            /* text, icons, links on --surface */
  --accent-hover: #7f3264;
  --accent-contrast: #ffffff;   /* text on --accent-fill */
  --accent-soft: #f6eef3;
  --accent-fill: #953d76;       /* primary button, active menu item */
  --accent-fill-hover: #7f3264;
  --link: #7f3264;
  --link-hover: #953d76;

  --success: #346b4e;  --success-bg: #eaf3ee;  --success-border: #bcd9c8;  --success-contrast: #ffffff;
  --danger: #c4232a;   --danger-bg: #fbecec;   --danger-border: #f0c4c6;   --danger-fill: #c4232a;  --danger-contrast: #ffffff;
  --warning: #8a6a12;  --warning-bg: #faf4e0;  --warning-border: #ecdca6;
  --info: #2f4f8f;     --info-bg: #eaf0fb;     --info-border: #c3cbe8;
  --lookup: #ebd166;   --lookup-text: #142146;

  --focus: #142146;
  --focus-on-header: #ebd166;

  --header-bg: linear-gradient(135deg, #142146, #2d3a5f);
  --header-text: #ffffff;
  --header-muted: rgba(255, 255, 255, 0.78);
  --header-border: transparent;
  --header-chip-bg: rgba(255, 255, 255, 0.12);
  --header-chip-border: rgba(255, 255, 255, 0.4);

  --shadow-xs: 0 1px 2px rgba(20, 33, 70, 0.08);
  --shadow-sm: 0 1px 2px rgba(20, 33, 70, 0.06), 0 4px 16px rgba(20, 33, 70, 0.09);
  --shadow-md: 0 2px 4px rgba(20, 33, 70, 0.08), 0 10px 28px rgba(20, 33, 70, 0.14);
  --btn-shadow: 0 1px 2px rgba(20, 33, 70, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.14);
  --btn-shadow-quiet: 0 1px 2px rgba(20, 33, 70, 0.08);
  --scrim: rgba(10, 16, 34, 0.5);

  --chart-1: #2a78d6; --chart-2: #d4511f; --chart-3: #14875f; --chart-4: #b57700; --chart-5: #d0457a; --chart-other: #7d8599;

  --fs-xs: 0.72rem;
  --fs-sm: 0.83rem;
  --fs-md: 0.9rem;
  --fs-base: 1rem;
  --fs-lg: 1.1rem;
  --fs-xl: 1.3rem;
  --fs-stat: 2rem;
  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 3rem;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-card: 14px;
  --radius-btn: 10px;
  --radius-pill: 999px;

  --control-h: 2.5rem;
  --content-max: 1840px;
  --gnav-w: 240px;
  --motion: 0.15s ease;

  --z-sticky: 2;
  --z-nav: 40;
  --z-action-bar: 40;
  --z-skip: 3000;
  --z-toast: 9500;

  /* Legacy soft focus halo. Deprecated: xcet-ui.css uses the solid --focus outline instead. */
  --ring: 0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent);

  /* Aliases the Bulk tool's Create Assets pages still read; delete once those pages use the names above. */
  --panel-bg: var(--surface);
  --table-row-alt: var(--surface-2);
  --accent-text: var(--accent-contrast);
  --success-text: var(--success-contrast);
  --elevation: var(--shadow-sm);
  --input-border: var(--control-border);
  --text-faint: var(--text-muted);  /* retired: it failed 4.5:1 in dark */
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #10162c;
    --surface: #182140;
    --surface-2: #151d3a;
    --table-head-bg: #10162c;
    --border: #2c3354;
    --border-strong: #3a3f5c;
    --control-border: #7480a6;
    --input-bg: #182140;
    --text: #f1efe9;
    --text-muted: #a9a394;

    --accent: #d98bbb;
    --accent-hover: #e6a3cc;
    --accent-contrast: #14122b;   /* dark text on the pink: over 5.7:1 */
    --accent-soft: #29284a;
    --accent-fill: #c27aa6;
    --accent-fill-hover: #cf8db6;
    --link: #e6a3cc;
    --link-hover: #d98bbb;

    --success: #5fae82;  --success-bg: #14302a;  --success-border: #25513e;  --success-contrast: #10162c;
    --danger: #e5646b;   --danger-bg: #36192a;   --danger-border: #5a2634;   --danger-fill: #c23b41;  --danger-contrast: #ffffff;
    --warning: #e8c65a;  --warning-bg: #2f2c2c;  --warning-border: #5a4c24;
    --info: #8fb0f0;     --info-bg: #1c2a52;     --info-border: #2f4378;
    --lookup: #ebd166;   --lookup-text: #10162c;

    --focus: #ebd166;
    --focus-on-header: #ebd166;

    --header-bg: linear-gradient(135deg, #0b1024, #1b2547);
    --header-text: #ffffff;
    --header-muted: rgba(255, 255, 255, 0.75);
    --header-border: #2c3354;
    --header-chip-bg: rgba(255, 255, 255, 0.12);
    --header-chip-border: rgba(255, 255, 255, 0.4);

    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
    --btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    --btn-shadow-quiet: 0 1px 2px rgba(0, 0, 0, 0.3);
    --scrim: rgba(0, 0, 0, 0.6);

    --chart-1: #3987e5; --chart-2: #d95926; --chart-3: #199e70; --chart-4: #c98500; --chart-5: #d55181; --chart-other: #6f7896;
  }
}

:root[data-theme="dark"] {
  --bg: #10162c;
  --surface: #182140;
  --surface-2: #151d3a;
  --table-head-bg: #10162c;
  --border: #2c3354;
  --border-strong: #3a3f5c;
  --control-border: #7480a6;
  --input-bg: #182140;
  --text: #f1efe9;
  --text-muted: #a9a394;

  --accent: #d98bbb;
  --accent-hover: #e6a3cc;
  --accent-contrast: #14122b;   /* dark text on the pink: over 5.7:1 */
  --accent-soft: #29284a;
  --accent-fill: #c27aa6;
  --accent-fill-hover: #cf8db6;
  --link: #e6a3cc;
  --link-hover: #d98bbb;

  --success: #5fae82;  --success-bg: #14302a;  --success-border: #25513e;  --success-contrast: #10162c;
  --danger: #e5646b;   --danger-bg: #36192a;   --danger-border: #5a2634;   --danger-fill: #c23b41;  --danger-contrast: #ffffff;
  --warning: #e8c65a;  --warning-bg: #2f2c2c;  --warning-border: #5a4c24;
  --info: #8fb0f0;     --info-bg: #1c2a52;     --info-border: #2f4378;
  --lookup: #ebd166;   --lookup-text: #10162c;

  --focus: #ebd166;
  --focus-on-header: #ebd166;

  --header-bg: linear-gradient(135deg, #0b1024, #1b2547);
  --header-text: #ffffff;
  --header-muted: rgba(255, 255, 255, 0.75);
  --header-border: #2c3354;
  --header-chip-bg: rgba(255, 255, 255, 0.12);
  --header-chip-border: rgba(255, 255, 255, 0.4);

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.5);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
  --btn-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --btn-shadow-quiet: 0 1px 2px rgba(0, 0, 0, 0.3);
  --scrim: rgba(0, 0, 0, 0.6);

  --chart-1: #3987e5; --chart-2: #d95926; --chart-3: #199e70; --chart-4: #c98500; --chart-5: #d55181; --chart-other: #6f7896;
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }