/* ============================================================
   CtrlShift — Design Tokens
   Colors, typography, spacing, borders, motion.
   ============================================================ */

@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 100; font-display: swap;
  src: url('fonts/IBMPlexSansArabic-Thin.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 200; font-display: swap;
  src: url('fonts/IBMPlexSansArabic-ExtraLight.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 300; font-display: swap;
  src: url('fonts/IBMPlexSansArabic-Light.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/IBMPlexSansArabic-Regular.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/IBMPlexSansArabic-Medium.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'IBM Plex Sans Arabic'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/IBMPlexSansArabic-Bold.ttf') format('truetype'); }

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Inter_18pt-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: italic;  font-weight: 400; font-display: swap;
  src: url('fonts/Inter_18pt-Italic.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/Inter_18pt-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Inter_18pt-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Inter_18pt-Bold.ttf') format('truetype'); }

@font-face { font-family: 'Inter Subhead'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Inter_24pt-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter Subhead'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/Inter_24pt-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter Subhead'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Inter_24pt-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter Subhead'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Inter_24pt-Bold.ttf') format('truetype'); }

@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/Inter_28pt-Regular.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('fonts/Inter_28pt-Medium.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('fonts/Inter_28pt-SemiBold.ttf') format('truetype'); }
@font-face { font-family: 'Inter Display'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/Inter_28pt-Bold.ttf') format('truetype'); }

:root {
  --cs-blue:          #054886;
  --cs-navy:          #0F1C2E;
  --cs-lime:          #A3BD18;
  --cs-graphite:      #E6E8EB;
  --cs-white:         #FFFFFF;

  --cs-blue-hover:    #043A6E;
  --cs-blue-pressed:  #032E58;
  --cs-navy-hover:    #0A1422;
  --cs-lime-hover:    #8FA614;
  --cs-graphite-soft: #F4F5F6;
  --cs-graphite-line: #D5D8DC;
  --cs-charcoal:      #2A3340;

  --bg:           var(--cs-white);
  --bg-soft:      var(--cs-graphite-soft);
  --bg-dark:      var(--cs-navy);
  --bg-emphasis:  var(--cs-blue);

  --fg:           var(--cs-navy);
  --fg-muted:     var(--cs-charcoal);
  --fg-subtle:    #6A7280;
  --fg-on-dark:   var(--cs-white);
  --fg-link:      var(--cs-blue);

  --line:         var(--cs-graphite);
  --line-strong:  var(--cs-graphite-line);
  --signal:       var(--cs-lime);

  --cs-status-error:      #B03A2E;
  --cs-status-error-soft: #FEF2F2;
  --cs-status-warn:       #92400E;
  --cs-status-warn-soft:  #FFFBEB;
  --cs-status-pos:        #14532D;
  --cs-status-pos-soft:   #F0FDF4;

  --cs-overlay: rgba(15, 28, 46, 0.6);

  --font-en:         'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-en-display: 'Inter Display', 'Inter', -apple-system, sans-serif;
  --font-en-subhead: 'Inter Subhead', 'Inter', -apple-system, sans-serif;
  --font-ar:         'IBM Plex Sans Arabic', 'Inter', sans-serif;
  --font-mono:       ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  --fs-display: 64px;   --lh-display: 1.05;  --tr-display: -0.02em;
  --fs-h1:      48px;   --lh-h1:      1.10;  --tr-h1:      -0.018em;
  --fs-h2:      36px;   --lh-h2:      1.15;  --tr-h2:      -0.014em;
  --fs-h3:      24px;   --lh-h3:      1.25;  --tr-h3:      -0.008em;
  --fs-h4:      20px;   --lh-h4:      1.30;  --tr-h4:      -0.005em;
  --fs-body:    16px;   --lh-body:    1.55;  --tr-body:     0;
  --fs-small:   14px;   --lh-small:   1.50;
  --fs-micro:   12px;   --lh-micro:   1.40;  --tr-micro:    0.04em;

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  --sp-1:  4px;   --sp-2:  8px;   --sp-3:  12px;  --sp-4:  16px;
  --sp-5:  24px;  --sp-6:  32px;  --sp-7:  48px;  --sp-8:  64px;
  --sp-9:  96px;  --sp-10: 128px;

  --r-0: 0px;  --r-1: 2px;  --r-2: 4px;  --r-3: 6px;

  --bw-hair: 1px;
  --bw-cta:  1px;

  --ease-standard: cubic-bezier(0.2, 0.0, 0.2, 1);
  --dur-fast:  120ms;
  --dur-base:  180ms;
  --dur-slow:  240ms;

  --container:        1280px;
  --container-narrow: 960px;
  --gutter:           32px;
  --nav-h:            64px;
}

@media (max-width: 768px) {
  :root {
    --fs-display: 40px;  --lh-display: 1.08;
    --fs-h1:      32px;  --lh-h1:      1.15;
    --fs-h2:      26px;  --lh-h2:      1.20;
    --fs-h3:      20px;  --lh-h3:      1.30;
    --fs-h4:      18px;  --lh-h4:      1.35;
    --sp-10: 80px;
    --sp-9:  64px;
  }
}