/* ==========================================================================
   ACE ARTE — variables.css
   Single source of truth for colour, spacing, radius, shadow and motion.
   Change a value here and it propagates across the whole site.
   ========================================================================== */

:root {
  /* ---- Brand palette ---------------------------------------------------- */
  --clr-primary: #0f172a;          /* midnight — backgrounds, headings      */
  --clr-primary-800: #16203a;      /* raised dark surface                   */
  --clr-primary-700: #1e2a46;      /* dark borders / hairlines              */
  --clr-secondary: #c6a86b;        /* muted gold — text accents, rules      */
  --clr-accent: #d4af37;           /* bright gold — CTAs, active states      */
  --clr-white: #ffffff;
  --clr-light: #f8f9fa;            /* light section background              */
  --clr-border: #e5e7eb;

  /* ---- Derived tints (kept as tokens so nothing is hard-coded) ---------- */
  --clr-ink: #101827;              /* body copy on light                    */
  --clr-muted: #5b6472;            /* secondary copy on light               */
  --clr-muted-dark: #a9b2c3;       /* secondary copy on dark                */
  --clr-gold-soft: rgba(198, 168, 107, 0.14);
  --clr-gold-line: rgba(198, 168, 107, 0.38);
  --clr-glass: rgba(255, 255, 255, 0.07);
  --clr-glass-strong: rgba(255, 255, 255, 0.12);
  --clr-glass-border: rgba(255, 255, 255, 0.16);
  --clr-overlay-1: rgba(9, 14, 26, 0.78);
  --clr-overlay-2: rgba(9, 14, 26, 0.35);
  --clr-success: #1f7a4d;
  --clr-danger: #b3261e;

  /* ---- Gradients -------------------------------------------------------- */
  --grad-gold: linear-gradient(135deg, #d4af37 0%, #c6a86b 55%, #e7cd8a 100%);
  --grad-hero: linear-gradient(
    180deg,
    rgba(9, 14, 26, 0.82) 0%,
    rgba(9, 14, 26, 0.48) 42%,
    rgba(9, 14, 26, 0.92) 100%
  );
  --grad-dark: linear-gradient(180deg, #0f172a 0%, #0b1120 100%);

  /* ---- Typography ------------------------------------------------------- */
  --font-display: "Playfair Display", "Times New Roman", serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-ui: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fs-hero: clamp(2.75rem, 7.2vw, 6.5rem);
  --fs-h1: clamp(2.25rem, 4.6vw, 3.9rem);
  --fs-h2: clamp(1.9rem, 3.6vw, 3rem);
  --fs-h3: clamp(1.35rem, 2.1vw, 1.85rem);
  --fs-h4: clamp(1.1rem, 1.5vw, 1.3rem);
  --fs-lead: clamp(1.02rem, 1.25vw, 1.18rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-eyebrow: 0.72rem;

  --lh-tight: 1.06;
  --lh-heading: 1.16;
  --lh-body: 1.72;
  --ls-eyebrow: 0.26em;
  --ls-display: -0.015em;

  /* ---- Spacing scale ---------------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 3rem;
  --sp-8: 4rem;
  --sp-9: 6rem;
  --sp-10: 8rem;
  --section-y: clamp(4.5rem, 9vw, 8.5rem);
  --container-max: 1240px;
  --container-pad: clamp(1.15rem, 4vw, 2.5rem);

  /* ---- Radius ----------------------------------------------------------- */
  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* ---- Elevation -------------------------------------------------------- */
  --sh-xs: 0 1px 2px rgba(15, 23, 42, 0.06);
  --sh-sm: 0 6px 18px rgba(15, 23, 42, 0.07);
  --sh-md: 0 14px 40px rgba(15, 23, 42, 0.1);
  --sh-lg: 0 28px 70px rgba(15, 23, 42, 0.14);
  --sh-gold: 0 18px 44px rgba(198, 168, 107, 0.28);

  /* ---- Motion ----------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.2s;
  --dur-base: 0.4s;
  --dur-slow: 0.8s;

  /* ---- Layout chrome ---------------------------------------------------- */
  --header-h: 84px;
  --header-h-sm: 68px;
  --z-header: 1000;
  --z-float: 1010;
  --z-modal: 1080;

  /* ---- Bootstrap 5.3 bridge -------------------------------------------- */
  --bs-body-font-family: var(--font-body);
  --bs-body-color: var(--clr-ink);
  --bs-body-bg: var(--clr-white);
  --bs-primary: var(--clr-primary);
  --bs-border-color: var(--clr-border);
  --bs-link-color: var(--clr-primary);
  --bs-link-hover-color: var(--clr-accent);
  --bs-focus-ring-color: rgba(212, 175, 55, 0.45);
}

/* Sections that sit on the dark surface re-map a few tokens instead of
   overriding dozens of individual rules. */
.theme-dark {
  --clr-ink: var(--clr-white);
  --clr-muted: var(--clr-muted-dark);
  --clr-border: var(--clr-primary-700);
  background: var(--grad-dark);
  color: var(--clr-white);
}