/* ==========================================================================
   Root Variables
   ========================================================================== */

:root {
  /* Aspect Ratios */
  --aspect-ratio-square: 1;
  --aspect-ratio-4-3: 4/3;
  --aspect-ratio-3-4: 3/4;
  --aspect-ratio-3-2: 3/2;
  --aspect-ratio-2-3: 2/3;
  --aspect-ratio-16-9: 16/9;
  --aspect-ratio-9-16: 9/16;

  /* Color Palette */
  --color-black: #000000;
  --color-white: #ffffff;
  --color-cyan-bluish-gray: #abb8c3;
  --color-pale-pink: #f78da7;
  --color-vivid-red: #cf2e2e;
  --color-luminous-vivid-orange: #ff6900;
  --color-luminous-vivid-amber: #fcb900;
  --color-light-green-cyan: #7bdcb5;
  --color-vivid-green-cyan: #00d084;
  --color-pale-cyan-blue: #8ed1fc;
  --color-vivid-cyan-blue: #0693e3;
  --color-vivid-purple: #9b51e0;


  --color-primary: #FDF3C7;
  --color-secondary: #CBB9A5;
  --color-accent1: #6FB1A0;
  --color-accent2: #4F7F6A;
  --color-text: #443930;
  --color-bg: #FAF9F6;
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Inter', sans-serif;



  /* Gradients */
  --gradient-vivid-cyan-blue-to-vivid-purple: linear-gradient(135deg, #0693e3 0%, #9b51e0 100%);
  --gradient-light-green-cyan-to-vivid-green-cyan: linear-gradient(135deg, #7bdcb5 0%, #00d084 100%);
  --gradient-luminous-vivid-amber-to-luminous-vivid-orange: linear-gradient(135deg, #fcb900 0%, #ff6900 100%);
  --gradient-luminous-vivid-orange-to-vivid-red: linear-gradient(135deg, #ff6900 0%, #cf2e2e 100%);
  --gradient-very-light-gray-to-cyan-bluish-gray: linear-gradient(135deg, #eeeeee 0%, #a9b8c3 100%);
  --gradient-cool-to-warm-spectrum: linear-gradient(135deg, #4aeadc 0%, #9778d1 20%, #cf2aba 40%, #ee2c82 60%, #fb6962 80%, #fef84c 100%);
  --gradient-blush-light-purple: linear-gradient(135deg, #ffceec 0%, #9896f0 100%);
  --gradient-blush-bordeaux: linear-gradient(135deg, #fecda5 0%, #fe2d2d 50%, #6b003e 100%);
  --gradient-luminous-dusk: linear-gradient(135deg, #ffcb70 0%, #c751c0 50%, #4158d0 100%);
  --gradient-pale-ocean: linear-gradient(135deg, #fff5cb 0%, #b6e3d4 50%, #33a7b5 100%);
  --gradient-electric-grass: linear-gradient(135deg, #caf880 0%, #71ce7e 100%);
  --gradient-midnight: linear-gradient(135deg, #020381 0%, #2874fc 100%);

  /* Font Sizes */
  --font-size-small: 13px;
  --font-size-medium: 20px;
  --font-size-large: 36px;
  --font-size-x-large: 42px;

  /* Spacing Scale */
  --spacing-20: 0.44rem;
  --spacing-30: 0.67rem;
  --spacing-40: 1rem;
  --spacing-50: 1.5rem;
  --spacing-60: 2.25rem;
  --spacing-70: 3.38rem;
  --spacing-80: 5.06rem;

  /* Shadows */
  --shadow-natural: 6px 6px 9px rgba(0, 0, 0, 0.2);
  --shadow-deep: 12px 12px 50px rgba(0, 0, 0, 0.4);
  --shadow-sharp: 6px 6px 0px rgba(0, 0, 0, 0.2);
  --shadow-outlined: 6px 6px 0px -3px #fff, 6px 6px #000;
  --shadow-crisp: 6px 6px 0px #000;
}

/* ==========================================================================
   Layout Utilities
   ========================================================================== */

.is-layout-flex {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5em;
}

body .is-layout-flex > * {
  margin: 0;
}

.is-layout-grid {
  display: grid;
  gap: 0.5em;
}

body .is-layout-grid > * {
  margin: 0;
}

.wp-block-columns.is-layout-flex,
.wp-block-columns.is-layout-grid {
  gap: 2em;
}

.wp-block-post-template.is-layout-flex,
.wp-block-post-template.is-layout-grid {
  gap: 1.25em;
}

/* ==========================================================================
   Typography
   ========================================================================== */

.has-small-font-size {
  font-size: var(--font-size-small) !important;
}

.has-medium-font-size {
  font-size: var(--font-size-medium) !important;
}

.has-large-font-size {
  font-size: var(--font-size-large) !important;
}

.has-x-large-font-size {
  font-size: var(--font-size-x-large) !important;
}

:root :where(.wp-block-pullquote) {
  font-size: 1.5em;
  line-height: 1.6;
}