/*
 * Design tokens for the web display frontend (PRO-61).
 *
 * Mirror of the app's BapColorTokens (technical/designsystem/.../BapColorTokens.kt)
 * for the values that exist on both sides ("Sage & Ocean" palette). A few
 * web-only tokens are kept where the app currently has no direct equivalent
 * (text-muted, text-disabled, success). When the app's palette grows, mirror
 * here first.
 *
 * Spacing, typography and radii follow simple uniform scales and aren't
 * present yet in the app's tokens; new tokens land here first and get
 * mirrored to BapTheme as needed when we touch the relevant Compose code.
 *
 * Order of CSS imports: load this file before any other stylesheet.
 */

:root {
  /* ── Brand & semantic colours ─────────────────────────────── */

  /** Primary: deep ocean (BapColorTokens.Primary). */
  --color-primary: #1A5080;
  /** Primary pressed/hover: hand-tuned darker shade, web-only for now. */
  --color-primary-hover: #15416a;
  /** Foreground on primary surfaces (BapColorTokens.OnPrimary). */
  --color-on-primary: #FFFFFF;

  /** Page background: very light sage (BapColorTokens.BackgroundPage). */
  --color-bg-page: #E6ECE6;
  /** Toolbar / header background (BapColorTokens.SurfaceToolbar). */
  --color-surface-toolbar: #DCE2DC;
  /** List card background (BapColorTokens.SurfaceCard). */
  --color-surface-card: #D0E4F2;
  /** Selected card / chip (BapColorTokens.SurfaceCardSelected). */
  --color-surface-card-selected: #B4D2EA;
  /** Web-only: tinted blue surface (contact-link bg, very pale). */
  --color-surface-tinted: #e8eff5;
  /** Web-only: tinted blue surface, hover state. */
  --color-surface-tinted-hover: #d4e2ef;
  /** Web-only: muted neutral surface (overflow / inactive panels). */
  --color-surface-muted: #f0f2f0;

  /** Primary text (BapColorTokens.OnBackground). */
  --color-text-primary: #182830;
  /** Secondary text (BapColorTokens.OnBackgroundMuted). */
  --color-text-secondary: #405860;
  /** Web-only: hint / tertiary text (lighter than secondary). */
  --color-text-muted: #789098;
  /** Web-only: disabled text. */
  --color-text-disabled: #8C9A9E;

  /** Subtle 1-px border between surfaces (BapColorTokens.BorderSubtle). */
  --color-border-subtle: #CCD4CE;
  /** Web-only: even more subtle horizontal divider. */
  --color-border-divider: #E8ECE8;

  /** Semantic: error (BapColorTokens.Error). */
  --color-error: #C0392B;
  /** Web-only: success (no app equivalent yet — the connected dot, etc.). */
  --color-success: #2E7D52;

  /* ── Spacing scale ────────────────────────────────────────── */

  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 24px;
  --space-2xl: 32px;
  --space-3xl: 48px;

  /* ── Typography ───────────────────────────────────────────── */

  --font-family-system: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --font-size-display: 1.4rem;
  --font-size-title: 1.1rem;
  --font-size-body: 1rem;
  --font-size-body-sm: 0.95rem;
  --font-size-label: 0.85rem;
  --font-size-caption: 0.78rem;

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.2;
  --line-height-normal: 1.4;
  --line-height-relaxed: 1.5;

  /* ── Radii ────────────────────────────────────────────────── */

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* ── Elevation (shadows) ──────────────────────────────────── */

  --shadow-sm: 0 1px 2px rgba(24, 40, 48, 0.08);
  --shadow-md: 0 4px 12px rgba(24, 40, 48, 0.10);
  --shadow-lg: 0 8px 24px rgba(24, 40, 48, 0.15);
}