/* ========================================
   RESPONSIVE VARIABLES & UTILITIES
   ======================================== */

:root {
  /* ===== COLOR VARIABLES ===== */
  --color-textOut: #bceb3c;
  --color-text2: #0a0a0a;
  --color-text: #fbfbfb;
  --color-bg2: #18191a;
  --color-bg: #0a0a0a;
  --color-bg3: #fbfbfb;
  --color-bg-link: #b8b4b4;
  --color-border: #222222;
  --color-shadow: rgba(0, 0, 0, 0.25);
  --color-shadow-light: rgba(0, 0, 0, 0.08);
  --color-shadow-hover: rgba(0, 0, 0, 0.18);
  --color-card-desc: #bdbdbd;

  /* ===== SPACING VARIABLES ===== */
  --page-padding: 5vw;
  --section-gap: 10vh;
  --card-gap: 2rem;
  --element-gap: 1rem;

  /* ===== FONT SIZE VARIABLES (Desktop) ===== */
  --fs-hero: clamp(4rem, 8vw, 10rem);
  --fs-hero-subtitle: clamp(1rem, 1.25rem, 1.5rem);
  --fs-heading-xl: clamp(3rem, 5vw, 6rem);
  --fs-heading-lg: clamp(2.5rem, 4vw, 5rem);
  --fs-heading-md: clamp(2rem, 3vw, 3.5rem);
  --fs-heading-sm: clamp(1.5rem, 2vw, 2rem);
  --fs-body-lg: clamp(1rem, 1.125rem, 1.25rem);
  --fs-body: clamp(0.875rem, 1rem, 1.125rem);
  --fs-body-sm: clamp(0.75rem, 0.875rem, 1rem);
  --fs-tag: clamp(0.7rem, 0.8rem, 0.9rem);
  --fs-menu: clamp(2rem, 3.5rem, 4rem);

  /* ===== SHADOW VARIABLES ===== */
  --shadow-sm: 0 2px 6px var(--color-shadow-light);
  --shadow-md: 0 4px 20px var(--color-shadow);
  --shadow-lg: 0 8px 32px var(--color-shadow-hover);
  --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.3);

  /* ===== BORDER RADIUS ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-xl: 30px;
  --radius-full: 50px;

  /* ===== TRANSITION ===== */
  --transition-fast: 0.2s ease;
  --transition-normal: 0.3s ease;
  --transition-slow: 0.5s ease;

  /* ===== LAYOUT ===== */
  --max-width: 1440px;
  --content-max-width: 1200px;
}

/* ===== TABLET BREAKPOINT (768px - 1024px) ===== */
@media screen and (max-width: 1024px) {
  :root {
    --page-padding: 4vw;
    --section-gap: 8vh;
    --card-gap: 1.5rem;
    
    --fs-hero: clamp(3rem, 7vw, 8rem);
    --fs-heading-xl: clamp(2.5rem, 4.5vw, 5rem);
    --fs-heading-lg: clamp(2rem, 3.5vw, 4rem);
    --fs-heading-md: clamp(1.75rem, 2.5vw, 3rem);
    --fs-menu: clamp(1.75rem, 3rem, 3.5rem);
  }
}

/* ===== MOBILE BREAKPOINT (481px - 768px) ===== */
@media screen and (max-width: 768px) {
  :root {
    --page-padding: 5vw;
    --section-gap: 6vh;
    --card-gap: 1.5rem;
    
    --fs-hero: clamp(2.5rem, 12vw, 6rem);
    --fs-hero-subtitle: clamp(0.9rem, 1rem, 1.125rem);
    --fs-heading-xl: clamp(2rem, 8vw, 4rem);
    --fs-heading-lg: clamp(1.75rem, 6vw, 3rem);
    --fs-heading-md: clamp(1.5rem, 5vw, 2.5rem);
    --fs-heading-sm: clamp(1.25rem, 4vw, 1.75rem);
    --fs-body-lg: clamp(0.95rem, 1rem, 1.125rem);
    --fs-body: clamp(0.85rem, 0.95rem, 1rem);
    --fs-body-sm: clamp(0.7rem, 0.8rem, 0.9rem);
    --fs-tag: clamp(0.65rem, 0.75rem, 0.85rem);
    --fs-menu: clamp(1.5rem, 2.5rem, 3rem);
  }
}

/* ===== SMALL MOBILE BREAKPOINT (max 480px) ===== */
@media screen and (max-width: 480px) {
  :root {
    --page-padding: 4vw;
    --section-gap: 5vh;
    --card-gap: 1rem;
    
    --fs-hero: clamp(2rem, 10vw, 4rem);
    --fs-hero-subtitle: clamp(0.85rem, 0.95rem, 1rem);
    --fs-heading-xl: clamp(1.75rem, 7vw, 3rem);
    --fs-heading-lg: clamp(1.5rem, 6vw, 2.5rem);
    --fs-heading-md: clamp(1.25rem, 5vw, 2rem);
    --fs-heading-sm: clamp(1.1rem, 4vw, 1.5rem);
    --fs-body-lg: clamp(0.9rem, 0.95rem, 1rem);
    --fs-body: clamp(0.8rem, 0.9rem, 0.95rem);
    --fs-body-sm: clamp(0.7rem, 0.75rem, 0.85rem);
    --fs-tag: clamp(0.6rem, 0.7rem, 0.8rem);
    --fs-menu: clamp(1.25rem, 2rem, 2.5rem);
  }
}