/* ============================================================
   Tech Spot — Design Tokens (colors_and_type.css)
   مبني من Tech Spot Design System / Brand Book (2026)
   Cobalt Spot Blue · Spot Orange · Ink Navy
   ============================================================ */

/* الخطوط: Archivo (display) · Plus Jakarta Sans (body/UI) · JetBrains Mono (specs) */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@600;700;800;900&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {
  /* ---- Type ---- */
  --font-display: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---- Spot Blue · primary ---- */
  --spot-blue-50:  #EEF3FE;
  --spot-blue-100: #D9E4FD;
  --spot-blue-200: #B7CCFB;
  --spot-blue-300: #8AAAF7;
  --spot-blue-400: #4F7DF0;
  --spot-blue-500: #1E50E5;
  --spot-blue-600: #1840C4;
  --spot-blue-700: #13339B;
  --spot-blue-800: #0F2870;
  --spot-blue-900: #0B1E3F;

  /* ---- Spot Orange · accent ---- */
  --spot-orange-50:  #FFF2EC;
  --spot-orange-100: #FFDFD0;
  --spot-orange-200: #FCC4AA;
  --spot-orange-300: #FBA886;
  --spot-orange-400: #F7855A;
  --spot-orange-500: #F36633;
  --spot-orange-600: #E0521E;
  --spot-orange-700: #B83E12;

  /* ---- Neutrals · cool / navy-tinted ---- */
  --neutral-0:   #FFFFFF;
  --neutral-50:  #F6F8FC;
  --neutral-100: #EDF1F7;
  --neutral-200: #DCE3EE;
  --neutral-300: #C2CCDC;
  --neutral-400: #94A1B8;
  --neutral-500: #6B7A95;
  --neutral-600: #4C5A74;
  --neutral-700: #344056;
  --neutral-800: #1E2940;
  --neutral-900: #0B1E3F;

  /* ---- Foreground (text) ---- */
  --fg-1: #0B1E3F; /* primary — headings & strong text (Ink Navy) */
  --fg-2: #4C5A74; /* secondary — body copy */
  --fg-3: #94A1B8; /* muted — labels, captions */

  /* ---- Borders ---- */
  --border: #DCE3EE;          /* default subtle border / dividers */
  --border-strong: #C2CCDC;   /* inputs, stronger edges */
  --border-on-ink: rgba(255, 255, 255, .14); /* borders on navy/dark */

  /* ---- Radius ---- */
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  22px;
  --radius-2xl: 30px;

  /* ---- Elevation / shadows ---- */
  --shadow-sm: 0 1px 2px rgba(11, 30, 63, .05), 0 6px 16px rgba(11, 30, 63, .05);
  --shadow-lg: 0 24px 60px rgba(11, 30, 63, .16);
  --shadow-blue: 0 10px 24px rgba(30, 80, 229, .32);   /* blue buttons */
  --shadow-orange: 0 10px 24px rgba(243, 102, 51, .32); /* orange buttons */

  /* ---- Focus ---- */
  --focus-ring: 0 0 0 4px rgba(30, 80, 229, .18);

  /* ---- Semantic ---- */
  --success: #1F9D6B;
  --warning: #F3A93B;
  --danger:  #E5484D;
  --info:    #1E50E5;
}