/* GENERATED from design/tokens.css by scripts/sync-design.mjs. Do not edit this copy: change design/tokens.css and run npm run design:sync. */
/* The sign-in look, the same as the Client (Option D): Inter for text and JetBrains Mono for labels and numbers,
   tinted neutrals, one electric-blue accent, flat controls. Light is the base; [data-theme="dark"] remaps the same tokens
   (the sign-in follows the device unless a mode was chosen). */

/* ============ Tokens ============ */
:root {
  --background: oklch(97% 0.006 265);
  --foreground: oklch(22% 0.031 267);
  --muted: oklch(95.1% 0.009 258);
  --muted-foreground: oklch(49.7% 0.039 261);
  --card: oklch(99.4% 0.002 248);
  --border: oklch(91.4% 0.014 258);
  --border-strong: oklch(65.8% 0.038 256);       /* inputs: needs 3:1 against the card */

  --accent: oklch(52.8% 0.263 262.9);
  --accent-foreground: oklch(100% 0 0);
  --accent-ink: oklch(52.8% 0.263 262.9);         /* accent used as text */
  --accent-tint: oklch(52.8% 0.263 262.9 / 0.06);
  --accent-line: oklch(52.8% 0.263 262.9 / 0.3);
  --ring: oklch(52.8% 0.263 262.9);

  --gradient: oklch(52.8% 0.263 262.9);           /* flat: the name stays for .gradient-text */

  --inverse-bg: oklch(20.8% 0.04 266);
  --inverse-fg: oklch(98.4% 0.003 248);
  --inverse-muted: oklch(75.7% 0.032 261);
  --inverse-line: oklch(100% 0 0 / 0.14);
  --inverse-fill: oklch(100% 0 0 / 0.06);
  --inverse-fill-strong: oklch(100% 0 0 / 0.16);
  --accent-on-dark: oklch(78.9% 0.106 268);
  --danger-on-dark: oklch(71.1% 0.166 22.2);

  /* status: the same values as Symphony Office (apps/symphony-office/src/app/[lang]/styles/01-base.css); one meaning each */
  --good: oklch(50% 0.13 150);
  --good-bg: oklch(96.5% 0.03 152);
  --warn: oklch(52% 0.11 70);
  --warn-bg: oklch(96% 0.04 88);
  --bad: oklch(50% 0.19 27);
  --bad-bg: oklch(96.5% 0.018 20);
  --bad-solid: oklch(50% 0.19 27);                /* filled red, the same in both modes, under --on-bad */
  --on-bad: oklch(99% 0.003 265);
  /* the old names, kept for one release */
  --success: var(--good);
  --success-bg: var(--good-bg);
  --danger: var(--bad);

  --shadow-sm: 0 1px 3px oklch(20% 0.03 265 / 0.06);
  --shadow-md: 0 4px 6px oklch(20% 0.03 265 / 0.07);
  --shadow-lg: 0 10px 15px oklch(20% 0.03 265 / 0.08);
  --shadow-accent: 0 1px 2px oklch(52.8% 0.263 262.9 / 0.3);
  --shadow-accent-lg: 0 2px 6px oklch(52.8% 0.263 262.9 / 0.3);

  --bar-bg: oklch(99.4% 0.002 248 / 0.88);
  --scroll-thumb: oklch(62.4% 0.202 266);
  --scroll-track: oklch(95.1% 0.009 258);
  color-scheme: light;

  --font-display: "Inter", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif; /* the display face is retired: headings are Inter */
  --font-ui: "Inter", "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* spacing scale: every padding, margin and gap comes from this set */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  /* stacking order of page layers */
  --z-sticky: 10;
  --z-bar: 20;
  --radius: 10px;
  --radius-lg: 12px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  /* Keeps bars full-bleed but content in a readable column on wide screens */
  --gutter: max(16px, calc((100% - 720px) / 2));

  --gate-scrim: oklch(97% 0.006 265 / 0.4);
  --gate-panel: oklch(100% 0 0 / 0.66);
  --gate-glow-a: oklch(52.8% 0.263 262.9 / 0.22);
  --gate-glow-b: oklch(52.8% 0.263 262.9 / 0.14);
}

/* [data-force-dark]: the sign-in pages' dark brand side, the website's navy band, on an otherwise light page (owner, 2026-10-29) */
:root[data-theme="dark"], [data-force-dark] {
  --background: oklch(19.6% 0.017 269);
  --foreground: oklch(95.7% 0.007 261);
  --muted: oklch(25.7% 0.02 268);
  --muted-foreground: oklch(74% 0.029 265);
  --card: oklch(23.1% 0.02 268);
  --border: oklch(30.9% 0.023 264);
  --border-strong: oklch(56.1% 0.033 264);

  --accent-ink: oklch(72.6% 0.141 267);
  --accent-tint: oklch(62.4% 0.202 266 / 0.12);
  --accent-line: oklch(72.6% 0.141 267 / 0.4);
  --ring: oklch(72.6% 0.141 267);

  --inverse-bg: oklch(14.1% 0.026 265);
  --inverse-fg: oklch(98.4% 0.003 248);

  --good: oklch(78% 0.15 152);
  --good-bg: oklch(27% 0.04 155);
  --warn: oklch(82% 0.13 82);
  --warn-bg: oklch(28% 0.04 85);
  --bad: oklch(72% 0.15 22);
  --bad-bg: oklch(27% 0.05 20);

  --shadow-sm: 0 1px 3px oklch(12% 0.02 265 / 0.4);
  --shadow-md: 0 4px 6px oklch(12% 0.02 265 / 0.35);
  --shadow-lg: 0 10px 15px oklch(12% 0.02 265 / 0.4);

  --bar-bg: oklch(23.1% 0.02 268 / 0.9);
  --scroll-thumb: oklch(51.6% 0.163 266);
  --scroll-track: oklch(19.6% 0.017 269);
  color-scheme: dark;
  --gate-scrim: oklch(14.1% 0.026 265 / 0.45);
  --gate-panel: oklch(22% 0.037 265 / 0.62);
  --gate-glow-a: oklch(52.8% 0.263 262.9 / 0.5);
  --gate-glow-b: oklch(52.8% 0.263 262.9 / 0.32);
}