:root {
  --container-max: 1240px;
  --container-gutter: 16px;
  --container-gutter-mobile: 12px;

  --color-brand: #09cc7e;
  --color-brand-hover: #12de8d;
  --color-brand-strong: #046b45;
  --color-brand-deep: #013334;
  --color-brand-soft: rgba(9, 204, 126, 0.14);
  --color-brand-border: rgba(9, 204, 126, 0.28);

  --gradient-hero:
    linear-gradient(115deg, rgba(1, 51, 52, 0.98) 0%, rgba(4, 107, 69, 0.88) 28%, rgba(25, 25, 25, 0.96) 62%, rgba(11, 15, 14, 0.99) 100%);
  --gradient-surface:
    linear-gradient(135deg, rgba(1, 51, 52, 0.96) 0%, rgba(5, 122, 80, 0.58) 38%, rgba(25, 25, 25, 0.98) 100%);
  --gradient-card:
    linear-gradient(145deg, rgba(1, 51, 52, 0.9) 0%, rgba(5, 122, 80, 0.3) 45%, rgba(19, 24, 23, 0.96) 100%);

  --color-bg: #191919;
  --color-surface: #202020;
  --color-surface-alt: #2a2a2a;
  --color-surface-subtle: #313131;
  --color-surface-dark: #0b0f0e;

  --color-text: #ffffff;
  --color-text-soft: #d6dede;
  --color-text-muted: #9d9d9c;
  --color-border: rgba(214, 222, 222, 0.16);
  --color-divider: rgba(214, 222, 222, 0.1);

  --radius-md: 18px;
  --radius-lg: 28px;
  --radius-xl: 38px;

  --shadow-soft: 0 12px 34px rgba(0, 0, 0, 0.12);
  --shadow-card: 0 14px 36px rgba(0, 0, 0, 0.14);
  --shadow-strong: 0 24px 64px rgba(0, 0, 0, 0.22);

  --transition-fast: 160ms ease;
  --transition-base: 180ms ease;

  --font-display: "Oxanium", "Rajdhani", sans-serif;
  --font-ui: "Rajdhani", "Inter", sans-serif;
  --font-body: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  --title-font: var(--font-display);
  --body-font: var(--font-body);
}