/* ============================================
   TRENDAWAY AGENCY — CSS Custom Properties
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700;800&display=swap');

:root {
  /* ——— Colors ——— */
  --background-primary: #020B13;
  --background-secondary: #06131F;
  --background-card: #0B1A28;
  --background-card-hover: #102233;

  --gold-primary: #F2B63D;
  --gold-secondary: #D9971F;
  --gold-soft: rgba(242, 182, 61, 0.14);
  --gold-glow: rgba(242, 182, 61, 0.25);

  --text-primary: #F7F9FB;
  --text-secondary: #A6B1BC;
  --text-muted: #73808D;
  --text-on-gold: #1A1100;

  --border-default: rgba(242, 182, 61, 0.3);
  --border-subtle: rgba(255, 255, 255, 0.06);
  --border-gold: rgba(242, 182, 61, 0.55);
  --border-focus: rgba(242, 182, 61, 0.8);

  /* ——— Typography Scale ——— */
  --font-hero: clamp(48px, 6vw, 76px);
  --font-page-heading: clamp(40px, 5vw, 64px);
  --font-section-heading: clamp(32px, 4vw, 48px);
  --font-card-heading: 22px;
  --font-body: 16px;
  --font-body-lg: 18px;
  --font-small: 14px;
  --font-xs: 13px;

  --weight-light: 300;
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-extrabold: 800;

  --line-height-tight: 1.1;
  --line-height-heading: 1.2;
  --line-height-body: 1.7;
  --line-height-relaxed: 1.8;

  --letter-spacing-label: 0.12em;

  /* ——— Spacing ——— */
  --section-spacing: 120px;
  --section-spacing-sm: 80px;

  --container-max: 1360px;
  --container-pad-x: 64px;
  --container-pad-x-md: 32px;
  --container-pad-x-sm: 20px;

  --card-radius: 16px;
  --btn-radius: 8px;
  --input-radius: 8px;
  --tag-radius: 20px;

  /* ——— Shadows ——— */
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4);
  --shadow-card: 0 4px 16px rgba(0, 0, 0, 0.15);
  --shadow-card-hover: 0 12px 40px rgba(0, 0, 0, 0.35);
  --shadow-gold: 0 0 24px rgba(242, 182, 61, 0.15);

  /* ——— Transitions ——— */
  --transition-fast: 0.15s ease;
  --transition-base: 0.25s ease;
  --transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.4, 0, 0.2, 1);

  /* ——— Z-index Scale ——— */
  --z-background: -1;
  --z-default: 1;
  --z-elevated: 10;
  --z-sticky: 100;
  --z-header: 500;
  --z-overlay: 1000;
  --z-modal: 2000;
  --z-toast: 3000;
}

/* ——— Subtle radial gradient background for depth ——— */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: var(--z-background);
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(242, 182, 61, 0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 50%, rgba(242, 182, 61, 0.02) 0%, transparent 50%);
  pointer-events: none;
}

/* ——— Selection ——— */
::selection {
  background-color: rgba(242, 182, 61, 0.3);
  color: var(--text-primary);
}

/* ——— Scrollbar ——— */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--background-primary);
}

::-webkit-scrollbar-thumb {
  background: var(--background-card);
  border-radius: 4px;
  border: 1px solid var(--border-default);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--background-card-hover);
}