/* ─────────────────────────────────────────────────────────────────────────────
   Design Tokens — single source of truth for every visual property.
   Import this file first in every CSS file that needs these values.
───────────────────────────────────────────────────────────────────────────── */

:root {
  /* ── Aasaanjobs Brand ──────────────────────────────────────────────────
     Source: /static_aasaanjobs_website — primary blue + orange accent
  ─────────────────────────────────────────────────────────────────────── */

  /* Primary — deep brand blue */
  --color-primary:        #1e40af;
  --color-primary-mid:    #3b82f6;
  --color-primary-light:  #dbeafe;
  --color-primary-dark:   #1e3a8a;
  --color-primary-rgb:    30, 64, 175;

  /* Accent — vibrant orange (CTAs, highlights) */
  --color-accent:         #ea580c;
  --color-accent-light:   #fff7ed;
  --color-accent-dark:    #c2410c;
  --color-accent-rgb:     234, 88, 12;

  /* Semantic */
  --color-success:        #059669;
  --color-success-light:  #ECFDF5;
  --color-error:          #dc2626;
  --color-error-light:    #FEF2F2;
  --color-warning:        #d97706;
  --color-warning-light:  #FEF3C7;

  /* Text — from static site */
  --color-text-primary:   #1e293b;
  --color-text-secondary: #475569;
  --color-text-muted:     #64748b;

  /* Surface */
  --color-bg:             #f8fafc;
  --color-white:          #FFFFFF;
  --color-border:         #e2e8f0;

  /* Radius */
  --radius-xs:  6px;
  --radius-sm:  10px;
  --radius-md:  16px;
  --radius-lg:  24px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-sm:  0 2px 8px  rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg:  0 8px 40px rgba(0, 0, 0, 0.12);
  --shadow-primary: 0 4px 16px rgba(30, 64, 175, 0.30);
  --shadow-accent:  0 4px 16px rgba(234, 88, 12, 0.35);

  /* Spacing scale */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  28px;
  --space-8:  32px;
  --space-10: 40px;

  /* Typography — Inter (Google Fonts, loaded in index.html) */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-size-xs:   11px;
  --font-size-sm:   13px;
  --font-size-base: 15px;
  --font-size-md:   16px;
  --font-size-lg:   18px;
  --font-size-xl:   22px;
  --font-size-2xl:  26px;

  /* Transitions */
  --transition-fast:   0.15s ease;
  --transition-base:   0.2s  ease;
  --transition-slow:   0.3s  ease;

  /* Layout */
  --app-max-width: 480px;
  --header-height: 56px;
  --footer-height: 80px;
}