/* ══════════════════════════════════════════════════════════════
   Umroh Connect — Design Tokens
   Single source of truth for all colors, spacing, and shared values.
   Loaded in base.html before any component or page CSS.
   ══════════════════════════════════════════════════════════════ */

:root {
  /* ── Primary: Jade Teal ──────────────────────────────────── */
  --primary:        #2C8C84;
  --primary-dark:   #1A5C56;
  --primary-light:  #CCECE8;
  --primary-50:     #E8F5F3;

  /* ── Accent: Soft Gold ───────────────────────────────────── */
  --accent:         #D4B44A;
  --accent-dark:    #B8962E;
  --accent-light:   #FFF8E1;

  /* ── Neutrals (gray-to-white) ────────────────────────────── */
  --neutral-900:    #1E2328;
  --neutral-700:    #3D444D;
  --neutral-600:    #5A6370;
  --neutral-400:    #B4BBC3;
  --neutral-200:    #EAECEF;
  --neutral-100:    #F3F5F6;
  --neutral-50:     #F9FAFB;
  --white:          #FFFFFF;

  /* ── Semantic ────────────────────────────────────────────── */
  --error:          #DC3545;
  --error-dark:     #ba2d3b;
  --error-light:    #F8D7DA;
  --error-text:     #842029;
  --warning:        #FFC107;
  --warning-light:  #FFF3CD;
  --warning-text:   #664d03;
  --info:           #0DCAF0;
  --info-light:     #CFF4FC;
  --info-text:      #055160;
  --success:        #198754;
  --success-light:  #D1E7DD;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-sm:      6px;
  --radius-md:      10px;
  --radius-lg:      16px;

  /* ── Shadows ─────────────────────────────────────────────── */
  --shadow-sm:      0 1px 3px rgba(0, 0, 0, .08);
  --shadow-md:      0 4px 12px rgba(0, 0, 0, .10);
  --shadow-lg:      0 8px 24px rgba(0, 0, 0, .12);

  /* ── Typography ──────────────────────────────────────────── */
  --font-family:    'Segoe UI', system-ui, -apple-system, sans-serif;
  --font-size-base: 16px;
}