:root {

  /* ══════════════════════════════════════════════════════════
     COLORS
     ══════════════════════════════════════════════════════════ */

  --c-white:          #FFFFFF;
  --c-bg-section:     #F5F7F9;
  --c-graphite:       #1A2230;
  --c-graphite-soft:  #2D3748;
  --c-steel:          #64748B;
  --c-steel-light:    #94A3B8;
  --c-amber:          #D97706;
  --c-amber-soft:     #F59E0B;
  --c-amber-hover:    #B45309;
  --c-amber-deep:     #92400E;
  --c-border:         #E2E8F0;
  --c-border-light:   #EEF2F7;
  --c-border-amber:   rgba(217, 119, 6, 0.18);


  /* ══════════════════════════════════════════════════════════
     TYPOGRAPHY
     ══════════════════════════════════════════════════════════ */

  --font-base: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-md:   1.125rem;   /* 18px */
  --text-lg:   1.25rem;    /* 20px */
  --text-xl:   1.5rem;     /* 24px */
  --text-2xl:  2rem;       /* 32px */
  --text-3xl:  2.5rem;     /* 40px */
  --text-4xl:  3.5rem;     /* 56px */
  --text-5xl:  4.5rem;     /* 72px */


  /* ══════════════════════════════════════════════════════════
     SPACING — 4px base grid
     ══════════════════════════════════════════════════════════ */

  --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-14: 56px;
  --sp-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-30: 120px;
  --sp-32: 128px;


  /* ══════════════════════════════════════════════════════════
     LAYOUT
     ══════════════════════════════════════════════════════════ */

  --container-max:     1280px;
  --container-px:      20px;
  --header-height:     64px;

  /* Section vertical rhythm */
  --section-py-sm:     var(--sp-16);   /* 64px  — mobile  */
  --section-py-md:     var(--sp-20);   /* 80px  — tablet  */
  --section-py-lg:     var(--sp-30);   /* 120px — desktop */

  /* Card / content gaps */
  --gap-sm:  var(--sp-3);   /* 12px */
  --gap-md:  var(--sp-6);   /* 24px */
  --gap-lg:  var(--sp-12);  /* 48px */


  /* ══════════════════════════════════════════════════════════
     BORDER RADIUS — industrial precision
     ══════════════════════════════════════════════════════════ */

  --radius-xs: 2px;    /* tags, strokes, minimal accents */
  --radius-sm: 4px;    /* badges, labels, small chips    */
  --radius-md: 8px;    /* buttons, inputs, small cards   */
  --radius-lg: 12px;   /* cards, panels, containers      */
  --radius-xl: 16px;   /* images, hero, map frame        */


  /* ══════════════════════════════════════════════════════════
     SHADOWS — layered, atmospheric, premium
     ══════════════════════════════════════════════════════════ */

  /* Barely-there — for subtle borders */
  --shadow-xs:
    0 1px 2px rgba(15, 23, 42, 0.04),
    0 1px 4px rgba(15, 23, 42, 0.03);

  /* Card resting state */
  --shadow-sm:
    0 1px 3px rgba(15, 23, 42, 0.04),
    0 4px 12px rgba(15, 23, 42, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.70) inset;

  /* Card hover / active focus */
  --shadow-md:
    0 2px 6px rgba(15, 23, 42, 0.05),
    0 10px 28px rgba(15, 23, 42, 0.10),
    0 1px 0 rgba(255, 255, 255, 0.80) inset;

  /* Elevated panels / modals */
  --shadow-lg:
    0 4px 10px rgba(15, 23, 42, 0.07),
    0 20px 48px rgba(15, 23, 42, 0.13),
    0 1px 0 rgba(255, 255, 255, 0.85) inset;

  /* XL — hero image, floating header */
  --shadow-xl:
    0 8px 20px rgba(15, 23, 42, 0.10),
    0 36px 72px rgba(15, 23, 42, 0.18),
    0 1px 0 rgba(255, 255, 255, 0.08) inset;

  /* Amber accent glow */
  --shadow-amber:
    0 2px 8px rgba(146, 64, 14, 0.18),
    0 6px 24px rgba(146, 64, 14, 0.24);


  /* ══════════════════════════════════════════════════════════
     TRANSITIONS
     ══════════════════════════════════════════════════════════ */

  --t-fast:  0.15s ease;
  --t-base:  0.22s ease;
  --t-slow:  0.38s ease;
  --t-hover: 0.18s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}