/* ============================================================
   HASMAN ENTERPRISE SOLUTIONS — assets/css/variables.css
   Brand colours, spacing, type scale, z-index, transitions
   ============================================================ */

:root {

  /* ── Brand Colours ─────────────────────────────────────── */
  --color-navy:         #002060;   /* Primary — headers, nav, footer */
  --color-navy-dark:    #1A1A2E;   /* Deepest — preloader, overlays  */
  --color-navy-mid:     #003080;   /* Hover / intermediate           */
  --color-sky:          #00B0F0;   /* Accent — CTAs, icons, highlights */
  --color-sky-light:    #E8F4FB;   /* Zebra rows, card hover bg      */
  --color-sky-mid:      #4AC7F5;   /* Lighter sky for gradients      */
  --color-white:        #FFFFFF;
  --color-offwhite:     #F5F7FA;
  --color-text:         #333333;   /* Body copy                      */
  --color-text-sub:     #666666;   /* Meta, placeholder              */
  --color-border:       #D9E6F2;   /* Light borders                  */
  --color-success:      #22C55E;
  --color-error:        #EF4444;

  /* ── Semantic Aliases ──────────────────────────────────── */
  --bg-page:            var(--color-white);
  --bg-alt:             var(--color-offwhite);
  --bg-dark:            var(--color-navy);
  --bg-darker:          var(--color-navy-dark);
  --text-primary:       var(--color-navy);
  --text-body:          var(--color-text);
  --text-sub:           var(--color-text-sub);
  --accent:             var(--color-sky);
  --accent-glow:        rgba(0, 176, 240, 0.35);
  --accent-glow-lg:     rgba(0, 176, 240, 0.55);

  /* ── Typography ────────────────────────────────────────── */
  --font-display:       'Playfair Display', Georgia, serif;
  --font-heading:       'Raleway', 'Segoe UI', sans-serif;
  --font-body:          'DM Sans', 'Helvetica Neue', sans-serif;
  --font-mono:          'JetBrains Mono', 'Courier New', monospace;

  --text-xs:   0.8125rem;   /* 13px */
  --text-sm:   0.9375rem;   /* 15px */
  --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.5rem;      /* 56px */
  --text-6xl:  4.5rem;      /* 72px */
  --text-hero: clamp(2.5rem, 6vw, 5rem);     /* Hero H1 — fluid */
  --text-display: clamp(3rem, 7vw, 5.5rem);  /* Largest display  */

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

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

  --section-py:     clamp(4rem, 8vw, 7rem);
  --section-py-lg:  clamp(5rem, 10vw, 9rem);
  --container-max:  1280px;
  --container-px:   clamp(1rem, 4vw, 2rem);

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

  /* ── Shadows ───────────────────────────────────────────── */
  --shadow-sm:    0 1px 3px rgba(0, 32, 96, 0.08);
  --shadow-md:    0 4px 16px rgba(0, 32, 96, 0.12);
  --shadow-lg:    0 8px 32px rgba(0, 32, 96, 0.16);
  --shadow-xl:    0 16px 48px rgba(0, 32, 96, 0.20);
  --shadow-sky:   0 4px 20px rgba(0, 176, 240, 0.40);
  --shadow-sky-lg:0 8px 32px rgba(0, 176, 240, 0.55);

  /* ── Z-index Layers ────────────────────────────────────── */
  --z-below:      -1;
  --z-base:        0;
  --z-card:       10;
  --z-sticky:    100;
  --z-navbar:    200;
  --z-dropdown:  300;
  --z-overlay:   400;
  --z-modal:     500;
  --z-toast:     600;
  --z-preloader: 999;

  /* ── Transitions ───────────────────────────────────────── */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:    cubic-bezier(0.7, 0, 0.84, 0);
  --ease-inout: cubic-bezier(0.45, 0, 0.55, 1);
  --ease-spring:cubic-bezier(0.34, 1.56, 0.64, 1);

  --duration-fast:   150ms;
  --duration-base:   300ms;
  --duration-slow:   500ms;
  --duration-slower: 800ms;

  --transition-base: all var(--duration-base) var(--ease-out);
  --transition-fast: all var(--duration-fast) var(--ease-out);

  /* ── Navbar ─────────────────────────────────────────────── */
  --navbar-height:    80px;
  --navbar-height-sm: 64px;

  /* ── Gradient presets ───────────────────────────────────── */
  --grad-navy: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-dark) 100%);
  --grad-sky:  linear-gradient(135deg, var(--color-sky) 0%, var(--color-sky-mid) 100%);
  --grad-hero: radial-gradient(ellipse at 30% 60%, #002d8a 0%, var(--color-navy-dark) 60%);
}