/* ==========================================================================
   Design Tokens — Custom properties, font imports, resets
   ========================================================================== */

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

:root {
  /* Palette — blue core */
  --blue:        #2a2f7c;
  --blue-light:  #4d5cf2;
  --blue-dark:   #2230c0;
  --white:       #f0f0f8;
  --off-white:   #d8d8e8;
  --dark:        #0a0a1a;

  /* Surface colours */
  --card-bg:     #ecebf2;
  --callout-bg:  #e1e0e8;

  /* Text on light backgrounds */
  --text-heading: #1a1d3a;
  --text-body:    #3a3d5a;
  --text-muted:   #888;

  /* Spacing scale */
  --space-xs:  8px;
  --space-s:  16px;
  --space-m:  24px;
  --space-l:  32px;
  --space-xl: 48px;
  --space-2xl: 80px;
  --space-3xl: 120px;

  /* Page gutters */
  --gutter:       40px;
  --gutter-mobile: 24px;

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Z-index layers */
  --z-bg:      0;
  --z-content: 1;
  --z-canvas:  5;
  --z-nav:     100;
  --z-grain:   9998;
  --z-grain-top: 9999;
}

/* Reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}