/* source: gsm-skeletons@c27f7b4 */
/* gsm-skeletons ui-primitives — design tokens.
 *
 * The contract every component in base.css reads. A project re-points these at
 * its own palette (e.g. --color-primary: var(--brand)) rather than overriding
 * component rules. Default values pass WCAG 2.2 AA on their default surfaces;
 * data/contrast.json + elements/wcag/scripts/contrast-check.mjs measure that
 * (comments below are the measured ratios) — re-run it after
 * re-pointing any colour.
 */
:root {
  /* Surfaces and text (light default) */
  --color-bg: #ffffff;
  --color-surface: #f6f7f8;
  --color-surface-2: #eceef0;
  --color-text: #1a1a1a;          /* 17.4:1 on bg */
  --color-text-muted: #595f66;    /* 6.4:1 on bg, 5.5:1 on surface-2 */
  --color-border: #c9cdd2;        /* decorative dividers */
  --color-field-border: #767c83;  /* 4.2:1 — form-field boundaries need 3:1 (1.4.11) */

  /* Intent */
  --color-primary: #0b5cad;       /* white text 6.7:1 */
  --color-on-primary: #ffffff;
  --color-secondary: #595f66;
  --color-error: #b3261e;
  --color-warning: #8a5a00;
  --color-success: #1b6e3a;
  --color-info: #0b5cad;
  --color-focus: #0b5cad;

  /* Skeleton loader */
  --color-skeleton: #e3e6e9;
  --color-skeleton-shine: #f1f3f5;

  /* Spacing — 4px unit */
  --spacing-unit: 4px;
  --spacing-1: calc(var(--spacing-unit) * 1);
  --spacing-2: calc(var(--spacing-unit) * 2);
  --spacing-3: calc(var(--spacing-unit) * 3);
  --spacing-4: calc(var(--spacing-unit) * 4);
  --spacing-6: calc(var(--spacing-unit) * 6);
  --spacing-8: calc(var(--spacing-unit) * 8);

  /* Type */
  --font-family-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, monospace;
  --font-size-sm: 0.8125rem;
  --font-size-base: 0.9375rem;
  --font-size-lg: 1.125rem;
  --font-weight-normal: 400;
  --font-weight-bold: 650;
  --line-height-base: 1.5;

  /* Shape and depth */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.12);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.18);
  --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.28);

  /* Breakpoints (for reference in JS; media queries can't read vars) */
  --bp-sm: 480px;
  --bp-md: 760px;
  --bp-lg: 1024px;
  --bp-xl: 1440px;

  /* Motion */
  --duration-fast: 120ms;
  --duration-base: 200ms;
}

/* Dark scheme. A dark-committed app sets these in its own :root instead and
 * should not rely on this block. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg: #121416;
    --color-surface: #1a1d20;
    --color-surface-2: #22262a;
    --color-text: #e8e8e8;
    --color-text-muted: #a3a9b0;     /* 6.4:1 on surface-2 */
    --color-border: #33393f;
    --color-field-border: #7d848b;   /* 4.0:1 on surface-2 */
    --color-primary: #2b70b5;        /* white text 5.1:1 */
    --color-error: #f07a6e;
    --color-warning: #e3b84a;
    --color-success: #4cd9a6;
    --color-info: #7fb9ec;
    --color-focus: #7fb9ec;
    --color-skeleton: #2a2f34;
    --color-skeleton-shine: #353b41;
  }
}