/**
 * =============================================================================
 * variables.css — Design tokens (colors, sizes)
 * =============================================================================
 * Loaded FIRST on every page. Defines CSS custom properties on :root.
 *
 * Why variables?
 *   Change --accent-yellow once → whole site updates.
 *   Matches Figma: dark navy background + yellow buttons.
 *
 * Used by: base.css, components.css, pages.css (via var(--name))
 * =============================================================================
 */

:root {
  /* Backgrounds — page vs cards vs inputs (layered dark blues) */
  --bg-main: #0b111e;           /* full page background */
  --bg-card: #141b2d;           /* cards, header, form boxes */
  --bg-card-hover: #1a2230;     /* provider cards (slightly lighter) */
  --bg-input: #1c222d;          /* text fields, dropdowns */

  /* Brand colors from mockups */
  --accent-yellow: #ffcc29;     /* primary buttons, logo, active links */
  --accent-red: #e53935;        /* emergency call, delete account */

  /* Text */
  --text-primary: #ffffff;      /* headings */
  --text-secondary: #9ca3af;    /* descriptions, labels */
  --text-muted: #6b7280;        /* footer, hints */

  --border-color: #2a3548;      /* lines around cards and inputs */
  --success: #22c55e;           /* green “open now” dot */
  --warning: #f97316;           /* maintenance warning on profile */

  /* Shape */
  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;
  --shadow: 0 4px 20px rgba(0, 0, 0, 0.35);

  /* Layout */
  --max-width: 1200px;          /* .container max width */
  --header-height: 64px;        /* sticky top bar */
  --font-main: "Cairo", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  --transition: 0.2s ease;      /* hover effects on links/buttons */
}