/* ==========================================================================
   Royal Calapani Estates — design tokens
   The single source of truth for colour, type and spacing.
   Hand this file to the web developer and the print designer both.
   v1.1 — 16 September 2026
   ========================================================================== */

:root {
  /* --- Core palette ----------------------------------------------------- */
  --rce-green:        #0E3B2E;  /* Halcon Green  — primary brand colour     */
  --rce-green-deep:   #08271E;  /* Deep Forest   — footers, overlays        */
  --rce-green-soft:   #1B5242;  /* Canopy        — hover, borders on green  */

  --rce-gold:         #B08D4F;  /* Estate Gold   — rules, accents, crest    */
  --rce-gold-light:   #C9AA71;  /* Light Gold    — hover on dark            */
  --rce-gold-deep:    #8A6C39;  /* Antique Gold  — gold text on ivory       */

  --rce-ivory:        #F4F0E6;  /* Rice Ivory    — the page                 */
  --rce-white:        #FBF9F4;  /* Warm White    — cards on ivory           */
  --rce-ink:          #10150F;  /* Deep Ink      — body text                */
  --rce-stone:        #8C8A7E;  /* River Stone   — captions, meta, disabled */
  --rce-line:         #DCD5C6;  /* Hairline      — dividers on ivory        */

  /* Fixed pair — NEVER redefined by the dark theme. Use these for anything that
     is light-on-dark by construction: the masthead, hero overlays, the footer.
     --rce-ivory flips to a dark value under the dark theme; these do not.       */
  --rce-on-dark:      #F4F0E6;  /* text/marques sitting on green or a photo  */
  --rce-on-dark-mute: #A9B5AC;  /* secondary text in those same places       */

  /* --- Semantic --------------------------------------------------------- */
  --rce-bg:            var(--rce-ivory);
  --rce-bg-alt:        var(--rce-white);
  --rce-bg-invert:     var(--rce-green);
  --rce-text:          var(--rce-ink);
  --rce-text-muted:    var(--rce-stone);
  --rce-text-invert:   var(--rce-on-dark);
  --rce-accent:        var(--rce-gold);
  --rce-accent-text:   var(--rce-gold-deep);   /* gold TYPE on ivory: use this
                                                  one — --rce-gold fails
                                                  contrast at body sizes */
  --rce-border:        var(--rce-line);

  /* --- Typefaces -------------------------------------------------------- */
  /* Cinzel        — display only. CAPS ALWAYS. Never set lowercase.        */
  /* Cormorant Gr. — long-form reading, pull quotes, prices.                */
  /* Inter         — eyebrows, labels, buttons, nav, tables, forms, legal.  */
  --rce-font-display: "Cinzel", "Trajan Pro", Georgia, serif;
  --rce-font-serif:   "Cormorant Garamond", Garamond, Georgia, serif;
  --rce-font-sans:    "Inter", -apple-system, "Segoe UI", Helvetica, sans-serif;

  /* --- Type scale (desktop; clamp() handles the rest) ------------------- */
  --rce-size-hero:    clamp(2.6rem, 6vw, 5.0rem);   /* Cinzel, tracked      */
  --rce-size-h1:      clamp(2.1rem, 4.4vw, 3.4rem);
  --rce-size-h2:      clamp(1.6rem, 3vw, 2.3rem);
  --rce-size-h3:      1.35rem;
  --rce-size-lead:    clamp(1.15rem, 1.6vw, 1.45rem); /* Cormorant          */
  --rce-size-body:    1.125rem;                       /* Cormorant 18px     */
  --rce-size-ui:      0.9375rem;                      /* Inter 15px         */
  --rce-size-eyebrow: 0.75rem;                        /* Inter, tracked caps*/
  --rce-size-legal:   0.8125rem;

  /* --- Tracking. The whole identity lives here. ------------------------- */
  --rce-track-display: 0.14em;   /* Cinzel headings                          */
  --rce-track-wide:    0.42em;   /* "E S T A T E S" and section rules        */
  --rce-track-eyebrow: 0.22em;   /* Inter caps eyebrows                      */
  --rce-track-body:    0;

  --rce-leading-tight: 1.15;
  --rce-leading-body:  1.62;

  /* --- Space (8pt grid) -------------------------------------------------- */
  --rce-s1: 0.5rem;  --rce-s2: 1rem;   --rce-s3: 1.5rem;  --rce-s4: 2rem;
  --rce-s5: 3rem;    --rce-s6: 4rem;   --rce-s7: 6rem;    --rce-s8: 8rem;
  --rce-measure: 68ch;          /* never run body text wider than this      */
  --rce-gutter:  clamp(1.25rem, 5vw, 5rem);
  --rce-max:     1280px;

  /* --- Form ------------------------------------------------------------- */
  --rce-radius: 2px;            /* essentially square. Luxury is not round. */
  --rce-radius-none: 0;
  --rce-hairline: 1px solid var(--rce-border);
  --rce-hairline-gold: 1px solid var(--rce-gold);
  --rce-shadow: 0 1px 2px rgba(16, 21, 15, .04), 0 8px 24px rgba(16, 21, 15, .06);
  --rce-ease: cubic-bezier(.22, .61, .36, 1);
  --rce-dur: 420ms;
}

/* Dark sections invert the tokens rather than redefining components. */
.rce-invert {
  --rce-bg: var(--rce-green);
  --rce-bg-alt: var(--rce-green-deep);
  --rce-text: var(--rce-on-dark);
  --rce-text-muted: var(--rce-on-dark-mute);
  --rce-border: var(--rce-green-soft);
  --rce-accent-text: var(--rce-gold-light);
  background: var(--rce-bg);
  color: var(--rce-text);
}

/* ==========================================================================
   Base
   ========================================================================== */
body {
  margin: 0;
  background: var(--rce-bg);
  color: var(--rce-text);
  font-family: var(--rce-font-serif);
  font-size: var(--rce-size-body);
  line-height: var(--rce-leading-body);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .rce-display {
  font-family: var(--rce-font-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--rce-track-display);
  line-height: var(--rce-leading-tight);
  margin: 0 0 var(--rce-s3);
}
h1 { font-size: var(--rce-size-h1); }
h2 { font-size: var(--rce-size-h2); }
h3 { font-size: var(--rce-size-h3); font-weight: 400; }

p { max-width: var(--rce-measure); margin: 0 0 var(--rce-s3); }
.rce-lead { font-size: var(--rce-size-lead); color: var(--rce-text); }

.rce-eyebrow {
  font-family: var(--rce-font-sans);
  font-size: var(--rce-size-eyebrow);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--rce-track-eyebrow);
  color: var(--rce-accent-text);
  margin: 0 0 var(--rce-s2);
}

/* The house divider: hairline, gold lozenge, hairline. */
.rce-rule {
  display: flex; align-items: center; gap: var(--rce-s2);
  color: var(--rce-gold); margin: var(--rce-s4) 0;
}
.rce-rule::before, .rce-rule::after {
  content: ""; flex: 1; height: 1px; background: currentColor; opacity: .55;
}
.rce-rule::marker { content: none; }
.rce-lozenge { width: 7px; height: 7px; background: currentColor; transform: rotate(45deg); }

a { color: var(--rce-accent-text); text-decoration: none;
    border-bottom: 1px solid currentColor; transition: opacity var(--rce-dur) var(--rce-ease); }
a:hover { opacity: .65; }

/* Buttons: two only. A filled green primary and a hairline secondary. */
.rce-btn {
  display: inline-block; font-family: var(--rce-font-sans);
  font-size: var(--rce-size-eyebrow); font-weight: 500;
  text-transform: uppercase; letter-spacing: var(--rce-track-eyebrow);
  padding: 1.05em 2.4em; border-radius: var(--rce-radius);
  border: 1px solid var(--rce-green); background: var(--rce-green);
  color: var(--rce-on-dark); cursor: pointer;
  transition: background var(--rce-dur) var(--rce-ease),
              color var(--rce-dur) var(--rce-ease);
}
.rce-btn:hover { background: var(--rce-green-soft); border-color: var(--rce-green-soft); }
.rce-btn--ghost { background: transparent; color: var(--rce-green); border-color: var(--rce-gold); }
.rce-btn--ghost:hover { background: var(--rce-gold); color: var(--rce-on-dark); }
.rce-invert .rce-btn--ghost { color: var(--rce-on-dark); }

.rce-wrap { max-width: var(--rce-max); margin-inline: auto; padding-inline: var(--rce-gutter); }
.rce-section { padding-block: clamp(3rem, 8vw, var(--rce-s8)); }

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}


/* --------------------------------------------------------------------------
   Dark theme. The brand already owns a dark world (Halcon Green), so the dark
   palette is that world rather than an inversion of the ivory one.
   Three states: no stamp (system), [data-theme="dark"], [data-theme="light"].
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --rce-bg:          #071F18;
    --rce-bg-alt:      #0C2C23;
    --rce-text:        #ECE7DA;
    --rce-text-muted:  #9DACA2;
    --rce-accent-text: var(--rce-gold-light);
    --rce-border:      #1B4437;
    --rce-line:        #1B4437;
    --rce-white:       #0C2C23;
    --rce-ivory:       #071F18;
  }
}
:root[data-theme="dark"] {
  --rce-bg:          #071F18;
  --rce-bg-alt:      #0C2C23;
  --rce-text:        #ECE7DA;
  --rce-text-muted:  #9DACA2;
  --rce-accent-text: var(--rce-gold-light);
  --rce-border:      #1B4437;
  --rce-line:        #1B4437;
  --rce-white:       #0C2C23;
  --rce-ivory:       #071F18;
}