/* ═══════════════════════════════════════════════════════
   tokens.css  –  Design Tokens
   Tema: Elegant Romantic Blue
═══════════════════════════════════════════════════════ */

:root {
  /* ── Colour Palette ── */
  --clr-navy:        #0b2545;
  --clr-navy-mid:    #163466;
  --clr-blue:        #1a5276;
  --clr-blue-mid:    #2e86c1;
  --clr-sky:         #85c1e9;
  --clr-gold:        #c9a84c;
  --clr-gold-light:  #e8d5a3;
  --clr-cream:       #f8f4ee;
  --clr-white:       #ffffff;
  --clr-text:        #1a1a2e;
  --clr-text-muted:  #5a6a7a;
  --clr-overlay:     rgba(11, 37, 69, 0.72);
  --clr-overlay-light: rgba(11, 37, 69, 0.45);

  /* ── Gradients ── */
  --grad-hero:       linear-gradient(160deg, #0b2545 0%, #163466 40%, #1a5276 100%);
  --grad-section:    linear-gradient(180deg, #f0f6ff 0%, #f8f4ee 100%);
  --grad-navy:       linear-gradient(135deg, #0b2545 0%, #163466 100%);
  --grad-gold:       linear-gradient(135deg, #c9a84c 0%, #e8d5a3 50%, #c9a84c 100%);

  /* ── Typography ── */
  --font-display:    'Playfair Display', 'Georgia', serif;
  --font-body:       'Lato', 'Helvetica Neue', sans-serif;
  --font-script:     'Dancing Script', cursive;

  --fs-xs:    0.75rem;   /* 12px */
  --fs-sm:    0.875rem;  /* 14px */
  --fs-base:  1rem;      /* 16px */
  --fs-md:    1.125rem;  /* 18px */
  --fs-lg:    1.25rem;   /* 20px */
  --fs-xl:    1.5rem;    /* 24px */
  --fs-2xl:   1.875rem;  /* 30px */
  --fs-3xl:   2.25rem;   /* 36px */
  --fs-4xl:   3rem;      /* 48px */
  --fs-5xl:   3.75rem;   /* 60px */
  --fs-hero:  clamp(2.5rem, 8vw, 5rem);

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-bold:    700;

  --lh-tight:   1.2;
  --lh-snug:    1.4;
  --lh-normal:  1.6;
  --lh-relaxed: 1.8;

  /* ── Spacing ── */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.25rem;
  --sp-6:  1.5rem;
  --sp-8:  2rem;
  --sp-10: 2.5rem;
  --sp-12: 3rem;
  --sp-16: 4rem;
  --sp-20: 5rem;
  --sp-24: 6rem;

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

  /* ── Shadow ── */
  --shadow-sm:  0 1px 3px rgba(11,37,69,0.12), 0 1px 2px rgba(11,37,69,0.08);
  --shadow-md:  0 4px 16px rgba(11,37,69,0.15), 0 2px 6px rgba(11,37,69,0.10);
  --shadow-lg:  0 10px 40px rgba(11,37,69,0.20), 0 4px 12px rgba(11,37,69,0.12);
  --shadow-xl:  0 20px 60px rgba(11,37,69,0.25);

  /* ── Transition ── */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast:    200ms;
  --dur-base:    350ms;
  --dur-slow:    600ms;

  /* ── Z-index ── */
  --z-base:    1;
  --z-above:   10;
  --z-overlay: 100;
  --z-modal:   200;
  --z-fixed:   300;
  --z-top:     400;
}