/* BygoneSMS design system - foundation tokens
 * Dependency-free. No CDN, no webfont, no network access.
 * Provenance: neutral shell scale, radius and elevation language adapted from the
 * GuguPass management console (frontend/src/app/globals.css, management/layout.tsx)
 * at source HEAD a2e6a223aee86c61d19e46b6be8042228be8a9de. Accent and branding are
 * BygoneSMS specific and intentionally differ from the GuguPass red brand.
 */

:root {
  /* ---------- Neutral palette (shell, canvas, text) ---------- */
  --ds-n-0: #ffffff;
  --ds-n-50: #f9fafb;
  --ds-n-100: #f3f4f6;
  --ds-n-200: #e5e7eb;
  --ds-n-300: #d1d5db;
  --ds-n-400: #9ca3af;
  --ds-n-500: #6b7280;
  --ds-n-600: #4b5563;
  --ds-n-700: #374151;
  --ds-n-800: #1f2937;
  --ds-n-900: #111827;
  --ds-n-950: #030712;

  /* ---------- Measured accent (single action colour) ---------- */
  --ds-a-50: #eef4fb;
  --ds-a-100: #dbe7f6;
  --ds-a-200: #bcd2ec;
  --ds-a-300: #8fb3dd;
  --ds-a-400: #5d8dc8;
  --ds-a-500: #3a6db1;
  --ds-a-600: #2b5691;
  --ds-a-700: #224676;
  --ds-a-800: #1c395e;
  --ds-a-900: #162c48;

  /* ---------- Status ramps (always paired with a text label) ---------- */
  --ds-ok-bg: #f0fdf4;
  --ds-ok-line: #bbf7d0;
  --ds-ok-fg: #15803d;
  --ds-warn-bg: #fffbeb;
  --ds-warn-line: #fde68a;
  --ds-warn-fg: #b45309;
  --ds-danger-bg: #fef2f2;
  --ds-danger-line: #fecaca;
  --ds-danger-fg: #b91c1c;
  --ds-info-bg: #eff6ff;
  --ds-info-line: #bfdbfe;
  --ds-info-fg: #1d4ed8;
  --ds-muted-bg: var(--ds-n-100);
  --ds-muted-line: var(--ds-n-200);
  --ds-muted-fg: var(--ds-n-500);

  /* ---------- Semantic roles ---------- */
  --ds-canvas: var(--ds-n-50);
  --ds-surface: var(--ds-n-0);
  --ds-surface-sunken: var(--ds-n-50);
  --ds-border: var(--ds-n-200);
  --ds-border-strong: var(--ds-n-300);
  --ds-text: var(--ds-n-900);
  --ds-text-soft: var(--ds-n-600);
  --ds-text-muted: var(--ds-n-500);
  --ds-text-faint: var(--ds-n-400);
  --ds-inverse: var(--ds-n-0);
  --ds-shell-bg: var(--ds-n-950);
  --ds-shell-line: var(--ds-n-800);
  --ds-shell-text: var(--ds-n-400);
  --ds-shell-text-strong: var(--ds-n-0);
  --ds-shell-active: var(--ds-n-800);

  /* ---------- Typography ---------- */
  --ds-font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif;
  --ds-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "DejaVu Sans Mono",
    "Liberation Mono", monospace;

  --ds-text-2xs: 0.6875rem; /* 11px - table meta, chips */
  --ds-text-xs: 0.75rem;    /* 12px - captions, helper text */
  --ds-text-sm: 0.8125rem;  /* 13px - dense table cells */
  --ds-text-base: 0.875rem; /* 14px - default UI text */
  --ds-text-md: 1rem;       /* 16px - form controls, body copy */
  --ds-text-lg: 1.125rem;   /* 18px - section titles */
  --ds-text-xl: 1.25rem;    /* 20px - card figures */
  --ds-text-2xl: 1.5rem;    /* 24px - page titles */
  --ds-text-3xl: 1.875rem;  /* 30px - hero / OTP code */

  --ds-leading-tight: 1.25;
  --ds-leading-normal: 1.5;
  --ds-leading-relaxed: 1.7;
  --ds-weight-regular: 400;
  --ds-weight-medium: 500;
  --ds-weight-semibold: 600;
  --ds-weight-bold: 700;
  --ds-tracking-wide: 0.06em;

  /* ---------- Spacing (4px base) ---------- */
  --ds-space-0: 0;
  --ds-space-1: 0.125rem;
  --ds-space-2: 0.25rem;
  --ds-space-3: 0.375rem;
  --ds-space-4: 0.5rem;
  --ds-space-5: 0.75rem;
  --ds-space-6: 1rem;
  --ds-space-7: 1.25rem;
  --ds-space-8: 1.5rem;
  --ds-space-9: 2rem;
  --ds-space-10: 2.5rem;
  --ds-space-11: 3rem;

  /* ---------- Radius ---------- */
  --ds-radius-xs: 4px;
  --ds-radius-sm: 6px;
  --ds-radius-md: 8px;
  --ds-radius-lg: 10px;
  --ds-radius-xl: 12px;
  --ds-radius-2xl: 16px;
  --ds-radius-full: 999px;

  /* ---------- Elevation (ring + shadow, as in the source console) ---------- */
  --ds-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --ds-shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06), 0 1px 3px rgba(15, 23, 42, 0.04);
  --ds-shadow-md: 0 4px 10px rgba(15, 23, 42, 0.08);
  --ds-shadow-lg: 0 12px 28px rgba(15, 23, 42, 0.14);
  --ds-ring-card: inset 0 0 0 1px var(--ds-n-100);

  /* ---------- Layout metrics ---------- */
  --ds-header-h: 56px;
  --ds-sidebar-w: 224px;
  --ds-sidebar-collapsed-w: 64px;
  --ds-content-max: 1280px;
  --ds-reading-max: 68ch;

  /* ---------- Motion ---------- */
  --ds-dur-fast: 120ms;
  --ds-dur: 200ms;
  --ds-dur-slow: 300ms;
  --ds-ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* ---------- Focus ---------- */
  --ds-focus-ring: 2px solid var(--ds-a-600);
  --ds-focus-offset: 2px;
}

/* Breakpoints are documentation-only tokens; media queries use the same values.
 * sm 640px  md 768px  lg 1024px  xl 1280px
 * md is the shell breakpoint: below it the sidebar becomes a drawer.
 */

@media (prefers-reduced-motion: reduce) {
  :root {
    --ds-dur-fast: 1ms;
    --ds-dur: 1ms;
    --ds-dur-slow: 1ms;
  }
}