/* ============================================
   PACKISTRY — CSS VARIABLES
   Single source of truth for entire project
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700&family=DM+Sans:wght@300;400;500;600&display=swap');

:root {
  /* --- Brand Colors (exact from Figma PDF) --- */
  --color-navy:        #0F2640;
  --color-navy-mid:    #112840;
  --color-navy-light:  #1C3555;
  --color-gold:        #C9A84C;
  --color-gold-dark:   #A8862E;
  --color-gold-light:  #D4B05A;
  --color-gold-bg:     #F5F0E8;

  /* --- Neutral Colors --- */
  --color-white:       #FFFFFF;
  --color-off-white:   #F9F9F7;
  --color-gray-100:    #F5F5F5;
  --color-gray-200:    #E8E8E8;
  --color-gray-300:    #D0D0D0;
  --color-gray-400:    #A8A8A8;
  --color-gray-500:    #6B6B6B;
  --color-gray-700:    #3A3A3A;
  --color-gray-900:    #1A1A1A;

  /* --- Text Colors --- */
  --text-primary:      #1A1A1A;
  --text-secondary:    #4A4A4A;
  --text-muted:        #888888;
  --text-on-dark:      #FFFFFF;
  --text-on-dark-muted:#9DB2C8;

  /* --- Backgrounds (exact from PDF) --- */
  --bg-white:          #FFFFFF;
  --bg-light:          #F5F5F5;
  --bg-section:        #F5F0E8;
  --bg-dark:           #0F2640;
  --bg-dark-card:      #112840;

  /* --- Typography --- */
  --font-serif:        'Playfair Display', Georgia, serif;
  --font-sans:         'DM Sans', sans-serif;

  /* --- Font Sizes --- */
  --fs-xs:    11px;
  --fs-sm:    13px;
  --fs-base:  15px;
  --fs-md:    17px;
  --fs-lg:    20px;
  --fs-xl:    24px;
  --fs-2xl:   32px;
  --fs-3xl:   42px;
  --fs-4xl:   56px;

  /* --- Spacing --- */
  --sp-xs:    4px;
  --sp-sm:    8px;
  --sp-md:    16px;
  --sp-lg:    24px;
  --sp-xl:    40px;
  --sp-2xl:   64px;
  --sp-3xl:   96px;

  /* --- Border 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.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.10);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.12);

  /* --- Transitions --- */
  --transition: all 0.25s ease;
  --transition-fast: all 0.15s ease;

  /* --- Top Bar Height --- */
  --topbar-h:  38px;
  --header-h:  70px;
  --nav-h:     50px;
}