/**
 * SafeLogin design tokens
 *
 * Source of truth for values: docs/design-system.md
 * Visual catalog:             docs/design-preview.html
 *
 * Import this file as the first stylesheet. Do not add colors, type sizes,
 * radii, or shadows that are not defined here. Logo mark:
 * docs/brand/safelogin-icon.svg (colour) and
 * docs/brand/safelogin-icon-inverse.svg (on teal).
 */

:root {
  /* --- Color: ink --- */
  --sl-ink: #15232e;
  --sl-ink-secondary: #4a5d6b;
  --sl-ink-muted: #7b8d9a;
  --sl-ink-inverse: #ffffff;

  /* --- Color: surfaces --- */
  --sl-canvas: #f3f5f4;
  --sl-surface: #ffffff;
  --sl-surface-sunken: #eef1f0;
  --sl-surface-hover: #e8eeed;

  /* --- Color: lines --- */
  --sl-line: #d5dedc;
  --sl-line-strong: #b4c2bf;

  /* --- Color: accent (primary actions, links, focus) --- */
  --sl-accent: #0f6f68;
  --sl-accent-hover: #0c5c56;
  --sl-accent-active: #0a4e49;
  --sl-accent-soft: #e6f3f1;
  --sl-accent-ring: rgba(15, 111, 104, 0.32);

  /* --- Color: status --- */
  --sl-success: #1f7a4d;
  --sl-success-soft: #e7f6ee;
  --sl-warning: #8a5b00;
  --sl-warning-soft: #fbf3dc;
  --sl-danger: #b42318;
  --sl-danger-hover: #912018;
  --sl-danger-soft: #fdecec;
  --sl-info: #0f6f68;
  --sl-info-soft: #e6f3f1;

  /* --- Color: badges --- */
  --sl-badge-accountable-fg: #0c5c56;
  --sl-badge-accountable-bg: #e6f3f1;
  --sl-badge-unverified-fg: #4a5d6b;
  --sl-badge-unverified-bg: #eef1f0;
  --sl-badge-revoked-fg: #b42318;
  --sl-badge-revoked-bg: #fdecec;

  /* --- Typography --- */
  --sl-font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --sl-font-mono: "IBM Plex Mono", "ui-monospace", "SFMono-Regular", "Menlo",
    monospace;

  --sl-text-xs: 12px;
  --sl-text-sm: 13px;
  --sl-text-md: 14px;
  --sl-text-body: 16px;
  --sl-text-lg: 18px;
  --sl-text-xl: 22px;
  --sl-text-2xl: 28px;
  --sl-text-3xl: 36px;

  --sl-leading-tight: 1.25;
  --sl-leading-snug: 1.35;
  --sl-leading-body: 1.5;
  --sl-leading-relaxed: 1.6;

  --sl-weight-regular: 400;
  --sl-weight-medium: 500;
  --sl-weight-semibold: 600;

  --sl-tracking-tight: -0.02em;
  --sl-tracking-normal: 0;
  --sl-tracking-caps: 0.06em;

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

  /* --- Radius --- */
  --sl-radius-sm: 6px;
  --sl-radius-md: 8px;
  --sl-radius-lg: 12px;
  --sl-radius-xl: 16px;
  --sl-radius-full: 999px;

  /* --- Size --- */
  --sl-control-height: 44px;
  --sl-control-height-sm: 36px;
  --sl-icon: 20px;
  --sl-icon-lg: 24px;
  --sl-logo-height: 28px;
  --sl-auth-width: 420px;
  --sl-page-width: 840px;
  --sl-landing-width: 1080px;
  --sl-focus-ring: 2px;
  --sl-focus-offset: 2px;

  /* --- Elevation (hairline + whisper; never heavy) --- */
  --sl-shadow-card: 0 1px 2px rgba(21, 35, 46, 0.05);
  --sl-shadow-modal: 0 8px 24px rgba(21, 35, 46, 0.12);

  /* --- Motion --- */
  --sl-ease: cubic-bezier(0.2, 0, 0, 1);
  --sl-duration-fast: 120ms;
  --sl-duration: 180ms;

  /* --- Z-index --- */
  --sl-z-base: 0;
  --sl-z-sticky: 10;
  --sl-z-overlay: 40;
  --sl-z-modal: 50;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --sl-duration-fast: 0ms;
    --sl-duration: 0ms;
  }
}