/*global/ rd-variables.css */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  /* Brand Colors — Orange Theme */
  --rd-primary:          #f97316;
  --rd-primary-hover:    #ea6c0a;
  --rd-primary-light:    rgba(249, 115, 22, 0.10);
  --rd-primary-border:   rgba(249, 115, 22, 0.30);

  /* Backgrounds */
  --rd-bg-page:          #f8f9fa;
  --rd-bg-card:          #ffffff;
  --rd-bg-surface:       #f1f3f5;
  --rd-bg-hover:         rgba(0, 0, 0, 0.04);

  /* Borders */
  --rd-border:           rgba(0, 0, 0, 0.09);
  --rd-border-hover:     rgba(249, 115, 22, 0.40);

  /* Text */
  --rd-text-primary:     #0f172a;
  --rd-text-secondary:   #475569;
  --rd-text-muted:       #94a3b8;
  --rd-text-accent:      #ea6c0a;

  /* Font */
  --rd-font:             'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  /* Radius */
  --rd-radius-sm:        6px;
  --rd-radius-md:        10px;
  --rd-radius-lg:        14px;
  --rd-radius-xl:        20px;
  --rd-radius-full:      9999px;

  /* Spacing */
  --rd-nav-height:       64px;
  --rd-section-pad:      clamp(32px, 5vw, 64px);
  --rd-container-pad:    clamp(1rem, 4vw, 2rem);
  --rd-card-gap:         clamp(12px, 2vw, 20px);

  /* Transitions */
  --rd-transition:       all 0.22s ease;

  /* Container Max Width */
  --rd-max-width:        1280px;
}

@media (max-width: 1024px) {
  :root {
    --rd-nav-height:     58px;
    --rd-section-pad:    clamp(24px, 4vw, 48px);
  }
}

@media (max-width: 768px) {
  :root {
    --rd-nav-height:     56px;
    --rd-section-pad:    clamp(20px, 3vw, 36px);
    --rd-container-pad:  1rem;
    --rd-card-gap:       12px;
  }
}

@media (max-width: 480px) {
  :root {
    --rd-nav-height:     52px;
    --rd-container-pad:  0.85rem;
    --rd-card-gap:       10px;
  }
}