/* ============================================
   JSP Construction — Design Tokens
   ============================================ */

:root {
  /* ── Color Palette ── */
  --color-primary:        #1a1a2e;
  --color-primary-light:  #2d2d44;
  --color-primary-dark:   #0f0f1a;

  --color-secondary:      #c9a84c;
  --color-secondary-light:#d4ba6e;
  --color-secondary-dark: #a88a35;

  --color-accent:         #16213e;
  --color-accent-light:   #1f3056;

  --color-white:          #ffffff;
  --color-off-white:      #fafaf8;
  --color-warm-grey:      #f0ede8;
  --color-mid-grey:       #d4d0ca;
  --color-text-grey:      #6b6b6b;
  --color-text-dark:      #2c2c2c;
  --color-text-body:      #444444;

  --color-success:        #2e7d32;
  --color-error:          #c62828;

  /* ── Typography ── */
  --font-heading:         'Outfit', sans-serif;
  --font-body:            'Inter', sans-serif;

  --fw-regular:           400;
  --fw-medium:            500;
  --fw-semibold:          600;
  --fw-bold:              700;
  --fw-extrabold:         800;

  /* Type Scale (clamp for fluid sizing) */
  --text-xs:              clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
  --text-sm:              clamp(0.8125rem, 0.77rem + 0.2vw, 0.9375rem);
  --text-base:            clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
  --text-lg:              clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem);
  --text-xl:              clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --text-2xl:             clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --text-3xl:             clamp(1.875rem, 1.5rem + 1.5vw, 2.75rem);
  --text-4xl:             clamp(2.25rem, 1.75rem + 2vw, 3.5rem);
  --text-5xl:             clamp(2.75rem, 2rem + 3vw, 4.5rem);

  --leading-tight:        1.2;
  --leading-snug:         1.35;
  --leading-normal:       1.6;
  --leading-relaxed:      1.75;

  --tracking-tight:       -0.02em;
  --tracking-normal:      0;
  --tracking-wide:        0.03em;
  --tracking-wider:       0.06em;
  --tracking-widest:      0.12em;

  /* ── Spacing ── */
  --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 */

  /* Section padding */
  --section-py:           clamp(3rem, 2.5rem + 3vw, 6rem);
  --section-px:           clamp(1rem, 0.5rem + 2vw, 2rem);

  /* ── Layout ── */
  --container-max:        1280px;
  --container-narrow:     900px;
  --container-wide:       1440px;

  --header-height:        80px;
  --header-height-scrolled: 64px;

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

  /* ── Shadows ── */
  --shadow-xs:            0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:            0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md:            0 4px 12px rgba(0, 0, 0, 0.08), 0 2px 4px rgba(0, 0, 0, 0.04);
  --shadow-lg:            0 10px 30px rgba(0, 0, 0, 0.1), 0 4px 8px rgba(0, 0, 0, 0.05);
  --shadow-xl:            0 20px 50px rgba(0, 0, 0, 0.12), 0 8px 16px rgba(0, 0, 0, 0.06);
  --shadow-header:        0 2px 20px rgba(0, 0, 0, 0.08);
  --shadow-card-hover:    0 12px 40px rgba(0, 0, 0, 0.12);

  /* ── Transitions ── */
  --ease-out:             cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out:          cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:          cubic-bezier(0.34, 1.56, 0.64, 1);

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

  /* ── Overlays ── */
  --overlay-dark:         rgba(26, 26, 46, 0.7);
  --overlay-gradient:     linear-gradient(180deg, rgba(26, 26, 46, 0.3) 0%, rgba(26, 26, 46, 0.85) 100%);
  --overlay-light:        rgba(255, 255, 255, 0.9);
}