/* ==========================================================================
   Design tokens — IBM Carbon Design System v11 inspired
   Every component and page style consumes these. Do not hard-code values.
   ========================================================================== */

:root {
  /* ---- Palette (Carbon v11) ---- */
  --cds-gray-10: #f4f4f4;
  --cds-gray-20: #e0e0e0;
  --cds-gray-30: #c6c6c6;
  --cds-gray-40: #a8a8a8;
  --cds-gray-50: #8d8d8d;
  --cds-gray-60: #6f6f6f;
  --cds-gray-70: #525252;
  --cds-gray-80: #393939;
  --cds-gray-90: #262626;
  --cds-gray-100: #161616;
  --cds-white: #ffffff;

  --cds-blue-10: #edf5ff;
  --cds-blue-20: #d0e2ff;
  --cds-blue-40: #78a9ff;
  --cds-blue-60: #0f62fe;
  --cds-blue-70: #0043ce;
  --cds-blue-80: #002d9c;

  --cds-green-10: #defbe6;
  --cds-green-40: #42be65;
  --cds-green-60: #198038;
  --cds-red-10: #fff1f1;
  --cds-red-20: #ffd7d9;
  --cds-red-40: #ff8389;
  --cds-red-60: #da1e28;
  --cds-red-70: #a2191f;
  --cds-red-80: #750e13;
  --cds-yellow-10: #fcf4d6;
  --cds-yellow-30: #f1c21b;
  --cds-yellow-60: #8e6a00;
  --cds-purple-10: #f6f2ff;
  --cds-purple-60: #8a3ffc;
  --cds-cyan-10: #e5f6ff;
  --cds-cyan-60: #0072c3;

  /* ---- Semantic colour roles (White theme). Accent: Carbon red. ---- */
  --cds-background: var(--cds-white);
  --cds-background-alt: var(--cds-gray-10);
  --cds-layer: var(--cds-white);
  --cds-layer-hover: var(--cds-gray-10);
  --cds-layer-accent: var(--cds-gray-20);
  --cds-border-subtle: var(--cds-gray-20);
  --cds-border-strong: var(--cds-gray-50);
  --cds-border-interactive: var(--cds-red-60);
  --cds-text-primary: var(--cds-gray-100);
  --cds-text-secondary: var(--cds-gray-70);
  --cds-text-helper: var(--cds-gray-60);
  --cds-text-placeholder: var(--cds-gray-50);
  --cds-text-on-color: var(--cds-white);
  --cds-link-primary: var(--cds-red-60);
  --cds-link-primary-hover: var(--cds-red-70);
  --cds-interactive: var(--cds-red-60);
  --cds-focus: var(--cds-red-60);
  --cds-support-success: var(--cds-green-60);
  --cds-support-warning: var(--cds-yellow-30);
  --cds-support-error: var(--cds-red-60);
  --cds-support-info: var(--cds-red-60);

  /* ---- Type ---- */
  --cds-font-sans:
    "IBM Plex Sans", "Kantumruy Pro", "Noto Sans Khmer", system-ui, -apple-system, "Segoe UI",
    sans-serif;
  /* Khmer: self-hosted Kantumruy Pro (as on rnd.bykh.org), Noto Sans Khmer as glyph fallback.
     Both cover only the Khmer block, so IBM Plex Sans draws Latin. System Khmer fonts last. */
  --cds-font-khmer:
    "Kantumruy Pro", "Noto Sans Khmer", "IBM Plex Sans", "Khmer OS Siemreap", "Khmer OS",
    "Khmer UI", "Leelawadee UI", "Khmer Sangam MN", sans-serif;
  --cds-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* ---- Spacing scale (Carbon spacing-01 … spacing-13) ---- */
  --cds-spacing-01: 0.125rem; /* 2px */
  --cds-spacing-02: 0.25rem; /* 4px */
  --cds-spacing-03: 0.5rem; /* 8px */
  --cds-spacing-04: 0.75rem; /* 12px */
  --cds-spacing-05: 1rem; /* 16px */
  --cds-spacing-06: 1.5rem; /* 24px */
  --cds-spacing-07: 2rem; /* 32px */
  --cds-spacing-08: 2.5rem; /* 40px */
  --cds-spacing-09: 3rem; /* 48px */
  --cds-spacing-10: 4rem; /* 64px */
  --cds-spacing-11: 5rem; /* 80px */
  --cds-spacing-12: 6rem; /* 96px */
  --cds-spacing-13: 10rem; /* 160px */

  /* ---- Layout ---- */
  --cds-grid-max: 99rem; /* 1584px, Carbon max grid */
  --cds-grid-gutter: var(--cds-spacing-05);
  --cds-grid-gutter-lg: var(--cds-spacing-07);
  --cds-radius: 0; /* Carbon: sharp corners */

  /* ---- Motion ---- */
  --cds-duration-fast: 110ms;
  --cds-duration-moderate: 240ms;
  --cds-ease-productive: cubic-bezier(0.2, 0, 0.38, 0.9);
  --cds-ease-expressive: cubic-bezier(0.4, 0.14, 0.3, 1);

  color-scheme: light dark;
}

/* ---- Gray 100 theme (dark) ---- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cds-background: var(--cds-gray-100);
    --cds-background-alt: var(--cds-gray-90);
    --cds-layer: var(--cds-gray-90);
    --cds-layer-hover: var(--cds-gray-80);
    --cds-layer-accent: var(--cds-gray-80);
    --cds-border-subtle: var(--cds-gray-80);
    --cds-border-strong: var(--cds-gray-60);
    --cds-text-primary: var(--cds-gray-10);
    --cds-text-secondary: var(--cds-gray-30);
    --cds-text-helper: var(--cds-gray-40);
    --cds-text-placeholder: var(--cds-gray-60);
    --cds-link-primary: var(--cds-red-40);
    --cds-link-primary-hover: var(--cds-red-20);
    --cds-focus: var(--cds-white);
    --cds-support-success: var(--cds-green-40);
  }
}

:root[data-theme="dark"] {
  --cds-background: var(--cds-gray-100);
  --cds-background-alt: var(--cds-gray-90);
  --cds-layer: var(--cds-gray-90);
  --cds-layer-hover: var(--cds-gray-80);
  --cds-layer-accent: var(--cds-gray-80);
  --cds-border-subtle: var(--cds-gray-80);
  --cds-border-strong: var(--cds-gray-60);
  --cds-text-primary: var(--cds-gray-10);
  --cds-text-secondary: var(--cds-gray-30);
  --cds-text-helper: var(--cds-gray-40);
  --cds-text-placeholder: var(--cds-gray-60);
  --cds-link-primary: var(--cds-red-40);
  --cds-link-primary-hover: var(--cds-red-20);
  --cds-focus: var(--cds-white);
  --cds-support-success: var(--cds-green-40);
}