/*
 * CodeShare design tokens — source of truth for colors, type, spacing, radius.
 * Extracted from docs/design (the approved UI canvas). Use var(--token) everywhere;
 * never hardcode a hex value in component CSS.
 *
 * Contrast: every text/background pair below passes WCAG AA 4.5:1 unless noted.
 */
:root {
  /* Surfaces */
  --cs-bg: #F6F7F9;            /* page ground */
  --cs-surface: #FFFFFF;       /* cards, header, dialogs */
  --cs-surface-subtle: #FAFBFC;/* table heads, inset panels */
  --cs-surface-muted: #F0F2F5; /* chips, incoming chat bubbles */
  --cs-border: #E3E6EB;        /* card and divider lines */
  --cs-border-strong: #D5DAE1; /* inputs, secondary buttons */
  --cs-border-faint: #F0F2F5;  /* table row separators */

  /* Text */
  --cs-text: #0E1116;          /* primary text, dark button fill */
  --cs-text-2: #3B4350;        /* secondary text */
  --cs-text-3: #4A5260;        /* body copy on cards */
  --cs-text-muted: #5B6472;    /* captions, helper text (5.9:1 on white) */
  --cs-text-on-dark: #FFFFFF;

  /* Brand / accent */
  --cs-accent: #1F4FD8;        /* primary actions, links, focus */
  --cs-accent-hover: #163BA8;
  --cs-accent-soft: #E8EEFC;   /* focus ring, accent chips */
  --cs-accent-row: #F3F6FE;    /* highlighted table row */

  /* Status */
  --cs-success: #1C7C4A;       /* status dots, icons */
  --cs-success-text: #155E38;  /* text on --cs-success-soft */
  --cs-success-soft: #EEF7F1;
  --cs-warning: #A15C00;       /* warning text */
  --cs-warning-dot: #E0A100;   /* dot only, never text */
  --cs-danger: #C2341B;        /* danger borders */
  --cs-danger-text: #A82B14;
  --cs-danger-strong: #B42318; /* "sharing screen" bar, end-session button */

  /* Dark surfaces (admin sidebar, code blocks, video stage) */
  --cs-dark: #0E1116;
  --cs-dark-2: #232A35;
  --cs-dark-text: #C9CED6;
  --cs-code-text: #E6E8EC;

  /* Typography */
  --cs-font-sans: "IBM Plex Sans Thai", system-ui, "PingFang SC", "Noto Sans SC", sans-serif;
  --cs-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --cs-text-xs: 12px;
  --cs-text-sm: 13px;
  --cs-text-base: 15px;
  --cs-text-md: 16px;
  --cs-text-lg: 18px;
  --cs-text-xl: 22px;
  --cs-text-2xl: 28px;
  --cs-text-3xl: 32px;
  --cs-text-display: 44px;
  --cs-code-display: 44px;     /* room code on "room ready" */
  --cs-code-hero: 64px;        /* support code shown to customer */
  --cs-leading: 1.6;           /* >= 1.6 so Thai vowels/tone marks are never clipped */

  /* Spacing (4px base) */
  --cs-space-1: 4px;
  --cs-space-2: 8px;
  --cs-space-3: 12px;
  --cs-space-4: 16px;
  --cs-space-5: 20px;
  --cs-space-6: 24px;
  --cs-space-7: 28px;
  --cs-space-8: 32px;
  --cs-space-10: 40px;
  --cs-space-14: 56px;
  --cs-space-18: 72px;

  /* Radius */
  --cs-radius-sm: 6px;
  --cs-radius: 8px;            /* buttons, inputs (small) */
  --cs-radius-md: 10px;        /* primary buttons, inputs, inset panels */
  --cs-radius-lg: 12px;        /* cards (admin) */
  --cs-radius-xl: 14px;        /* cards (public) */
  --cs-radius-2xl: 16px;       /* dialogs */
  --cs-radius-pill: 999px;

  /* Sizing */
  --cs-control-sm: 32px;
  --cs-control: 40px;
  --cs-control-md: 44px;       /* minimum touch target */
  --cs-control-lg: 48px;
  --cs-container: 1200px;
  --cs-container-narrow: 960px;

  /* Elevation */
  --cs-shadow-card: 0 1px 2px rgba(14,17,22,.04), 0 8px 24px rgba(14,17,22,.06);
  --cs-shadow-dialog: 0 24px 64px rgba(14,17,22,.25);
  --cs-scrim: rgba(14,17,22,.45);
}

/* Dark theme: follow the OS unless the user picked a theme explicitly. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cs-bg: #0B0D11;
    --cs-surface: #14181F;
    --cs-surface-subtle: #181D25;
    --cs-surface-muted: #1E242D;
    --cs-border: #262D38;
    --cs-border-strong: #333C49;
    --cs-border-faint: #1E242D;
    --cs-text: #EEF0F3;
    --cs-text-2: #C9CED6;
    --cs-text-3: #B4BBC6;
    --cs-text-muted: #9AA3B0;
    --cs-accent: #6E8EFF;
    --cs-accent-hover: #8FA8FF;
    --cs-accent-soft: #1B2547;
    --cs-accent-row: #161E38;
    --cs-success-text: #6FD39C;
    --cs-success-soft: #12261B;
    --cs-warning: #F0B44C;
    --cs-danger-text: #FF8A75;
  }
}
:root[data-theme="dark"] {
  --cs-bg: #0B0D11;
  --cs-surface: #14181F;
  --cs-surface-subtle: #181D25;
  --cs-surface-muted: #1E242D;
  --cs-border: #262D38;
  --cs-border-strong: #333C49;
  --cs-border-faint: #1E242D;
  --cs-text: #EEF0F3;
  --cs-text-2: #C9CED6;
  --cs-text-3: #B4BBC6;
  --cs-text-muted: #9AA3B0;
  --cs-accent: #6E8EFF;
  --cs-accent-hover: #8FA8FF;
  --cs-accent-soft: #1B2547;
  --cs-accent-row: #161E38;
  --cs-success-text: #6FD39C;
  --cs-success-soft: #12261B;
  --cs-warning: #F0B44C;
  --cs-danger-text: #FF8A75;
}

html { background: var(--cs-bg); color: var(--cs-text); }
body {
  margin: 0;
  background: var(--cs-bg);
  color: var(--cs-text);
  font-family: var(--cs-font-sans);
  font-size: var(--cs-text-base);
  line-height: var(--cs-leading);
  overflow-wrap: anywhere;
}
:lang(th) { word-break: normal; }
a { color: var(--cs-accent); }
a:hover { color: var(--cs-accent-hover); }
:focus-visible { outline: 2px solid var(--cs-accent); outline-offset: 2px; }
code, pre, kbd, .cs-mono { font-family: var(--cs-font-mono); }