/* ============================================
   ANSARI GROUP CONSTRUCTION — DESIGN TOKENS
   ============================================ */

:root {
  /* ── Colors ── */
  --charcoal:       #1A1A1A;
  --charcoal-soft:  #222222;
  --charcoal-mid:   #2A2A2A;
  --navy:           #0D1B2A;
  --navy-light:     #142536;
  --steel:          #4A4A4A;
  --steel-light:    #6B6B6B;
  --steel-muted:    #999999;
  --amber:          #D9A441;
  --amber-bright:   #E4A62A;
  --amber-dark:     #B8882E;
  --red:            #C62828;
  --red-dark:       #9B1B1B;
  --concrete:       #F5F3EF;
  --concrete-dark:  #E8E4DD;
  --white:          #FAFAFA;
  --pure-white:     #FFFFFF;
  --black:          #000000;

  /* ── Overlay gradients ── */
  --overlay-hero:   linear-gradient(135deg, rgba(13, 27, 42, 0.88) 0%, rgba(26, 26, 26, 0.72) 100%);
  --overlay-dark:   linear-gradient(180deg, rgba(13, 27, 42, 0.92) 0%, rgba(13, 27, 42, 0.78) 100%);
  --overlay-subtle: linear-gradient(180deg, rgba(26, 26, 26, 0.6) 0%, rgba(26, 26, 26, 0.3) 100%);

  /* ── Typography ── */
  --font-heading:   'Bebas Neue', 'Impact', sans-serif;
  --font-body:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-accent:    'Oswald', 'Arial Narrow', sans-serif;

  /* ── Type Scale (fluid) ── */
  --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:   3rem;        /* 48px */
  --text-5xl:   3.75rem;     /* 60px */
  --text-6xl:   4.5rem;      /* 72px */
  --text-hero:  clamp(2.5rem, 5vw + 1rem, 5rem);

  /* ── Line Heights ── */
  --leading-tight:   1.1;
  --leading-snug:    1.25;
  --leading-normal:  1.6;
  --leading-relaxed: 1.8;

  /* ── Letter Spacing ── */
  --tracking-tight:    -0.02em;
  --tracking-normal:    0;
  --tracking-wide:      0.05em;
  --tracking-wider:     0.1em;
  --tracking-widest:    0.2em;

  /* ── Spacing ── */
  --space-xs:   0.25rem;   /* 4px */
  --space-sm:   0.5rem;    /* 8px */
  --space-md:   1rem;      /* 16px */
  --space-lg:   1.5rem;    /* 24px */
  --space-xl:   2rem;      /* 32px */
  --space-2xl:  3rem;      /* 48px */
  --space-3xl:  4rem;      /* 64px */
  --space-4xl:  6rem;      /* 96px */
  --space-5xl:  8rem;      /* 128px */

  /* ── Layout ── */
  --container-sm:   640px;
  --container-md:   768px;
  --container-lg:   1024px;
  --container-xl:   1200px;
  --container-max:  1320px;
  --gutter:         clamp(1rem, 3vw, 2rem);

  /* ── Borders / Radius ── */
  --radius-sm:  4px;
  --radius-md:  8px;
  --radius-lg:  12px;
  --radius-xl:  20px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:    0 1px 3px rgba(0, 0, 0, 0.12);
  --shadow-md:    0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg:    0 8px 30px rgba(0, 0, 0, 0.2);
  --shadow-xl:    0 16px 48px rgba(0, 0, 0, 0.25);
  --shadow-amber: 0 4px 20px rgba(217, 164, 65, 0.3);

  /* ── Transitions ── */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --duration-fast:   0.2s;
  --duration-normal: 0.35s;
  --duration-slow:   0.6s;

  /* ── Z-Index ── */
  --z-behind:    -1;
  --z-base:      1;
  --z-dropdown:  100;
  --z-sticky:    200;
  --z-overlay:   300;
  --z-modal:     400;
  --z-fab:       500;
  --z-toast:     600;
}