/* Agents bucket theme: the ONE place colors, type, spacing, radii and shadows live.
   style.css only uses var(--...). Change a value here and every page follows.
   Layer 1: primitives (raw values). Layer 2: semantic (what the UI asks for);
   dark mode is the same semantic names under [data-theme="dark"]; theme.js sets that
   attribute (from the user's choice, or the device setting when the choice is "auto"). */

/* IBM Plex Sans Thai + IBM Plex Mono, self-hosted (CSP allows 'self' only). SIL OFL 1.1, see fonts/OFL.txt */
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/plex-sans-thai-thai-400.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/plex-sans-thai-latin-400.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/plex-sans-thai-thai-500.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/plex-sans-thai-latin-500.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/plex-sans-thai-thai-600.woff2") format("woff2"); unicode-range: U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC; }
@font-face { font-family: "IBM Plex Sans Thai"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/plex-sans-thai-latin-600.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/plex-mono-latin-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/plex-mono-latin-500.woff2") format("woff2"); }

:root {
  /* primitives - neutrals (warm stone, the app's existing #f4f4f1 / #1d1d1b family) */
  --stone-0: #ffffff;
  --stone-50: #fafaf8;
  --stone-100: #f4f4f1;
  --stone-150: #ececea;
  --stone-200: #e3e3df;
  --stone-300: #cfcfc9;
  --stone-500: #75756f;
  --stone-600: #555552;
  --stone-800: #2b2b28;
  --stone-850: #222220;
  --stone-900: #1b1b19;
  --stone-950: #141413;
  --ink: #1d1d1b;
  --paper: #edede8;
  /* primitives - hues */
  --teal-50: #effcf9;
  --teal-200: #99e2d6;
  --teal-300: #5eead4;
  --teal-400: #2dd4bf;
  --teal-700: #0f766e;
  --teal-800: #115e59;
  --green-50: #f0fdf4;
  --green-200: #bbf7d0;
  --green-700: #166534;
  --red-50: #fef2f2;
  --red-200: #fecaca;
  --red-700: #b91c1c;
  --amber-50: #fffbeb;
  --amber-200: #fde68a;
  --amber-500: #f59e0b;
  --amber-800: #92400e;

  /* type */
  --font-sans: "IBM Plex Sans Thai", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 0.8125rem;   /* 13 - badges, captions */
  --text-sm: 0.875rem;    /* 14 - meta, hints, small buttons */
  --text-md: 1rem;        /* 16 - body, inputs */
  --text-lg: 1.125rem;    /* 18 - card titles */
  --text-xl: 1.5rem;      /* 24 - page title (mobile) */
  --text-2xl: 1.875rem;   /* 30 - page title (desktop) */
  --leading: 1.6;
  --leading-tight: 1.25;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;

  /* space (4-step) */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;

  /* shape + size */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --radius-full: 999px;
  --control-h: 44px;
  --control-h-sm: 36px;
  --content-w: 1120px;
  --content-w-narrow: 440px;
  --content-w-mid: 800px;
  --topbar-h: 64px;
  --tabbar-h: 64px;

  /* motion */
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 160ms;
}

/* semantic: light (default) */
:root {
  color-scheme: light;
  --bg: var(--stone-100);
  --surface: var(--stone-0);
  --surface-2: var(--stone-50);
  --surface-sunken: var(--stone-150);
  --border: var(--stone-200);
  --border-strong: var(--stone-300);
  --text: var(--ink);
  --text-muted: var(--stone-600);
  --text-faint: var(--stone-500);
  --accent: var(--teal-700);
  --accent-hover: var(--teal-800);
  --accent-soft: var(--teal-50);
  --accent-border: var(--teal-200);
  --on-accent: var(--stone-0);
  --focus-ring: 0 0 0 3px rgba(15, 118, 110, .25);
  --ok-fg: var(--green-700);   --ok-bg: var(--green-50);   --ok-border: var(--green-200);
  --bad-fg: var(--red-700);    --bad-bg: var(--red-50);    --bad-border: var(--red-200);
  --warn-fg: var(--amber-800); --warn-bg: var(--amber-50); --warn-border: var(--amber-200);
  --secret-border: var(--amber-500);
  --shadow-sm: 0 1px 2px rgba(29, 29, 27, .06);
  --shadow-md: 0 1px 2px rgba(29, 29, 27, .05), 0 8px 24px -8px rgba(29, 29, 27, .10);
}

/* semantic: dark */
[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--stone-950);
  --surface: var(--stone-900);
  --surface-2: var(--stone-850);
  --surface-sunken: var(--stone-800);
  --border: var(--stone-800);
  --border-strong: #3a3a36;
  --text: var(--paper);
  --text-muted: #a3a39c;
  --text-faint: #85857e;
  --accent: var(--teal-400);
  --accent-hover: var(--teal-300);
  --accent-soft: rgba(45, 212, 191, .12);
  --accent-border: rgba(45, 212, 191, .35);
  --on-accent: var(--stone-950);
  --focus-ring: 0 0 0 3px rgba(45, 212, 191, .35);
  --ok-fg: #86efac;   --ok-bg: rgba(34, 197, 94, .10);  --ok-border: rgba(34, 197, 94, .30);
  --bad-fg: #fca5a5;  --bad-bg: rgba(239, 68, 68, .10); --bad-border: rgba(239, 68, 68, .30);
  --warn-fg: #fcd34d; --warn-bg: rgba(245, 158, 11, .10); --warn-border: rgba(245, 158, 11, .30);
  --secret-border: var(--amber-500);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow-md: 0 1px 2px rgba(0, 0, 0, .4), 0 8px 24px -8px rgba(0, 0, 0, .6);
}