/* ════════════════════════════════════════════
   A3 Digital Tools — Design Tokens
   All CSS custom properties. Edit here to
   update the entire theme in one place.
════════════════════════════════════════════ */

:root {

  /* ── BRAND COLORS ── */
  --blue:          #2952E3;
  --blue-dark:     #1E3DB5;
  --blue-hover:    #1E44D4;
  --blue-light:    #EEF2FF;
  --blue-mid:      #C7D2FE;

  --teal:          #0D9488;
  --teal-light:    #CCFBF1;

  --red-acc:       #E8341C;

  /* ── NEUTRAL PALETTE ── */
  --white:         #FFFFFF;
  --gray-25:       #FCFCFD;
  --gray-50:       #F8F9FC;
  --gray-100:      #F0F2F8;
  --gray-150:      #E8EBF5;
  --gray-200:      #DDE1EE;
  --gray-300:      #B8C0D8;
  --gray-400:      #8892B0;
  --gray-500:      #636B8A;
  --gray-600:      #4A5274;
  --gray-700:      #2E3656;
  --gray-800:      #1E2340;
  --gray-900:      #0D0F1C;

  /* ── SEMANTIC COLORS ── */
  --success:       #10B981;
  --success-light: #D1FAE5;
  --warning:       #F59E0B;
  --warning-light: #FEF3C7;
  --danger:        #EF4444;
  --danger-light:  #FEE2E2;

  /* ── TOOL CATEGORY COLORS ── */
  --cat-pdf:       #EF4444;
  --cat-image:     #8B5CF6;
  --cat-convert:   #2952E3;
  --cat-document:  #0D9488;
  --cat-ai:        #F59E0B;
  --cat-compress:  #EC4899;

  /* ── TYPOGRAPHY ── */
  --font:          'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-cond:     'Barlow Condensed', 'Barlow', sans-serif;
  --font-mono:     'Courier New', Courier, monospace;

  /* Font sizes */
  --text-xs:    11px;
  --text-sm:    13px;
  --text-base:  15px;
  --text-md:    17px;
  --text-lg:    20px;
  --text-xl:    24px;
  --text-2xl:   30px;
  --text-3xl:   38px;
  --text-4xl:   48px;
  --text-hero:  clamp(36px, 5.5vw, 58px);

  /* Font weights */
  --fw-normal:  400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700;
  --fw-xbold:   800;
  --fw-black:   900;

  /* Line heights */
  --lh-tight:   1.1;
  --lh-snug:    1.3;
  --lh-normal:  1.6;
  --lh-relaxed: 1.75;

  /* ── SPACING ── */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-5:   20px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;

  /* ── BORDER RADIUS ── */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   16px;
  --radius-xl:   22px;
  --radius-full: 9999px;

  /* ── SHADOWS ── */
  --shadow-xs:   0 1px 3px rgba(41,82,227,0.05), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-sm:   0 2px 8px rgba(41,82,227,0.07), 0 1px 3px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 20px rgba(41,82,227,0.09), 0 2px 8px rgba(0,0,0,0.06);
  --shadow-lg:   0 12px 40px rgba(41,82,227,0.10), 0 4px 16px rgba(0,0,0,0.08);
  --shadow-xl:   0 24px 64px rgba(41,82,227,0.12), 0 8px 24px rgba(0,0,0,0.10);
  --shadow-blue: 0 8px 30px rgba(41,82,227,0.30);

  /* ── TRANSITIONS ── */
  --transition:       all 0.18s ease;
  --transition-fast:  all 0.12s ease;
  --transition-slow:  all 0.30s ease;

  /* ── LAYOUT ── */
  --container-width: 1200px;
  --container-pad:   clamp(16px, 4vw, 40px);

  /* ── Z-INDEX SCALE ── */
  --z-base:       1;
  --z-above:      10;
  --z-dropdown:   100;
  --z-sticky:     200;
  --z-overlay:    300;
  --z-modal:      400;

  /* ── HEADER ── */
  --header-height: 62px;
}