/* Fonts are loaded via <link> in each HTML page for parallel loading.
   See: <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?..."> */

:root {
  color-scheme: dark;

  /* ── Brand palette ───────────────────────────────────
     Change these values to recolor the entire site. */
  --color-background:           #232B32;
  --color-surface:              #2A323A;
  --color-surface-raised:       #333C45;
  --color-text:                 #eee8dc;
  --color-text-soft:            #d0cbc2;
  --color-text-subtle:          #cbc5ba;
  --color-text-muted:           #938d83;
  --color-text-on-light-muted:  #615c54;
  --color-accent:               #8c2531;
  --color-accent-strong:        #b43545;
  --color-focus:                #f2b84b;
  --color-white:                #ffffff;
  --color-cta-dark:             #0d0d0d;  /* solid dark button (booking card) */
  --color-whatsapp:             #25D366;
  --color-whatsapp-hover:       #128C7E;

  /* ── Borders ──────────────────────────────────────── */
  --color-border:               rgba(238, 232, 220, 0.18);  /* default */
  --color-border-subtle:        rgba(238, 232, 220, 0.15);  /* faint, on bands */
  --color-border-strong:        rgba(238, 232, 220, 0.44);
  --color-border-focus:         rgba(238, 232, 220, 0.68);
  --color-filter-border:        rgba(8, 8, 8, 0.18);  /* resting border of portfolio filter chips; only visible on hover */

  /* Translucent chrome surfaces */
  --color-nav-background:           rgba(35, 43, 50, 0.9);
  --color-nav-background-scrolled:  rgba(35, 43, 50, 0.97);
  --color-mobile-nav-background:    rgba(35, 43, 50, 0.98);
  --color-image-caption-background: rgba(35, 43, 50, 0.82);
  --color-arrow-background:          rgba(35, 43, 50, 0.5);   /* gallery slider arrows (frosted glass) */

  /* ── Surface-band sections ──────────────────────────
     Dark accent band used by .studio, .work, .booking, .review,
     .why, .newsletter and the blog hero. */
  --color-surface-band:           #12161A;
  --color-on-surface-band:        #eee8dc;
  --color-on-surface-band-subtle: #8a959e;

  /* ── Overlays & shadows ───────────────────────────── */
  --hero-image-overlay: linear-gradient(180deg, rgba(0, 0, 0, 0.3), transparent 36%, rgba(0, 0, 0, 0.92));
  --image-overlay-soft: linear-gradient(to top, rgba(0, 0, 0, 0.65) 10%, transparent 55%);  /* service cards on mobile */
  --shadow-floating:    0 10px 30px rgba(0, 0, 0, 0.55);

  /* ── Radii ────────────────────────────────────────── */
  --radius-sm:    2px;
  --radius-md:    4px;
  --radius-round: 50%;

  /* ── Typographic scale ──────────────────────────────
     Heading tiers used across all pages. Components reference
     these instead of ad-hoc clamp() values. */
  --text-hero:        clamp(64px, 9vw, 132px);    /* home hero h1 */
  --text-title:       clamp(75px, 10vw, 145px);   /* home booking h2 — oversized section title */
  --text-h1:          clamp(65px, 9vw, 135px);    /* article / page titles */
  --text-h2:          clamp(58px, 7vw, 100px);    /* section headings */
  --text-h2-lg:       clamp(62px, 8vw, 110px);    /* large section headings */
  --text-h2-sm:       clamp(52px, 7vw, 95px);     /* blog section headings */
  --text-h2-xs:       clamp(48px, 6vw, 85px);     /* blog compact headings */
  --text-h3:          clamp(34px, 3.2vw, 48px);   /* card / service headings */
  --text-h3-sm:       clamp(18px, 1.5vw, 22px);   /* blog featured-card titles */
  --text-small:       12px;                       /* secondary / muted text */

  --leading-h2:    0.80;
  --leading-body:  1.7;

  /* ── Fonts: update the <link> import above and these two stacks to change fonts. */
  --font-display: "DM Serif Display", Georgia, serif;
  --font-body: "DM Sans", Arial, sans-serif;

  /* ── Layout ───────────────────────────────────────── */
  --content-max: 1440px;
  --gutter-desktop: 36px;
  --gutter-mobile: 17px;
  --nav-height: 78px;
  --nav-height-mobile: 68px;
  --nav-height-scrolled: 64px;

  /* ── Motion & interaction ─────────────────────────── */
  --transition-fast:     180ms ease;
  --transition-standard: 300ms ease;
  --focus-ring: 3px solid var(--color-focus);

  /* ── Section rhythm ───────────────────────────────── */
  --section-pad-desktop: 120px;
}