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

:root {
  /* === Backgrounds === */
  --bg-primary:    #0F0F0F;
  --bg-surface:    #1A1A1A;
  --bg-surface-2:  #252525;
  --bg-nav:        rgba(15, 15, 15, 0.94);

  /* === Brand Colors === */
  --color-primary:   #E8860A;
  --color-secondary: #C84B31;
  --color-accent:    #F5C842;

  /* === Text === */
  --text-primary:   #FFF5E4;
  --text-secondary: #B8A89A;
  --text-muted:     #7A6A60;

  /* === Borders === */
  --border-subtle: rgba(255, 245, 228, 0.07);
  --border-hover:  rgba(232, 134, 10, 0.35);

  /* === Typography === */
  --font-heading: 'Karla', system-ui, -apple-system, sans-serif;
  --font-body:    'Karla', system-ui, -apple-system, sans-serif;

  /* === Type Scale === */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;

  /* === Spacing === */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-8:  32px;
  --sp-10: 40px;
  --sp-12: 48px;
  --sp-16: 64px;
  --sp-20: 80px;

  /* === Border Radius === */
  --radius-sm:   6px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-pill: 9999px;

  /* === Shadows === */
  --shadow-card:       0 2px 12px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 8px 32px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(232, 134, 10, 0.25);
  --shadow-modal:      0 24px 80px rgba(0, 0, 0, 0.85);

  /* === Transitions === */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

  /* === Z-index Scale === */
  --z-card:          10;
  --z-nav:           100;
  --z-modal-overlay: 200;
  --z-modal:         300;
  --z-tooltip:       400;

  /* === Layout === */
  --nav-height:      56px;
  --content-max:     1280px;
  --section-padding: var(--sp-12) var(--sp-4);
}

@media (min-width: 768px) {
  :root {
    --nav-height:      60px;
    --section-padding: var(--sp-16) var(--sp-6);
  }
}

@media (min-width: 1024px) {
  :root {
    --section-padding: var(--sp-20) var(--sp-10);
  }
}