@import url('https://fonts.googleapis.com/css2?family=Mitr:wght@400;500;600;700&family=Noto+Sans+Thai:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
/* @group-priority: primary, accent, success, info */

:root {
  /* primary */
  --saiaksorn-primary-50: #eef8ff; /* AI-generated */
  --saiaksorn-primary-100: #d8eeff; /* AI-generated */
  --saiaksorn-primary-200: #b5defe; /* AI-generated */
  --saiaksorn-primary-300: #83c8fd; /* AI-generated */
  --saiaksorn-primary-400: #48adfb; /* AI-generated */
  --saiaksorn-primary-500: #1f8ff2; /* AI-generated */ /* @primary */
  --saiaksorn-primary-600: #0e73d0; /* AI-generated */
  --saiaksorn-primary-700: #0d5ca8; /* AI-generated */
  --saiaksorn-primary-800: #124c87; /* AI-generated */
  --saiaksorn-primary-900: #153f6f; /* AI-generated */
  --primary: var(--saiaksorn-primary-500); /* AI-generated */
  --primary-foreground: var(--text-inverse); /* AI-generated */
  --primary-container: var(--saiaksorn-primary-50); /* AI-generated */
  --ring: var(--saiaksorn-primary-300); /* AI-generated */
  --color-primary: var(--primary); /* AI-generated */
  --color-on-primary: var(--primary-foreground); /* AI-generated */
  --color-primary-container: var(--primary-container); /* AI-generated */

  /* accent */
  --saiaksorn-accent-50: #fff8e6; /* AI-generated */
  --saiaksorn-accent-100: #ffefbf; /* AI-generated */
  --saiaksorn-accent-200: #ffe08a; /* AI-generated */
  --saiaksorn-accent-300: #ffd15a; /* AI-generated */ /* @primary */
  --saiaksorn-accent-400: #f3b92f; /* AI-generated */
  --saiaksorn-accent-500: #d99d12; /* AI-generated */
  --accent: var(--saiaksorn-accent-300); /* AI-generated */
  --accent-hover: var(--saiaksorn-accent-400); /* AI-generated */
  --accent-foreground: var(--text-strong); /* AI-generated */
  --link: var(--saiaksorn-primary-700); /* AI-generated */
  --color-accent: var(--accent); /* AI-generated */
  --color-accent-hover: var(--accent-hover); /* AI-generated */

  /* neutral */
  --saiaksorn-neutral-50: #f6f9fc; /* AI-generated */
  --saiaksorn-neutral-100: #edf2f7; /* AI-generated */
  --saiaksorn-neutral-200: #dbe4ee; /* AI-generated */
  --saiaksorn-neutral-300: #c3d0dd; /* AI-generated */
  --saiaksorn-neutral-400: #98aabc; /* AI-generated */
  --saiaksorn-neutral-500: #76889b; /* AI-generated */ /* @primary */
  --saiaksorn-neutral-600: #5b6d80; /* AI-generated */
  --saiaksorn-neutral-700: #47586a; /* AI-generated */
  --saiaksorn-neutral-800: #334252; /* AI-generated */
  --saiaksorn-neutral-900: #24313f; /* AI-generated */
  --secondary: var(--saiaksorn-neutral-100); /* AI-generated */
  --secondary-foreground: var(--saiaksorn-neutral-800); /* AI-generated */
  --border: var(--saiaksorn-neutral-200); /* AI-generated */
  --rule: var(--saiaksorn-neutral-200); /* AI-generated */
  --color-secondary: var(--secondary); /* AI-generated */
  --color-outline: var(--border); /* AI-generated */
  --color-border: var(--border); /* AI-generated */

  /* text */
  --text-inverse: #ffffff; /* AI-generated */
  --text-soft: #5b6d80; /* AI-generated */
  --text-body: #24313f; /* AI-generated */ /* @primary */
  --text-strong: #17222d; /* AI-generated */
  --foreground: var(--text-body); /* AI-generated */
  --fg: var(--text-strong); /* AI-generated */
  --muted: var(--text-soft); /* AI-generated */
  --muted-foreground: var(--text-soft); /* AI-generated */
  --color-foreground: var(--foreground); /* AI-generated */
  --color-on-surface: var(--fg); /* AI-generated */
  --color-muted-foreground: var(--muted); /* AI-generated */

  /* surface */
  --surface-page: #ffffff; /* AI-generated */
  --surface-base: #f9fbfd; /* AI-generated */ /* @primary */
  --surface-tint: #f5fbff; /* AI-generated */
  --surface-raised: #eef5fb; /* AI-generated */
  --surface-strong: #dbe7f2; /* AI-generated */
  --surface-inverse: #17222d; /* AI-generated */
  --background: var(--surface-page); /* AI-generated */
  --bg: var(--surface-page); /* AI-generated */
  --surface: var(--surface-base); /* AI-generated */
  --surface-container-low: var(--surface-tint); /* AI-generated */
  --surface-container: var(--surface-raised); /* AI-generated */
  --surface-container-high: var(--surface-strong); /* AI-generated */
  --color-background: var(--background); /* AI-generated */
  --color-surface: var(--surface); /* AI-generated */
  --color-surface-container: var(--surface-container); /* AI-generated */
  --color-card: var(--surface); /* AI-generated */
  --color-sidebar: var(--surface-container-low); /* AI-generated */

  /* success */
  --saiaksorn-success-50: #eefcf4; /* AI-generated */
  --saiaksorn-success-100: #d6f6e3; /* AI-generated */
  --saiaksorn-success-200: #afeccc; /* AI-generated */
  --saiaksorn-success-300: #79ddb0; /* AI-generated */
  --saiaksorn-success-400: #45c892; /* AI-generated */
  --saiaksorn-success-500: #1ea876; /* AI-generated */ /* @primary */
  --saiaksorn-success-600: #14865d; /* AI-generated */
  --saiaksorn-success-700: #126a4c; /* AI-generated */
  --saiaksorn-success-800: #12553f; /* AI-generated */
  --saiaksorn-success-900: #0f4735; /* AI-generated */
  --success: var(--saiaksorn-success-500); /* AI-generated */
  --color-success: var(--success); /* AI-generated */

  /* warning */
  --saiaksorn-warning-50: #fff8eb; /* AI-generated */
  --saiaksorn-warning-100: #ffedc2; /* AI-generated */
  --saiaksorn-warning-200: #ffdc86; /* AI-generated */
  --saiaksorn-warning-300: #ffc84f; /* AI-generated */
  --saiaksorn-warning-400: #f0ab1f; /* AI-generated */
  --saiaksorn-warning-500: #d48a12; /* AI-generated */ /* @primary */
  --saiaksorn-warning-600: #b06b10; /* AI-generated */
  --saiaksorn-warning-700: #8d5213; /* AI-generated */
  --saiaksorn-warning-800: #734216; /* AI-generated */
  --saiaksorn-warning-900: #613814; /* AI-generated */
  --warning: var(--saiaksorn-warning-500); /* AI-generated */
  --color-warning: var(--warning); /* AI-generated */

  /* error */
  --saiaksorn-error-50: #fff2f1; /* AI-generated */
  --saiaksorn-error-100: #ffe0de; /* AI-generated */
  --saiaksorn-error-200: #ffc4c0; /* AI-generated */
  --saiaksorn-error-300: #ff9d96; /* AI-generated */
  --saiaksorn-error-400: #f36f67; /* AI-generated */
  --saiaksorn-error-500: #d54a42; /* AI-generated */ /* @primary */
  --saiaksorn-error-600: #b3322f; /* AI-generated */
  --saiaksorn-error-700: #932927; /* AI-generated */
  --saiaksorn-error-800: #7a2624; /* AI-generated */
  --saiaksorn-error-900: #672424; /* AI-generated */
  --error: var(--saiaksorn-error-500); /* AI-generated */
  --error-container: var(--saiaksorn-error-50); /* AI-generated */
  --on-error: var(--text-inverse); /* AI-generated */
  --on-error-container: var(--saiaksorn-error-900); /* AI-generated */
  --color-error: var(--error); /* AI-generated */
  --color-error-container: var(--error-container); /* AI-generated */

  /* info */
  --saiaksorn-info-50: #edf9ff; /* AI-generated */
  --saiaksorn-info-100: #d6f0ff; /* AI-generated */
  --saiaksorn-info-200: #b2e4ff; /* AI-generated */
  --saiaksorn-info-300: #7ed4ff; /* AI-generated */
  --saiaksorn-info-400: #46bff8; /* AI-generated */
  --saiaksorn-info-500: #1d9ede; /* AI-generated */ /* @primary */
  --saiaksorn-info-600: #167db5; /* AI-generated */
  --saiaksorn-info-700: #176491; /* AI-generated */
  --saiaksorn-info-800: #185275; /* AI-generated */
  --saiaksorn-info-900: #194562; /* AI-generated */
  --info: var(--saiaksorn-info-500); /* AI-generated */
  --color-info: var(--info); /* AI-generated */

  --font-display: 'Mitr', sans-serif; --font-heading: 'Mitr', sans-serif; --font-body: 'Noto Sans Thai', sans-serif; --font-mono: 'JetBrains Mono', monospace;
  --font-size-display: 56px; --font-size-h1: 42px; --font-size-h2: 34px; --font-size-h3: 28px; --font-size-h4: 22px;
  --font-size-body: 16px; --font-size-lead: 18px; --font-size-caption: 13px; --font-size-mono: 14px;
  --font-weight-display: 700; --font-weight-h1: 700; --font-weight-h2: 600; --font-weight-h3: 600; --font-weight-h4: 500;
  --font-weight-body: 400; --font-weight-lead: 400; --font-weight-caption: 500; --font-weight-mono: 500;
  --line-height-display: 1.1; --line-height-h1: 1.15; --line-height-h2: 1.2; --line-height-h3: 1.3; --line-height-h4: 1.35;
  --line-height-body: 1.7; --line-height-lead: 1.75; --line-height-caption: 1.5; --line-height-mono: 1.6;
  --type-display: var(--font-size-display); --type-h1: var(--font-size-h1); --type-h2: var(--font-size-h2); --type-h3: var(--font-size-h3); --type-h4: var(--font-size-h4);
  --type-body: var(--font-size-body); --type-lead: var(--font-size-lead); --type-caption: var(--font-size-caption); --type-mono: var(--font-size-mono); --font-family-base: var(--font-body);

  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px;
  --size-icon-sm: 16px; --size-icon-md: 20px; --size-icon-lg: 24px; --size-button-height-sm: 40px; --size-input-height: 44px; --size-button-height-md: 48px; --size-button-height-lg: 56px;
  --saiaksorn-radius-sm: 8px; --saiaksorn-radius-md: 12px; --saiaksorn-radius-lg: 18px; --saiaksorn-radius-xl: 24px;
  --radius-sm: var(--saiaksorn-radius-sm); --radius-md: var(--saiaksorn-radius-md); --radius-lg: var(--saiaksorn-radius-lg); --radius-xl: var(--saiaksorn-radius-xl); --radius-full: 9999px;
  --shadow-1: 0 1px 2px 0 rgba(23,34,45,0.08); /* Card */
  --shadow-2: 0 6px 16px -4px rgba(23,34,45,0.12); /* Card Hover */
  --shadow-3: 0 12px 28px -8px rgba(23,34,45,0.16); /* Float */
  --shadow-4: 0 20px 40px -12px rgba(23,34,45,0.20); /* Modal */
  --shadow-5: 0 28px 64px -18px rgba(23,34,45,0.26); /* Overlay */
}

.dark {
  --text-inverse: #17222d; --text-soft: #c3d0dd; --text-body: #edf2f7; --text-strong: #ffffff; /* AI-generated */
  --surface-page: #101923; --surface-base: #14212d; --surface-tint: #1c2a36; --surface-raised: #1a2a38; --surface-strong: #24384a; --surface-inverse: #f9fbfd; /* AI-generated */
  --primary: var(--saiaksorn-primary-300); --primary-container: var(--saiaksorn-primary-900); --ring: var(--saiaksorn-primary-200); /* AI-generated */
  --accent: var(--saiaksorn-accent-200); --accent-hover: var(--saiaksorn-accent-300); /* AI-generated */
  --secondary: var(--saiaksorn-neutral-800); --secondary-foreground: var(--saiaksorn-neutral-100); --border: #334252; --rule: #47586a; /* AI-generated */
  --background: var(--surface-page); --bg: var(--surface-page); --surface: var(--surface-base); --surface-container-low: var(--surface-tint); --surface-container: var(--surface-raised); --surface-container-high: var(--surface-strong); /* AI-generated */
  --foreground: var(--text-body); --fg: var(--text-strong); --muted: var(--text-soft); --muted-foreground: var(--text-soft); /* AI-generated */
  --success: var(--saiaksorn-success-300); --warning: var(--saiaksorn-warning-300); --error: var(--saiaksorn-error-300); --error-container: var(--saiaksorn-error-900); --on-error: #ffffff; --on-error-container: var(--saiaksorn-error-100); --info: var(--saiaksorn-info-300); /* AI-generated */
  --color-primary-container: var(--primary-container); --color-card: var(--surface); --color-sidebar: var(--surface-container-low); /* AI-generated */
}

.saiaksorn-display{font-family:var(--font-display);font-size:3.5rem;font-weight:var(--font-weight-display);line-height:var(--line-height-display);letter-spacing:-0.02em;}
.saiaksorn-h1{font-family:var(--font-heading);font-size:2.625rem;font-weight:var(--font-weight-h1);line-height:var(--line-height-h1);}
.saiaksorn-h2{font-family:var(--font-heading);font-size:2.125rem;font-weight:var(--font-weight-h2);line-height:var(--line-height-h2);}
.saiaksorn-h3{font-family:var(--font-heading);font-size:1.75rem;font-weight:var(--font-weight-h3);line-height:var(--line-height-h3);}
.saiaksorn-h4{font-family:var(--font-heading);font-size:1.375rem;font-weight:var(--font-weight-h4);line-height:var(--line-height-h4);}
.saiaksorn-body{font-family:var(--font-body);font-size:1rem;font-weight:var(--font-weight-body);line-height:var(--line-height-body);}
.saiaksorn-lead{font-family:var(--font-body);font-size:1.125rem;font-weight:var(--font-weight-lead);line-height:var(--line-height-lead);}
.saiaksorn-caption{font-family:var(--font-body);font-size:0.8125rem;font-weight:var(--font-weight-caption);line-height:var(--line-height-caption);}
.saiaksorn-mono{font-family:var(--font-mono);font-size:0.875rem;font-weight:var(--font-weight-mono);line-height:var(--line-height-mono);}