/*
 * ReadyServer design tokens — version 1.0.0
 *
 * Source of truth for readyserver.ai AND the ReadyServer community forum (which vendors a copy).
 * Change deliberately: bump the version above and call out the change in the PR.
 * Brand colours follow readyserver.sg.
 */

:root {
  /* Palette */
  --rs-blue-50: #eff6ff;
  --rs-blue-100: #dbeafe;
  --rs-blue-300: #93c5fd;
  --rs-blue-400: #60a5fa;
  --rs-blue-500: #3b82f6;
  --rs-blue-600: #2563eb;
  --rs-blue-700: #1d4ed8;
  --rs-blue-900: #1e3a8a;
  --rs-green-400: #4ade80;
  --rs-green-500: #22c55e;
  --rs-green-700: #15803d;
  --rs-amber-100: #fef3c7;
  --rs-amber-300: #fcd34d;
  --rs-amber-500: #f59e0b;
  --rs-amber-600: #d97706;
  --rs-slate-50: #f8fafc;
  --rs-slate-100: #f1f5f9;
  --rs-slate-200: #e2e8f0;
  --rs-slate-300: #cbd5e1;
  --rs-slate-400: #94a3b8;
  --rs-slate-500: #64748b;
  --rs-slate-600: #475569;
  --rs-slate-700: #334155;
  --rs-slate-800: #1e293b;
  --rs-slate-900: #0f172a;
  --rs-ink-900: #111a2e;
  --rs-ink-950: #0b1220;
  --rs-ink-975: #070c17;
  --rs-white: #ffffff;

  /* Typography */
  --font-sans: "Inter", ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);
  --text-4xl: clamp(2.25rem, 1.6rem + 3vw, 3.5rem);
  --leading-tight: 1.15;
  --leading-snug: 1.35;
  --leading-normal: 1.65;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Space, shape, layout */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --radius-full: 999px;
  --container-width: 74rem;
  --prose-width: 46rem;
  --header-height: 4rem;

  /* Semantic colours: light theme */
  --color-bg: var(--rs-white);
  --color-bg-subtle: var(--rs-slate-50);
  --color-bg-muted: var(--rs-slate-100);
  --color-surface: var(--rs-white);
  --color-border: var(--rs-slate-200);
  --color-border-strong: var(--rs-slate-300);
  --color-grid-line: rgb(15 23 42 / 0.06);
  --color-text: var(--rs-slate-800);
  --color-text-muted: var(--rs-slate-600);
  --color-heading: var(--rs-ink-950);
  --color-link: var(--rs-blue-600);
  --color-link-hover: var(--rs-blue-700);
  --color-primary: var(--rs-blue-600);
  --color-primary-hover: var(--rs-blue-700);
  --color-on-primary: var(--rs-white);
  --color-accent-soft: var(--rs-blue-50);
  --color-accent-text: var(--rs-blue-700);
  --color-highlight-start: var(--rs-blue-700);
  --color-highlight-end: var(--rs-blue-500);
  --color-focus: var(--rs-blue-500);
  --color-logo-tile: var(--rs-white);
  --color-inline-code-bg: var(--rs-slate-100);
  --color-code-bg: var(--rs-ink-950);
  --color-code-border: var(--rs-slate-800);
  --color-code-text: var(--rs-slate-200);
  --color-code-muted: var(--rs-slate-400);
  --color-code-prompt: var(--rs-green-500);
  --color-code-accent: var(--rs-blue-400);
  --color-online: var(--rs-green-500);
  --color-online-ring: rgb(34 197 94 / 0.2);
  --color-success-bg: rgb(34 197 94 / 0.12);
  --color-success-text: var(--rs-green-700);
  --color-note-bg: var(--rs-blue-50);
  --color-note-border: var(--rs-blue-600);
  --color-warn-bg: var(--rs-amber-100);
  --color-warn-border: var(--rs-amber-600);
  --color-cta-start: var(--rs-blue-900);
  --color-cta-end: var(--rs-blue-600);
  --color-cta-text: var(--rs-white);
  --color-cta-muted: rgb(255 255 255 / 0.85);
  --color-cta-outline: rgb(255 255 255 / 0.5);
  --color-cta-hover: rgb(255 255 255 / 0.12);
  --shadow-sm: 0 1px 2px rgb(15 23 42 / 0.06);
  --shadow-md: 0 4px 16px rgb(15 23 42 / 0.08);
  --shadow-lg: 0 18px 48px rgb(15 23 42 / 0.16);
  --hero-glow: rgb(37 99 235 / 0.16);

  color-scheme: light;
}

/* Dark theme: follows the OS unless the visitor picked light; the toggle sets data-theme. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: var(--rs-ink-950);
    --color-bg-subtle: #0e1628;
    --color-bg-muted: var(--rs-slate-800);
    --color-surface: var(--rs-ink-900);
    --color-border: var(--rs-slate-800);
    --color-border-strong: var(--rs-slate-700);
    --color-grid-line: rgb(148 163 184 / 0.07);
    --color-text: var(--rs-slate-300);
    --color-text-muted: var(--rs-slate-400);
    --color-heading: var(--rs-slate-50);
    --color-link: var(--rs-blue-400);
    --color-link-hover: var(--rs-blue-300);
    --color-primary-hover: var(--rs-blue-700);
    --color-accent-soft: rgb(59 130 246 / 0.14);
    --color-accent-text: var(--rs-blue-300);
    --color-highlight-start: var(--rs-blue-400);
    --color-highlight-end: var(--rs-blue-300);
    --color-inline-code-bg: var(--rs-slate-800);
    --color-code-bg: var(--rs-ink-975);
    --color-code-border: var(--rs-slate-800);
    --color-success-text: var(--rs-green-400);
    --color-note-bg: rgb(59 130 246 / 0.1);
    --color-note-border: var(--rs-blue-400);
    --color-warn-bg: rgb(245 158 11 / 0.1);
    --color-warn-border: var(--rs-amber-500);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-md: 0 4px 16px rgb(0 0 0 / 0.35);
    --shadow-lg: 0 18px 48px rgb(0 0 0 / 0.55);
    --hero-glow: rgb(59 130 246 / 0.22);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --color-bg: var(--rs-ink-950);
  --color-bg-subtle: #0e1628;
  --color-bg-muted: var(--rs-slate-800);
  --color-surface: var(--rs-ink-900);
  --color-border: var(--rs-slate-800);
  --color-border-strong: var(--rs-slate-700);
  --color-grid-line: rgb(148 163 184 / 0.07);
  --color-text: var(--rs-slate-300);
  --color-text-muted: var(--rs-slate-400);
  --color-heading: var(--rs-slate-50);
  --color-link: var(--rs-blue-400);
  --color-link-hover: var(--rs-blue-300);
  --color-primary-hover: var(--rs-blue-700);
  --color-accent-soft: rgb(59 130 246 / 0.14);
  --color-accent-text: var(--rs-blue-300);
  --color-highlight-start: var(--rs-blue-400);
  --color-highlight-end: var(--rs-blue-300);
  --color-inline-code-bg: var(--rs-slate-800);
  --color-code-bg: var(--rs-ink-975);
  --color-code-border: var(--rs-slate-800);
  --color-success-text: var(--rs-green-400);
  --color-note-bg: rgb(59 130 246 / 0.1);
  --color-note-border: var(--rs-blue-400);
  --color-warn-bg: rgb(245 158 11 / 0.1);
  --color-warn-border: var(--rs-amber-500);
  --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.4);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 0.35);
  --shadow-lg: 0 18px 48px rgb(0 0 0 / 0.55);
  --hero-glow: rgb(59 130 246 / 0.22);

  color-scheme: dark;
}