/* ==========================================================================
   Design tokens — Clarens Mountain Estate
   --------------------------------------------------------------------------
   Every value here was extracted from the Claude Design source
   (`*.dc.html`), with the usage count that justified promoting it to a token.
   Nothing is invented. If a value looks odd, it is odd in the source too, and
   is annotated as such.

   Naming: --cme-<group>-<role>. Groups are gold / sand / ink / text.
   ========================================================================== */

:root {

  /* --- Accent: gold ------------------------------------------------------ */
  --cme-gold:            #C9A96E;  /* 182x — the primary accent */
  --cme-gold-dark:       #7E612E;  /*  41x — headings, footer rules */
  --cme-gold-light:      #D8BC85;  /*  15x — hover state of the gold button */
  --cme-gold-pale:       #E4D5B9;  /*   7x */
  --cme-gold-warm:       #D8B87A;  /*   3x — hero eyebrow */
  --cme-gold-muted:      #706451;  /*  18x — small uppercase labels */
  --cme-gold-faint:      #706555;  /*   6x — footer meta */

  /* The source contains #C9AA6E (10x) alongside #C9A96E (182x). They differ by
     one step in the green channel and are visually identical — almost certainly
     a typo that propagated. Kept as its own token so the conversion stays
     faithful; safe to collapse into --cme-gold once confirmed with the client. */
  --cme-gold-alt:        #C9AA6E;

  /* --- Light grounds: sand & cream --------------------------------------- */
  --cme-sand:            #ECE4D3;  /* 20x — default page ground */
  --cme-sand-deep:       #E4DAC5;  /* homepage gallery ground */
  --cme-cream:           #F7F2E6;  /* footer ground (authored as rgb(247,242,230)) */
  --cme-off-white:       #F4EDE2;  /* 98x — text/logo on dark grounds */
  --cme-parchment:       #EADFCE;  /* 26x — body copy on dark */
  --cme-cream-head:      #F7F1E6;  /*  7x — display headings on dark */
  --cme-cream-soft:      #F3F1EC;  /*  4x */
  --cme-white:           #FFFFFF;  /* 52x */

  /* --- Dark grounds: ink ------------------------------------------------- */
  --cme-ink:             #14110C;  /* 29x — primary dark section ground */
  --cme-ink-head:        #211D16;  /* 88x — headings on light grounds */
  --cme-ink-soft:        #2B2620;  /* 21x — hover of the dark button */
  --cme-ink-deep:        #0B0906;  /* 18x — footer base bar */
  --cme-ink-panel:       #1C1811;  /* the security feature panel */
  --cme-ink-neutral:     #141414;  /* 32x — gallery tile backing */
  --cme-ink-900:         #100E0B;  /* 13x */
  --cme-ink-850:         #171310;  /*  9x */
  --cme-ink-800:         #191917;  /*  7x */
  --cme-ink-table-head:  #1A1A18;  /*  7x — price-list header row */
  --cme-ink-950:         #0C0A06;  /*  6x — mobile menu gradient stop */
  --cme-ink-menu-a:      #191510;  /*  6x — mobile menu gradient stop */
  --cme-ink-menu-b:      #131009;  /*  6x — mobile menu gradient stop */
  --cme-ink-label:       #2E2A22;  /*  3x — stat captions */

  /* --- Text ------------------------------------------------------------- */
  --cme-body:            #5C544A;  /* 57x — body copy on light */
  --cme-body-dark:       #C8BFB0;  /* 33x — body copy on dark */
  --cme-body-alt:        #5C554E;  /* 12x — near-duplicate of --cme-body */
  --cme-footer-text:     #3A342A;  /*  6x */
  --cme-text-muted:      #8E8A84;  /*  5x */
  --cme-text-faint:      #9C9C9A;  /*  3x */
  --cme-ink-input:       #0A0A0A;  /* 18x — form field text */

  /* --- Borders & fields -------------------------------------------------- */
  --cme-border-light:    #DDD7CB;  /*  9x — table cell rules */
  --cme-border-field:    #E3DDD3;  /*  4x — input borders */
  --cme-rule-gold-22:    rgba(154, 118, 56, .22);
  --cme-rule-gold-24:    rgba(154, 118, 56, .24);
  --cme-rule-gold-16:    rgba(201, 170, 110, .16);
  --cme-rule-gold-20:    rgba(201, 169, 110, .2);

  /* --- Status (stand availability) --------------------------------------- */
  --cme-status-available: #7C8A5A;              /*  6x — the green accent */
  --cme-status-pulse:     rgba(120, 180, 110, .6);
  --cme-status-pending:   rgba(206, 164, 74, .6);

  /* --- Typeface --------------------------------------------------------- */
  /* Montserrat 189x (body/UI), Cormorant Garamond 149x (display). */
  --cme-font-body:    'Montserrat', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cme-font-display: 'Cormorant Garamond', ui-serif, Georgia, 'Times New Roman', serif;

  /* --- Tracking --------------------------------------------------------- */
  --cme-track-eyebrow:  .22em;   /* 41x — section eyebrows */
  --cme-track-label:    .26em;   /* 24x — small uppercase labels */
  --cme-track-button:   .2em;    /* 15x */
  --cme-track-caps:     .14em;   /* 14x */
  --cme-track-cta:      .16em;   /* 12x */
  --cme-track-th:       .18em;   /*  8x — table headers */
  --cme-track-wide:     .35em;   /*  5x */
  --cme-track-display:  -.01em;  /* 37x — display headings, optical tightening */
  --cme-track-body:     .01em;   /* 37x */
  --cme-track-tight:    .005em;  /* 12x */
  --cme-track-nav:      clamp(.06em, .15vw, .15em);   /* 36x — desktop nav */
  --cme-track-navcta:   clamp(.08em, .15vw, .17em);   /*  6x — nav CTA button */

  /* --- Page rhythm ------------------------------------------------------ */
  /* The source repeats these clamps on nearly every section. */
  --cme-gutter:         clamp(24px, 6vw, 110px);
  --cme-gutter-wide:    clamp(24px, 6.5vw, 150px);   /* header / hero */
  --cme-gutter-narrow:  clamp(24px, 5vw, 96px);
  --cme-section-y:      clamp(80px, 11vw, 150px);
  --cme-measure:        1360px;                      /* dominant content max-width */
  --cme-measure-wide:   1440px;                      /* footer */

  /* --- Motion ----------------------------------------------------------- */
  --cme-ease:        cubic-bezier(.16, 1, .3, 1);
  --cme-ease-reveal: cubic-bezier(.2, .7, .2, 1);

  /* --- Breakpoints (documentation only; @media cannot read custom props) ---
     Authoritative values, taken from the design's applyReflow()/applyNavMode():
       phone   <= 767px
       tablet  <= 1024px
       nav switches to the burger below 900px
     These three numbers are the design's responsive contract. Do not change one
     without checking 02-layout.css, which encodes all of them. */
}

/* Honour the OS "reduce motion" setting. The design animates heavily — marquee,
   reveals, tilt, aurora, sweep, count-ups — and all of it is decorative. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --cme-ease: linear;
    --cme-ease-reveal: linear;
  }
}