/* ==========================================================================
   YARA MUR — EDITORIAL DESIGN SYSTEM
   Base Stylesheet & CSS Custom Properties
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Inter:wght@300;400;500;600&family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Space+Mono:wght@400;700&display=swap');

:root {
  /* Color Palette — Quiet Luxury / Obsidian Dark */
  --bg-primary: #070707;
  --bg-secondary: #0f0f0f;
  --bg-card: #141414;
  --bg-card-hover: #1c1c1c;
  --bg-overlay: rgba(7, 7, 7, 0.85);

  --text-primary: #f5f3ef;
  --text-secondary: #a3a19d;
  --text-muted: #666461;
  --text-inverse: #070707;

  --accent-crimson: #9e1b1b;
  --accent-crimson-bright: #d62828;
  --accent-gold: #c5a059;
  --accent-bone: #e8e4dc;
  --border-color: rgba(245, 243, 239, 0.1);
  --border-hover: rgba(245, 243, 239, 0.25);

  /* Typography */
  --font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-editorial: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-mono: 'Space Mono', monospace;

  /* Spacing System */
  --space-xs: 0.5rem;   /* 8px */
  --space-sm: 1rem;     /* 16px */
  --space-md: 2rem;     /* 32px */
  --space-lg: 4rem;     /* 64px */
  --space-xl: 8rem;     /* 128px */
  --space-2xl: 12rem;   /* 192px */

  /* Transitions */
  --ease-editorial: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 0.3s var(--ease-editorial);
  --transition-normal: 0.6s var(--ease-editorial);
  --transition-slow: 1.2s var(--ease-editorial);

  /* Z-Index Hierarchy */
  --z-background: -1;
  --z-normal: 1;
  --z-header: 100;
  --z-cursor: 999;
  --z-modal: 1000;
}

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

html {
  font-size: 16px;
  scroll-behavior: smooth;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  overflow-x: hidden;
  line-height: 1.6;
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: var(--bg-primary);
}
::-webkit-scrollbar-thumb {
  background: var(--bg-card-hover);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--accent-crimson);
}

/* Custom Cursor Elements */
.custom-cursor {
  position: fixed;
  top: 0;
  left: 0;
  width: 8px;
  height: 8px;
  background-color: var(--accent-bone);
  border-radius: 50%;
  pointer-events: none;
  z-index: var(--z-cursor);
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease, background-color 0.3s ease;
}

.custom-cursor-follower {
  position: fixed;
  top: 0;
  left: 0;
  width: 36px;
  height: 36px;
  border: 1px solid rgba(245, 243, 239, 0.3);
  border-radius: 50%;
  pointer-events: none;
  z-index: calc(var(--z-cursor) - 1);
  transform: translate(-50%, -50%);
  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, background-color 0.3s ease;
}

body.hovered .custom-cursor-follower {
  width: 60px;
  height: 60px;
  background-color: rgba(158, 27, 27, 0.15);
  border-color: var(--accent-crimson);
}

body.hovered .custom-cursor {
  background-color: var(--accent-crimson-bright);
}

/* Disable Custom Cursor on Touch Devices */
@media (pointer: coarse) {
  .custom-cursor,
  .custom-cursor-follower {
    display: none !important;
  }
}

/* Focus & Accessibility */
:focus-visible {
  outline: 2px solid var(--accent-crimson);
  outline-offset: 4px;
}