/* Design tokens. Every text/background pair here is contrast-checked:
   body text >= 4.5:1, large text and UI components >= 3:1, in both themes. */

:root {
  /* ---- Type ---------------------------------------------------------- */
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter,
          system-ui, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
               "Liberation Mono", monospace;

  /* Fixed rem scale, ~1.12 ratio. Product UI does not want fluid headings. */
  --t-11: 0.6875rem;
  --t-12: 0.75rem;
  --t-13: 0.8125rem;
  --t-14: 0.875rem;
  --t-15: 0.9375rem;
  --t-17: 1.0625rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-28: 1.75rem;
  --t-34: 2.125rem;

  --w-regular: 400;
  --w-medium: 500;
  --w-semibold: 590;
  --w-bold: 680;

  /* ---- Spacing: 8pt grid, with 4pt half-steps ------------------------ */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;

  /* ---- Radii --------------------------------------------------------- */
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 10px;
  --r-xl: 14px;
  --r-2xl: 18px;
  --r-full: 999px;

  /* ---- Motion -------------------------------------------------------- */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --d-fast: 140ms;
  --d-base: 220ms;
  --d-slow: 300ms;

  /* ---- Z scale: semantic, never arbitrary ---------------------------- */
  --z-base: 1;
  --z-sticky: 100;
  --z-dropdown: 200;
  --z-backdrop: 300;
  --z-modal: 400;
  --z-toast: 500;
  --z-tooltip: 600;

  /* ---- Layout -------------------------------------------------------- */
  --sidebar-w: 244px;
  --topbar-h: 56px;
  --content-max: 1180px;
}

/* ====================================================================== */
/* Light                                                                  */
/* ====================================================================== */
:root[data-theme="light"] {
  color-scheme: light;

  --bg: oklch(1 0 0);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.978 0 0);          /* sidebar / toolbars */
  --surface-3: oklch(0.958 0 0);          /* inset wells, table headers */
  --surface-raised: oklch(1 0 0);         /* popovers, modals */
  --surface-hover: oklch(0.966 0 0);
  --surface-active: oklch(0.940 0 0);

  --chrome: oklch(0.99 0 0 / 0.72);       /* translucent layered chrome */
  --scrim: oklch(0.2 0 0 / 0.28);

  --hairline: oklch(0.895 0 0);
  --hairline-strong: oklch(0.84 0 0);

  --ink: oklch(0.19 0 0);                 /* 16.9:1 on bg */
  --ink-2: oklch(0.40 0 0);               /* 6.4:1  */
  --ink-3: oklch(0.48 0 0);               /* 4.9:1  - lowest text token */
  --ink-4: oklch(0.62 0 0);               /* icons + rules only, never text */
  --ink-disabled: oklch(0.72 0 0);
  --ink-invert: oklch(1 0 0);

  --accent: oklch(0.48 0.18 268);         /* white on this = 4.9:1 */
  --accent-hover: oklch(0.43 0.18 268);
  --accent-active: oklch(0.385 0.18 268);
  --accent-ink: oklch(0.47 0.18 268);     /* accent as text on bg = 4.9:1 */
  --accent-soft: oklch(0.955 0.022 268);
  --accent-soft-hover: oklch(0.93 0.032 268);
  --accent-ring: oklch(0.55 0.19 268 / 0.42);

  --ok: oklch(0.47 0.14 152);
  --ok-ink: oklch(0.44 0.14 152);
  --ok-soft: oklch(0.955 0.032 152);
  --warn: oklch(0.52 0.13 72);
  --warn-ink: oklch(0.44 0.13 72);
  --warn-soft: oklch(0.958 0.045 84);
  --bad: oklch(0.50 0.20 25);
  --bad-ink: oklch(0.44 0.20 25);
  --bad-soft: oklch(0.958 0.028 25);
  --neutral-soft: oklch(0.955 0 0);

  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.04), 0 1px 3px oklch(0 0 0 / 0.05);
  --shadow-2: 0 2px 6px oklch(0 0 0 / 0.04), 0 6px 16px -4px oklch(0 0 0 / 0.07);
  --shadow-3: 0 4px 12px oklch(0 0 0 / 0.05), 0 16px 40px -8px oklch(0 0 0 / 0.11);
  --shadow-4: 0 8px 24px oklch(0 0 0 / 0.07), 0 32px 72px -16px oklch(0 0 0 / 0.18);
}

/* ====================================================================== */
/* Dark                                                                   */
/* ====================================================================== */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: oklch(0.172 0 0);
  --surface: oklch(0.205 0 0);
  --surface-2: oklch(0.148 0 0);
  --surface-3: oklch(0.235 0 0);
  --surface-raised: oklch(0.243 0 0);
  --surface-hover: oklch(0.248 0 0);
  --surface-active: oklch(0.285 0 0);

  --chrome: oklch(0.165 0 0 / 0.72);
  --scrim: oklch(0 0 0 / 0.55);

  --hairline: oklch(0.30 0 0);
  --hairline-strong: oklch(0.38 0 0);

  --ink: oklch(0.97 0 0);
  --ink-2: oklch(0.76 0 0);               /* 8.2:1 on bg */
  --ink-3: oklch(0.66 0 0);               /* 6.0:1 */
  --ink-4: oklch(0.52 0 0);               /* icons + rules only */
  --ink-disabled: oklch(0.44 0 0);
  --ink-invert: oklch(1 0 0);

  --accent: oklch(0.48 0.18 268);
  --accent-hover: oklch(0.545 0.18 268);
  --accent-active: oklch(0.59 0.17 268);
  --accent-ink: oklch(0.78 0.12 268);     /* 8.4:1 on bg */
  --accent-soft: oklch(0.27 0.06 268);
  --accent-soft-hover: oklch(0.31 0.07 268);
  --accent-ring: oklch(0.66 0.17 268 / 0.55);

  --ok: oklch(0.47 0.14 152);
  --ok-ink: oklch(0.80 0.15 155);
  --ok-soft: oklch(0.265 0.05 155);
  --warn: oklch(0.52 0.13 72);
  --warn-ink: oklch(0.83 0.13 82);
  --warn-soft: oklch(0.275 0.045 75);
  --bad: oklch(0.50 0.20 25);
  --bad-ink: oklch(0.76 0.16 24);
  --bad-soft: oklch(0.275 0.06 25);
  --neutral-soft: oklch(0.26 0 0);

  --shadow-1: 0 1px 2px oklch(0 0 0 / 0.30), 0 1px 3px oklch(0 0 0 / 0.24);
  --shadow-2: 0 2px 6px oklch(0 0 0 / 0.32), 0 6px 16px -4px oklch(0 0 0 / 0.40);
  --shadow-3: 0 4px 12px oklch(0 0 0 / 0.36), 0 16px 40px -8px oklch(0 0 0 / 0.52);
  --shadow-4: 0 8px 24px oklch(0 0 0 / 0.44), 0 32px 72px -16px oklch(0 0 0 / 0.64);
}