/* ============================================================
   VARIABLES.CSS — Design Tokens  |  MWeb Design V2
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

:root {
  /* Core */
  --clr-black:       #0a0a0a;
  --clr-white:       #FFFFFF;

  /* Deep Royal Blue */
  --clr-accent:      #1a3a8f;
  --clr-accent-glow: #3b69d4;
  --clr-accent-soft: rgba(59,105,212,0.10);
  --clr-accent-mid:  rgba(59,105,212,0.18);

  /* Warm neutrals */
  --clr-warm-50:   #FAFAF8;
  --clr-warm-100:  #F4F4F0;
  --clr-warm-200:  #E8E8E2;
  --clr-warm-300:  #D4D4CB;
  --clr-warm-400:  #B0B0A4;
  --clr-warm-500:  #8A8A7E;
  --clr-warm-600:  #6B6B60;
  --clr-warm-700:  #4A4A42;
  --clr-warm-800:  #2E2E28;
  --clr-warm-900:  #1A1A16;

  /* Dark panels */
  --clr-ink:         #111110;
  --clr-ink-2:       #1c1c1a;
  --clr-ink-border:  rgba(255,255,255,0.09);

  /* Status */
  --clr-success: #2d8a4e;
  --clr-error:   #c0392b;

  /* Fonts — editorial + readable */
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body:    'DM Sans', system-ui, sans-serif;

  /* Fluid type */
  --fs-xs:   clamp(0.75rem,  1.5vw, 0.8125rem);
  --fs-sm:   clamp(0.875rem, 1.8vw, 0.9375rem);
  --fs-base: clamp(0.9375rem,2vw,   1.0625rem);
  --fs-md:   clamp(1rem,     2.2vw, 1.125rem);
  --fs-lg:   clamp(1.125rem, 2.6vw, 1.3125rem);
  --fs-xl:   clamp(1.3125rem,3vw,   1.5625rem);
  --fs-2xl:  clamp(1.5625rem,3.8vw, 2rem);
  --fs-3xl:  clamp(2rem,     4.5vw, 2.625rem);
  --fs-4xl:  clamp(2.5rem,   5.5vw, 3.375rem);
  --fs-5xl:  clamp(3.25rem,  7vw,   4.75rem);
  --fs-6xl:  clamp(4rem,     9vw,   6.5rem);

  /* Weights */
  --fw-light:    300;
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* Line heights */
  --lh-tight:   1.05;
  --lh-heading: 1.12;
  --lh-normal:  1.5;
  --lh-relaxed: 1.72;

  /* Letter spacing */
  --ls-tight:   -0.03em;
  --ls-snug:    -0.015em;
  --ls-normal:   0;
  --ls-wide:     0.05em;
  --ls-wider:    0.10em;
  --ls-widest:   0.18em;

  /* Space */
  --sp-1:   4px;   --sp-2:   8px;   --sp-3:  12px;
  --sp-4:  16px;   --sp-5:  20px;   --sp-6:  24px;
  --sp-7:  28px;   --sp-8:  32px;   --sp-10: 40px;
  --sp-12: 48px;   --sp-14: 56px;   --sp-16: 64px;
  --sp-20: 80px;   --sp-24: 96px;   --sp-32:128px;

  --section-py:    clamp(80px, 10vw, 130px);
  --section-py-sm: clamp(52px,  7vw,  88px);
  --container-max: 1280px;
  --container-px:  clamp(20px,  5vw,  80px);

  /* Radii */
  --radius-sm:   5px;
  --radius-md:  10px;
  --radius-lg:  18px;
  --radius-xl:  28px;
  --radius-full:9999px;

  /* Shadows */
  --shadow-sm:     0 1px 4px rgba(0,0,0,0.07), 0 2px 8px rgba(0,0,0,0.05);
  --shadow-md:     0 4px 16px rgba(0,0,0,0.10), 0 1px 4px rgba(0,0,0,0.06);
  --shadow-lg:     0 12px 40px rgba(0,0,0,0.14), 0 3px 8px rgba(0,0,0,0.08);
  --shadow-xl:     0 24px 64px rgba(0,0,0,0.18);
  --shadow-blue:   0 8px 32px rgba(26,58,143,0.22), 0 2px 8px rgba(59,105,212,0.14);
  --shadow-blue-lg:0 20px 60px rgba(26,58,143,0.28);

  /* Transitions */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --t-fast:  160ms cubic-bezier(0.16,1,0.3,1);
  --t-base:  280ms cubic-bezier(0.16,1,0.3,1);
  --t-slow:  440ms cubic-bezier(0.16,1,0.3,1);

  /* Z-index */
  --z-below:   -1;
  --z-base:     0;
  --z-above:   10;
  --z-float:   50;
  --z-drop:   200;
  --z-navbar: 800;
  --z-modal: 1000;

  /* Layout */
  --navbar-h:          76px;
  --navbar-h-scrolled: 58px;
}