/* MAYA9 design tokens — generated from design/UI_MASTER.md §14 (v1.0, 2026-10-06). DO NOT edit per page; change the master. */
:root {
  color-scheme: light;

  /* Typography */
  --m9-font-sans: var(--font-inter, Inter), var(--font-noto-thai, "Noto Sans Thai"), "Segoe UI", Tahoma, sans-serif;
  --m9-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --m9-type-display-hero: 800 clamp(2rem, 5vw, 4rem) / 1.1 var(--m9-font-sans);
  --m9-type-page-title: 800 clamp(1.7rem, 2.4vw, 2.3rem) / 1.15 var(--m9-font-sans);
  --m9-type-section-title: 800 1.25rem / 1.4 var(--m9-font-sans);
  --m9-type-card-title: 700 1rem / 1.3125 var(--m9-font-sans);
  --m9-type-body: 400 var(--m9-body-size) / 1.5 var(--m9-font-sans);
  --m9-type-ui: 500 0.875rem / 1.5 var(--m9-font-sans);
  --m9-type-dense: 500 0.8125rem / 1.46 var(--m9-font-sans);
  --m9-type-label: 700 0.8125rem / 1.385 var(--m9-font-sans);
  --m9-type-caption: 500 0.75rem / 1.5 var(--m9-font-sans);
  --m9-type-micro: 600 0.6875rem / 1.45 var(--m9-font-sans);
  --m9-type-kpi: 800 1.5625rem / 1.24 var(--m9-font-sans);

  /* Brand + text */
  --m9-brand-navy: #071a3a;
  --m9-text: #0f172a;
  --m9-text-secondary: #475569;
  --m9-text-muted: #64748b;
  --m9-primary: #2563eb;
  --m9-on-primary: #ffffff;
  --m9-ring: #3b82f6;

  /* Surfaces */
  --m9-page: #f3f9fc;
  --m9-surface: #ffffff;
  --m9-surface-soft: #f8fbfd;
  --m9-surface-accent: #e8f7fb;
  --m9-surface-secondary: #eef6fb;
  --m9-filter-surface: #fbfdff;
  --m9-row-hover: #f6fbfd;
  --m9-danger-surface: #fffafa;
  --m9-border: #dde7f1;
  --m9-border-soft: #edf2f7;
  --m9-input-border: #cddbea;
  --m9-border-default: 1px solid var(--m9-border);
  --m9-disabled-bg: #f1f5f9;
  --m9-disabled-text: #94a3b8;

  /* Brand gradient + charts */
  --m9-teal: #00d1b2;
  --m9-blue: #3b82f6;
  --m9-violet: #8b5cf6;
  --m9-amber: #f59e0b;
  --m9-pink: #ec4899;
  --m9-gradient-brand: linear-gradient(110deg, #00d1b2 0%, #3b82f6 58%, #8b5cf6 100%);
  --m9-gradient-selected: linear-gradient(110deg, #e8f7fb 0%, #eef6fb 100%);
  --m9-chart-grid: #e8eef5;

  /* Semantic */
  --m9-success: #047857;
  --m9-success-bg: #dff8ef;
  --m9-success-strong: #059669;
  --m9-warning: #a35b05;
  --m9-warning-bg: #fff3d1;
  --m9-warning-strong: #f59e0b;
  --m9-danger: #c22929;
  --m9-danger-bg: #fee8e8;
  --m9-danger-strong: #dc2626;
  --m9-info: #1d4ed8;
  --m9-info-bg: #eaf2ff;
  --m9-info-strong: #2563eb;
  --m9-ai: #7c3aed;
  --m9-ai-bg: #f3edff;
  --m9-ai-strong: #6d28d9;
  --m9-neutral: #4d6077;
  --m9-neutral-bg: #edf2f7;
  --m9-neutral-strong: #64748b;

  /* Space */
  --m9-space-0: 0px;
  --m9-space-0-5: 2px;
  --m9-space-1: 4px;
  --m9-space-1-5: 6px;
  --m9-space-2: 8px;
  --m9-space-2-5: 10px;
  --m9-space-3: 12px;
  --m9-space-3-5: 14px;
  --m9-space-4: 16px;
  --m9-space-4-5: 18px;
  --m9-space-5: 20px;
  --m9-space-6: 24px;
  --m9-space-8: 32px;
  --m9-space-9: 36px;
  --m9-space-10: 40px;
  --m9-space-12: 48px;
  --m9-space-16: 64px;

  /* Shape + elevation */
  --m9-radius-xs: 6px;
  --m9-radius-sm: 8px;
  --m9-radius-md: 10px;
  --m9-radius-lg: 12px;
  --m9-radius-xl: 14px;
  --m9-radius-2xl: 18px;
  --m9-radius-3xl: 24px;
  --m9-radius-pill: 999px;
  --m9-shadow-surface: 0 4px 18px rgb(28 78 121 / 4.5%);
  --m9-shadow-popover: 0 14px 40px rgb(7 26 58 / 14%);
  --m9-shadow-cta: 0 7px 18px rgb(59 130 246 / 22%);
  --m9-focus-color: rgb(59 130 246 / 55%);
  --m9-focus-width: 3px;
  --m9-focus-offset: 2px;

  /* App shell */
  --m9-sidebar-width: 248px;
  --m9-sidebar-collapsed: 82px;
  --m9-topbar-height: 72px;
  --m9-content-max: 1720px;
  --m9-page-gutter: clamp(18px, 2.2vw, 36px);
  --m9-page-stack-gap: 18px;
  --m9-control-min-height: 40px;
  --m9-body-size: 16px;

  /* Compatibility aliases for the current shadcn/Tailwind app */
  --background: var(--m9-page);
  --foreground: var(--m9-text);
  --card: var(--m9-surface);
  --card-foreground: var(--m9-text);
  --popover: var(--m9-surface);
  --popover-foreground: var(--m9-text);
  --primary: var(--m9-primary);
  --primary-foreground: var(--m9-on-primary);
  --secondary: var(--m9-surface-secondary);
  --secondary-foreground: var(--m9-brand-navy);
  --muted: var(--m9-disabled-bg);
  --muted-foreground: var(--m9-text-muted);
  --accent: var(--m9-surface-accent);
  --accent-foreground: var(--m9-brand-navy);
  --destructive: var(--m9-danger-strong);
  --border: var(--m9-border);
  --input: var(--m9-input-border);
  --ring: var(--m9-ring);
  --radius: var(--m9-radius-lg);
  --chart-1: var(--m9-teal);
  --chart-2: var(--m9-blue);
  --chart-3: var(--m9-violet);
  --chart-4: var(--m9-amber);
  --chart-5: var(--m9-pink);
  --sidebar: var(--m9-surface);
  --sidebar-foreground: var(--m9-brand-navy);
  --sidebar-primary: var(--m9-primary);
  --sidebar-primary-foreground: var(--m9-on-primary);
  --sidebar-accent: var(--m9-surface-accent);
  --sidebar-accent-foreground: var(--m9-brand-navy);
  --sidebar-border: var(--m9-border);
  --sidebar-ring: var(--m9-ring);
}

body {
  background: var(--m9-page);
  color: var(--m9-text);
  font: var(--m9-type-body);
}

.m9-focus-ring:focus-visible {
  outline: var(--m9-focus-width) solid var(--m9-focus-color);
  outline-offset: var(--m9-focus-offset);
}

@media (max-width: 1380px) {
  :root { --m9-sidebar-width: 218px; }
}

@media (max-width: 1120px) {
  :root { --m9-sidebar-width: 82px; }
}

@media (max-width: 820px) {
  :root {
    --m9-sidebar-width: 0px;
    --m9-topbar-height: 64px;
    --m9-page-gutter: 14px;
    --m9-control-min-height: 44px;
  }

  .m9-touch-target,
  .m9-field {
    min-block-size: var(--m9-control-min-height);
  }

  .m9-touch-target {
    display: inline-grid;
    place-items: center;
    min-inline-size: 44px;
  }
}

@media (max-width: 560px) {
  :root {
    --m9-page-stack-gap: 14px;
    --m9-body-size: 15px;
  }
}