/* =========================================
   Aurumwood Design System
   ========================================= */

:root {

  /* ==================================================
     BRAND RAW COLORS
  ================================================== */

  --brand-gold-100: #ca942c33; /* 20% прозрачность */
  --brand-gold-500: #ca942c;

  --brand-brown-600: #634626;
  --brand-brown-800: #33271a;
  --brand-brown-800-20: #33271a33;

  --brand-black: #000000;
  --brand-white: #ffffff;

  /* Градиент фона */
  --brand-gradient-start: #F9FAFA;
  --brand-gradient-end: #F1F2F4;

  /* ==================================================
     SEMANTIC COLORS
  ================================================== */

  /* Background */
  --color-bg-primary: linear-gradient(
    180deg,
    var(--brand-gradient-start) 0%,
    var(--brand-gradient-end) 100%
  );

  --color-bg-dark: var(--brand-brown-800);
  --color-bg-overlay: var(--brand-brown-800-20);

  /* Text */
  --color-text-primary: var(--brand-brown-800);
  --color-text-secondary: var(--brand-brown-600);
  --color-text-light: var(--brand-white);

  /* Accent */
  --color-accent: var(--brand-gold-500);
  --color-accent-soft: var(--brand-gold-100);
  --color-accent-hover: #b58325; /* вычисленный hover */

  /* Border */
  --color-border-light: var(--brand-gold-100);

  /* Buttons */
  --color-button-primary-bg: var(--color-accent);
  --color-button-primary-text: var(--brand-white);

  --color-button-dark-bg: var(--brand-brown-800);
  --color-button-dark-text: var(--brand-white);

  /* ==================================================
     TYPOGRAPHY
  ================================================== */

  --font-family-primary: "Inter", sans-serif;

  --font-size-xs: 12px;
  --font-size-sm: 14px;
  --font-size-md: 16px;
  --font-size-lg: 20px;
  --font-size-xl: 32px;
  --font-size-xxl: 48px;
  --font-size-banner:80px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  /* ==================================================
     SPACING (8px system)
  ================================================== */

  --space-xxs: 4px;
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 24px;
  --space-lg: 32px;
  --space-xl: 48px;
  --space-xxl: 64px;

  /* ==================================================
     LAYOUT
  ================================================== */

  --container-max-width: 1440px;
  --container-padding: 24px;

  /* ==================================================
     RADIUS
  ================================================== */

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;

  /* ==================================================
     SHADOWS
  ================================================== */

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.12);

  /* ==================================================
     TRANSITIONS
  ================================================== */

  --transition-fast: 0.2s ease;
  --transition-base: 0.3s ease;
  --transition-slow: 0.5s ease;
}


/* ==================================================
   Responsive tokens
================================================== */

@media (max-width: 1024px) {
  :root {
    --font-size-xxl: 40px;
    --font-size-xl: 28px;
    --container-padding: 20px;
  }
}

@media (max-width: 768px) {
  :root {
    --font-size-xxl: 32px;
    --font-size-xl: 24px;
    --container-padding: 16px;
  }
}