/* ============================================================
   THE NATEWORK GROUP — Design Tokens
   Single source of truth. No hardcoded values anywhere else.
   ============================================================ */

:root {

  /* ── Brand Colors ────────────────────────────────────────── */
  --color-navy:     #203052;
  --color-blue:     #2D5377;
  --color-teal:     #5E9D9D;
  --color-taupe:    #8A7B70;
  --color-lt-taupe: #D3C7BD;
  --color-bg:       #F0E9E1;
  --color-gray:     #D9D9D9;
  --color-charcoal: #383736;
  --color-white:    #FFFFFF;

  /* ── Semantic Aliases ────────────────────────────────────── */
  --color-text:         var(--color-charcoal);
  --color-text-muted:   var(--color-taupe);
  --color-text-on-dark: var(--color-white);
  --color-border:       var(--color-lt-taupe);
  --color-bg-page:      var(--color-white);
  --color-bg-alt:       var(--color-bg);
  --color-primary:      var(--color-navy);
  --color-secondary:    var(--color-blue);
  --color-accent:       var(--color-teal);
  --color-focus:        var(--color-teal);

  /* ── Typography ──────────────────────────────────────────── */
  /* Neue Einstellung requires self-hosting (Fontwerk license).
     Place .woff2 files in /assets/fonts/neue-einstellung/.
     Arial is the production fallback — the site looks great in either. */
  --font-display: 'Neue Einstellung', Arial, sans-serif;
  --font-body:    Arial, sans-serif;
  --font-mono:    'Courier New', Courier, monospace;

  /* ── Type Scale (1rem = 16px) ────────────────────────────── */
  --text-xs:   0.75rem;    /* 12px */
  --text-sm:   0.875rem;   /* 14px */
  --text-base: 1rem;       /* 16px */
  --text-lg:   1.125rem;   /* 18px */
  --text-xl:   1.25rem;    /* 20px */
  --text-2xl:  1.5rem;     /* 24px */
  --text-3xl:  1.875rem;   /* 30px */
  --text-4xl:  2.25rem;    /* 36px */
  --text-5xl:  3rem;       /* 48px */
  --text-6xl:  3.75rem;    /* 60px */
  --text-hero: 4.5rem;     /* 72px — homepage hero only */

  /* ── Line Heights ────────────────────────────────────────── */
  --leading-tight:   1.2;
  --leading-snug:    1.35;
  --leading-normal:  1.5;
  --leading-relaxed: 1.65;

  /* ── Font Weights ────────────────────────────────────────── */
  --weight-normal: 400;
  --weight-bold:   700;

  /* ── Spacing (4px base unit) ─────────────────────────────── */
  --space-1:  0.25rem;   /*  4px */
  --space-2:  0.5rem;    /*  8px */
  --space-3:  0.75rem;   /* 12px */
  --space-4:  1rem;      /* 16px */
  --space-5:  1.25rem;   /* 20px */
  --space-6:  1.5rem;    /* 24px */
  --space-8:  2rem;      /* 32px */
  --space-10: 2.5rem;    /* 40px */
  --space-12: 3rem;      /* 48px */
  --space-16: 4rem;      /* 64px */
  --space-20: 5rem;      /* 80px */
  --space-24: 6rem;      /* 96px */
  --space-32: 8rem;      /* 128px */

  /* ── Border Radius ───────────────────────────────────────── */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-full: 9999px;

  /* ── Shadows (navy-tinted) ───────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(32,48,82,0.08), 0 1px 2px rgba(32,48,82,0.04);
  --shadow-md: 0 4px 8px rgba(32,48,82,0.08), 0 2px 4px rgba(32,48,82,0.05);
  --shadow-lg: 0 10px 20px rgba(32,48,82,0.10), 0 4px 8px rgba(32,48,82,0.05);
  --shadow-xl: 0 20px 40px rgba(32,48,82,0.12), 0 8px 16px rgba(32,48,82,0.06);

  /* ── Transitions ─────────────────────────────────────────── */
  --transition-fast: 0.15s ease-in-out;
  --transition-base: 0.2s ease-in-out;
  --transition-slow: 0.35s ease-in-out;

  /* ── Layout ──────────────────────────────────────────────── */
  --container-sm:  640px;
  --container-md:  768px;
  --container-lg:  1024px;
  --container-xl:  1280px;
  --container-2xl: 1440px;
  --nav-height:    72px;

  /* ── Z-Index ─────────────────────────────────────────────── */
  --z-base:     0;
  --z-raised:   10;
  --z-dropdown: 100;
  --z-nav:      200;
  --z-modal:    300;
  --z-toast:    400;
}