/* ============================================================
   DOMAIN · THEMING & DENSITY
   Two axes of runtime flexibility, both driven by data-attributes
   so a consuming app (or a multi-tenant host) can reskin & re-space
   Domain WITHOUT forking components.

   1. BRAND HUE  — set --brand-hue (and optionally --accent-hue) on
      :root or any scope. The brand/accent ramps are derived in OKLCH,
      so one number reskins every primary/selection surface.

   2. DENSITY    — [data-density="compact"] tightens control heights,
      row padding and the type baseline for data-dense modules
      (finance, procurement); "comfortable" is the default.
   ============================================================ */

:root {
  /* ---- Brand hue system (OKLCH) ----
     Change ONE value to reskin. Lightness/chroma curves stay fixed so
     contrast & harmony hold across any hue. */
  --brand-hue: 262; /* @kind other */
  --brand-chroma: 0.17; /* @kind other */
  --accent-hue: 178; /* @kind other */
  --accent-chroma: 0.11; /* @kind other */

  /* Derived brand ramp — overrides the static hexes in colors.css when
     a host sets --brand-hue. Same stop names, OKLCH-generated. */
  --brand-50:  oklch(0.972 0.018 var(--brand-hue));
  --brand-100: oklch(0.938 0.038 var(--brand-hue));
  --brand-200: oklch(0.882 0.070 var(--brand-hue));
  --brand-300: oklch(0.800 0.108 var(--brand-hue));
  --brand-400: oklch(0.706 0.148 var(--brand-hue));
  --brand-500: oklch(0.606 var(--brand-chroma) var(--brand-hue));
  --brand-600: oklch(0.532 calc(var(--brand-chroma) * 0.96) var(--brand-hue));
  --brand-700: oklch(0.460 calc(var(--brand-chroma) * 0.82) var(--brand-hue));
  --brand-800: oklch(0.398 calc(var(--brand-chroma) * 0.66) var(--brand-hue));
  --brand-900: oklch(0.342 calc(var(--brand-chroma) * 0.52) var(--brand-hue));

  --accent-50:  oklch(0.972 0.020 var(--accent-hue));
  --accent-100: oklch(0.930 0.045 var(--accent-hue));
  --accent-200: oklch(0.868 0.075 var(--accent-hue));
  --accent-300: oklch(0.788 0.100 var(--accent-hue));
  --accent-400: oklch(0.712 var(--accent-chroma) var(--accent-hue));
  --accent-500: oklch(0.628 var(--accent-chroma) var(--accent-hue));
  --accent-600: oklch(0.548 calc(var(--accent-chroma) * 0.94) var(--accent-hue));
  --accent-700: oklch(0.470 calc(var(--accent-chroma) * 0.80) var(--accent-hue));
  --accent-800: oklch(0.402 calc(var(--accent-chroma) * 0.66) var(--accent-hue));

  /* ---- Density scale (comfortable = default) ---- */
  --density-control-sm: 28px;
  --density-control-md: 34px;
  --density-control-lg: 40px;
  --density-row-y: 11px;     /* vertical padding for rows/list items */
  --density-cell-y: 10px;    /* table cell vertical padding */
  --density-gap: 12px;       /* default stack gap in generated layouts */
  --density-font: 14px;      /* base UI font in generated surfaces */

  /* Wire the density vars into the control tokens so every existing
     component that reads --control-* responds to density automatically. */
  --control-sm: var(--density-control-sm);
  --control-md: var(--density-control-md);
  --control-lg: var(--density-control-lg);
}

[data-density="compact"] {
  --density-control-sm: 24px;
  --density-control-md: 30px;
  --density-control-lg: 36px;
  --density-row-y: 7px;
  --density-cell-y: 6px;
  --density-gap: 8px;
  --density-font: 13px;
}

[data-density="spacious"] {
  --density-control-sm: 32px;
  --density-control-md: 40px;
  --density-control-lg: 48px;
  --density-row-y: 15px;
  --density-cell-y: 14px;
  --density-gap: 16px;
  --density-font: 15px;
}