@import './fonts.css';

/*
  Design Tokens — CenSoft Database Tools
  Corporate Identity (CI) aligned with KKU Supply & CSERP
  Modern OKLCH Color Space with High Contrast & Data-Dense Layout
*/
:root {
  /* Surface & Text */
  --bg: oklch(0.97 0.004 258);
  --surface: oklch(1 0 0);
  --surface-2: oklch(0.94 0.006 258);
  --border: oklch(0.9 0.006 258);
  --border-strong: oklch(0.86 0.008 258);
  --ink: oklch(0.15 0 0);
  --muted: oklch(0.45 0.006 258);
  --ink-soft: oklch(0.35 0.006 258);

  /* Brand / Primary */
  --primary: oklch(0.42 0.15 260);
  --primary-hover: oklch(0.36 0.15 260);
  --primary-active: oklch(0.3 0.14 260);
  --primary-subtle: oklch(0.94 0.025 260);
  --primary-ink: oklch(1 0 0);
  --accent: oklch(0.72 0.13 80);

  /* Left Sidebar */
  --sidebar-bg: oklch(0.22 0.1 258);
  --sidebar-bg-active: oklch(0.3 0.11 258);
  --sidebar-border: oklch(0.3 0.09 258);
  --sidebar-ink: oklch(1 0 0);
  --sidebar-ink-muted: oklch(0.78 0.03 258);

  /* Semantic Status Colors */
  --success: oklch(0.56 0.16 155);
  --success-subtle: oklch(0.95 0.04 155);
  --success-text: oklch(0.32 0.1 155);
  --warning: oklch(0.78 0.15 75);
  --warning-subtle: oklch(0.96 0.04 75);
  --warning-text: oklch(0.36 0.09 70);
  --danger: oklch(0.55 0.19 25);
  --danger-subtle: oklch(0.95 0.04 25);
  --danger-text: oklch(0.4 0.16 25);
  --info: oklch(0.55 0.12 240);
  --info-subtle: oklch(0.95 0.03 240);
  --info-text: oklch(0.34 0.09 240);
  --accent-subtle: oklch(0.96 0.03 80);
  --accent-text: oklch(0.4 0.11 80);

  /* Typography */
  --font-sans: 'Anuphan', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Corner Radii, Shadows & Animation */
  --r-sm: 8px;
  --r-md: 9px;
  --r-lg: 11px;
  --r-xl: 14px;
  --shadow-card: 0 1px 3px oklch(0.15 0 0 / 0.05), 0 1px 2px oklch(0.15 0 0 / 0.03);
  --shadow-card-hover: 0 4px 12px oklch(0.15 0 0 / 0.08);
  --shadow-btn: 0 1px 2px oklch(0.42 0.15 260 / 0.25);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 120ms;
  --dur: 200ms;

  /* Layout Dimensions */
  --sidebar-w: 256px;
  --topbar-h: 56px;

  /* Chart series colors — Server Monitor (design/monitor_dashboard_design.md §6);
     validated colorblind-safe (dataviz skill, light mode, surface #fff) */
  --series-1: oklch(0.55 0.15 260);
  --series-2: oklch(0.68 0.13 80);
  --series-3: oklch(0.58 0.11 190);
  --grid: oklch(0.92 0.004 258);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur: 0ms;
  }
}