/* ==========================================================================
   Quiet Capital - design tokens
   Palette sampled from the brand's own assets: the dense black masthead of the
   press feature, the desaturated harbour slate in the office photography, and
   the warm golden-hour light of the skyline shot.
   ========================================================================== */

/* Metric-matched fallbacks. Without these the swap from the local serif to
   Playfair Display reflows the display headings and costs ~0.08 CLS.
   Values generated by tools/font_metrics.py from the real font files. */
@font-face {
  font-family: "Playfair Fallback";
  src: local("Georgia"), local("Times New Roman"), local("Times");
  size-adjust: 95.98%;
  ascent-override: 112.73%;
  descent-override: 26.15%;
  line-gap-override: 0%;
}

@font-face {
  font-family: "Montserrat Fallback";
  src: local("Arial"), local("Helvetica Neue"), local("Helvetica");
  size-adjust: 106.30%;
  ascent-override: 91.06%;
  descent-override: 23.61%;
  line-gap-override: 0%;
}

:root {
  /* ---- surface ---- */
  --obsidian:        #0A0C10;
  --obsidian-soft:   #0E1116;
  --ink:             #14181F;
  --ink-raised:      #191E26;
  --graphite:        #232932;
  --graphite-soft:   #2B323D;

  /* ---- accent ---- */
  --gold:            #C9A44C;
  --gold-lit:        #EBD08A;
  --gold-deep:       #8A6E28;
  --harbor:          #7A94A7;
  --harbor-deep:     #4D6375;

  /* ---- light surfaces ---- */
  --ivory:           #F6F3EC;
  --ivory-deep:      #EDE8DD;
  --paper:           #FFFFFF;

  /* ---- type ---- */
  --text-on-dark:    #EFEAE1;
  --muted-on-dark:   #9AA3AE;
  --faint-on-dark:   #6B7480;
  --text-on-light:   #14181F;
  --muted-on-light:  #5A6470;

  /* ---- utility ---- */
  --whatsapp:        #25D366;
  --whatsapp-deep:   #128C7E;
  --danger:          #D2635B;
  --success:         #4E9E6A;

  /* ---- alpha helpers ---- */
  --gold-a08:  rgba(201, 164, 76, .08);
  --gold-a14:  rgba(201, 164, 76, .14);
  --gold-a24:  rgba(201, 164, 76, .24);
  --gold-a40:  rgba(201, 164, 76, .40);
  --white-a06: rgba(255, 255, 255, .06);
  --white-a10: rgba(255, 255, 255, .10);
  --white-a16: rgba(255, 255, 255, .16);

  /* ---- typography ---- */
  --font-display: "Playfair Display", "Playfair Fallback", Georgia, "Times New Roman", serif;
  --font-ui: "Montserrat", "Montserrat Fallback", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, sans-serif;

  --step--1: clamp(.82rem, .79rem + .14vw, .89rem);
  --step-0:  clamp(1rem, .97rem + .16vw, 1.0625rem);
  --step-1:  clamp(1.13rem, 1.07rem + .3vw, 1.3rem);
  --step-2:  clamp(1.35rem, 1.24rem + .55vw, 1.7rem);
  --step-3:  clamp(1.65rem, 1.44rem + 1.05vw, 2.35rem);
  --step-4:  clamp(2rem, 1.62rem + 1.9vw, 3.2rem);
  --step-5:  clamp(2.45rem, 1.7rem + 3.7vw, 4.6rem);
  --step-6:  clamp(2.6rem, 1.75rem + 4.1vw, 4.5rem);

  --lh-tight: 1.08;
  --lh-snug: 1.28;
  --lh-body: 1.72;
  --measure: 68ch;

  /* ---- space (4px base) ---- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.75rem; --sp-8: 3.5rem;
  --sp-9: 5rem;    --sp-10: 7rem;   --sp-11: 9.5rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --gutter: clamp(1.25rem, .6rem + 2.4vw, 3rem);
  --mobile-bar-h: 78px;   /* measured height of the sticky call/WhatsApp bar */
  --shell: 1240px;
  --shell-narrow: 860px;

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

  /* ---- layered shadows: always a stack, never a single blur ---- */
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .28), 0 2px 6px rgba(0, 0, 0, .18);
  --shadow-2: 0 1px 2px rgba(0, 0, 0, .28), 0 8px 24px rgba(0, 0, 0, .22),
              0 32px 64px -24px rgba(0, 0, 0, .45);
  --shadow-3: 0 2px 4px rgba(0, 0, 0, .34), 0 14px 38px rgba(0, 0, 0, .3),
              0 52px 96px -32px rgba(0, 0, 0, .58);
  --shadow-gold: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px -8px rgba(201, 164, 76, .34),
                 0 26px 60px -30px rgba(201, 164, 76, .3);
  --inner-lift: inset 0 1px 0 rgba(255, 255, 255, .08);

  /* ---- glass ---- */
  --glass-dark: rgba(20, 24, 31, .62);
  --glass-darker: rgba(10, 12, 16, .78);
  --glass-blur: blur(18px) saturate(1.4);

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-io: cubic-bezier(.65, 0, .35, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --t-micro: 160ms;
  --t-base: 260ms;
  --t-enter: 420ms;
  --t-hero: 900ms;

  /* ---- z-index scale ---- */
  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 20;
  --z-header: 40;
  --z-dropdown: 300;
  --z-overlay: 900;
  --z-modal: 999;
  --z-toast: 9999;
}

/* Honour the OS preference. The site is dark by design; this only removes
   motion, never contrast. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --t-micro: .01ms;
    --t-base: .01ms;
    --t-enter: .01ms;
    --t-hero: .01ms;
  }
}