/* Design tokens — premium dark · white · gold · green-gold luxury UI */

:root {
  /* ——— Backgrounds (near-black) ——— */
  --color-bg: #050506;
  --color-bg-deep: #000000;
  --color-bg-elevated: #0c0c0e;
  --color-bg-surface: #121214;
  --color-bg-muted: #18181b;
  --color-bg-header: rgba(5, 5, 6, 0.82);
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --color-overlay: rgba(0, 0, 0, 0.55);

  /* ——— Text (white scale) ——— */
  --color-text: #ffffff;
  --color-text-soft: rgba(255, 255, 255, 0.88);
  --color-text-muted: rgba(255, 255, 255, 0.62);
  --color-text-subtle: rgba(255, 255, 255, 0.42);
  --color-text-inverse: #0a0a0b;
  --color-text-on-button: #0c100c;

  /* ——— Gold accent ——— */
  --color-gold: #d4af37;
  --color-gold-soft: #e8c872;
  --color-gold-deep: #a8892a;
  --color-gold-bright: #f0d78c;
  --color-gold-glow: rgba(212, 175, 55, 0.28);
  --color-gold-muted: rgba(212, 175, 55, 0.14);

  /* ——— Noble green (pairs with gold) ——— */
  --color-green: #1f4d3a;
  --color-green-mid: #2d6b4f;
  --color-green-deep: #0f2e22;
  --color-green-soft: #3d8f6a;
  --color-green-glow: rgba(45, 107, 79, 0.35);

  /* ——— Gradient system (green → gold, no violet/pink/cyan) ——— */
  --gradient-button: linear-gradient(
    135deg,
    #163d2e 0%,
    #1f4d3a 22%,
    #2a6348 48%,
    #8a7428 78%,
    #c4a035 100%
  );
  --gradient-button-hover: linear-gradient(
    135deg,
    #1a4a38 0%,
    #286650 24%,
    #3a7d5c 50%,
    #b8962e 78%,
    #e0c05a 100%
  );
  --gradient-button-alt: linear-gradient(
    120deg,
    #0f2e22 0%,
    #245a42 40%,
    #a8892a 85%,
    #d4af37 100%
  );
  --gradient-button-soft: linear-gradient(
    135deg,
    rgba(31, 77, 58, 0.45) 0%,
    rgba(168, 137, 42, 0.28) 55%,
    rgba(212, 175, 55, 0.32) 100%
  );
  --gradient-button-sheen: linear-gradient(
    105deg,
    transparent 0%,
    transparent 35%,
    rgba(255, 248, 220, 0.22) 48%,
    rgba(232, 200, 114, 0.35) 52%,
    transparent 65%,
    transparent 100%
  );
  --gradient-hero-glow: radial-gradient(
    ellipse 80% 55% at 50% -10%,
    rgba(31, 77, 58, 0.22) 0%,
    rgba(212, 175, 55, 0.1) 38%,
    transparent 70%
  );
  --gradient-section-fade: linear-gradient(
    180deg,
    transparent 0%,
    rgba(212, 175, 55, 0.03) 50%,
    transparent 100%
  );
  --gradient-border: linear-gradient(
    135deg,
    rgba(31, 77, 58, 0.65),
    rgba(168, 137, 42, 0.55),
    rgba(212, 175, 55, 0.65)
  );

  /* ——— Typography ——— */
  --font-family-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-family-serif: "Instrument Serif", "Times New Roman", Times, serif;
  --font-family-base: var(--font-family-sans);
  --font-family-display: var(--font-family-serif);

  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-base: 1rem;
  --font-size-md: 1.125rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 2rem;
  --font-size-3xl: 2.75rem;
  --font-size-4xl: 3.5rem;
  --font-size-hero: clamp(2.5rem, 5.5vw, 4.25rem);

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

  --line-height-tight: 1.12;
  --line-height-snug: 1.3;
  --line-height-base: 1.6;
  --line-height-relaxed: 1.75;

  --letter-spacing-tight: -0.025em;
  --letter-spacing-wide: 0.04em;
  --letter-spacing-nav: 0.02em;

  /* ——— Spacing ——— */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --section-padding-y: clamp(4rem, 8vw, 7rem);
  --header-height: 4.5rem;

  /* ——— Layout ——— */
  --container-max: 1120px;
  --container-pad-x: clamp(1.25rem, 4vw, 2rem);

  /* ——— Radii ——— */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-pill: 999px;
  --radius-button: 999px;

  /* ——— Shadows (green-gold glow, not neon) ——— */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.55);
  --shadow-gold: 0 0 32px var(--color-gold-glow);
  --shadow-logo:
    0 0 12px rgba(212, 175, 55, 0.35),
    0 0 28px rgba(212, 175, 55, 0.18);
  --shadow-button:
    0 4px 18px rgba(15, 46, 34, 0.55),
    0 2px 10px rgba(212, 175, 55, 0.18);
  --shadow-button-hover:
    0 8px 28px rgba(31, 77, 58, 0.45),
    0 0 24px rgba(212, 175, 55, 0.32),
    0 0 48px rgba(212, 175, 55, 0.12);

  /* ——— Motion ——— */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;
  --transition-slow: 400ms ease;
  --transition-sheen: 650ms ease;

  /* ——— Z-index ——— */
  --z-header: 100;
  --z-overlay: 200;
}