/* RiNo Retreat — compiled site stylesheet */

/* === tokens/fonts.css === */
/* Brand fonts: Avenir (sans) + Brittany Signature (script accents).
   Both ship as real webfonts — no substitutes. Avenir weight mapping:
   Light 300 · Book 400 · Regular 500 · Medium 600 · Heavy 700/800 · Black 900 */

@font-face { font-family:'Avenir'; src:url('../assets/fonts/avenir/Avenir-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:'Avenir'; src:url('../assets/fonts/avenir/Avenir-Book.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Avenir'; src:url('../assets/fonts/avenir/Avenir-Regular.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Avenir'; src:url('../assets/fonts/avenir/Avenir-Medium.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Avenir'; src:url('../assets/fonts/avenir/Avenir-Heavy.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:'Avenir'; src:url('../assets/fonts/avenir/Avenir-Heavy.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face { font-family:'Avenir'; src:url('../assets/fonts/avenir/Avenir-Black.ttf') format('truetype'); font-weight:900; font-style:normal; font-display:swap; }


@font-face {
  font-family: 'Brittany Signature';
  src: url('../assets/fonts/BrittanySignatureScript.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* === tokens/colors.css === */
/* RiNo Retreat — Color tokens
   New "locked-in" palette (2026 refresh). Warm, editorial, boutique-urban. */

:root {
  /* ---- Base palette (named swatches) ---- */
  --rr-ink:          #171717; /* primary text / near-black */
  --rr-gallery-white:#F6F2EC; /* main background — warm off-white */
  --rr-warm-stone:   #D8CFC4; /* secondary background */
  --rr-concrete:     #B9B0A7; /* neutral UI / borders */
  --rr-brick:        #A14F38; /* primary CTA / warmth */
  --rr-oxide-red:    #8E3F32; /* secondary accent / CTA hover */
  --rr-deep-teal:    #1D3332; /* brand anchor */

  /* ---- Extended tints & shades (derived, harmonious) ---- */
  --rr-ink-80:       #45403c; /* softened ink for secondary text */
  --rr-ink-60:       #6f6963; /* muted text */
  --rr-pure-white:   #FFFFFF;
  --rr-card-white:   #FCFAF6; /* raised card surface, a hair lighter than page */
  --rr-stone-50:     #ECE6DD; /* hairline fills / hover wash */
  --rr-brick-tint:   #EBD9D0; /* brick @ ~12% on stone — soft warmth wash */
  --rr-teal-tint:    #D5DEDB; /* teal wash */
  --rr-teal-90:      #142625; /* deep-teal pressed */
  --rr-brick-90:     #8C4530; /* brick pressed */

  /* ---- Semantic aliases (use these in components) ---- */
  --text-primary:    var(--rr-ink);
  --text-secondary:  var(--rr-ink-80);
  --text-muted:      var(--rr-ink-60);
  --text-on-dark:    var(--rr-gallery-white);
  --text-on-brand:   var(--rr-gallery-white);

  --surface-page:    var(--rr-gallery-white);
  --surface-card:    var(--rr-card-white);
  --surface-raised:  var(--rr-pure-white);
  --surface-secondary:var(--rr-warm-stone);
  --surface-wash:    var(--rr-stone-50);
  --surface-brand:   var(--rr-deep-teal);
  --surface-inverse: var(--rr-ink);

  --border-default:  var(--rr-concrete);
  --border-subtle:   var(--rr-stone-50);
  --border-strong:   var(--rr-ink);

  --brand:           var(--rr-deep-teal);
  --brand-hover:     var(--rr-teal-90);

  --cta:             var(--rr-brick);
  --cta-hover:       var(--rr-oxide-red);
  --cta-pressed:     var(--rr-brick-90);

  --accent:          var(--rr-oxide-red);

  --focus-ring:      var(--rr-brick);
}

/* === tokens/typography.css === */
/* RiNo Retreat — Typography tokens */

:root {
  /* ---- Families ---- */
  /* Primary brand sans — the real Avenir webfont. Used for headings AND body. */
  --font-sans:    'Avenir', 'Avenir Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font-sans);
  /* Signature script — the real Brittany Signature webfont. Accent only — never body. */
  --font-script:  'Brittany Signature', 'Snell Roundhand', cursive;

  /* ---- Weights ---- */
  --weight-light:    300;
  --weight-regular:  400;
  --weight-semibold: 600;
  --weight-bold:     700;
  --weight-extra:    800;
  --weight-black:    900;

  /* ---- Type scale (display-forward, boutique editorial) ---- */
  --text-display:   clamp(2.75rem, 5vw, 4.25rem); /* hero — 44–68px */
  --text-h1:        2.5rem;   /* 40px */
  --text-h2:        2rem;     /* 32px */
  --text-h3:        1.5rem;   /* 24px */
  --text-h4:        1.25rem;  /* 20px */
  --text-body-lg:   1.125rem; /* 18px */
  --text-body:      1rem;     /* 16px */
  --text-body-sm:   0.875rem; /* 14px */
  --text-caption:   0.75rem;  /* 12px */
  --text-overline:  0.6875rem;/* 11px — tracked label */

  /* ---- Line heights ---- */
  --leading-tight:  1.05;
  --leading-snug:   1.2;
  --leading-normal: 1.5;
  --leading-relaxed:1.65;

  /* ---- Letter spacing ----
     The brand voice leans on ALL-CAPS, wide-tracked labels & buttons. */
  --tracking-tight:  -0.02em;
  --tracking-normal: 0;
  --tracking-wide:   0.08em;
  --tracking-wider:  0.16em;  /* overlines / eyebrow labels */
  --tracking-button: 0.12em;  /* CTA button text */
}

/* === tokens/spacing.css === */
/* RiNo Retreat — Spacing, radii, shadows, layout tokens */

:root {
  /* ---- Spacing scale (4px base) ---- */
  --space-0:  0;
  --space-1:  0.25rem;  /* 4 */
  --space-2:  0.5rem;   /* 8 */
  --space-3:  0.75rem;  /* 12 */
  --space-4:  1rem;     /* 16 */
  --space-5:  1.5rem;   /* 24 */
  --space-6:  2rem;     /* 32 */
  --space-7:  2.5rem;   /* 40 */
  --space-8:  3rem;     /* 48 */
  --space-9:  4rem;     /* 64 */
  --space-10: 5rem;     /* 80 */
  --space-12: 7.5rem;   /* 120 */

  /* ---- Radii ----
     Boutique-architectural: near-rectangular buttons, gently rounded cards,
     fully-rounded pills/chips. */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   14px;
  --radius-xl:   22px;
  --radius-pill: 999px;

  /* ---- Borders ---- */
  --border-width: 1px;
  --border-width-strong: 1.5px;

  /* ---- Shadows ----
     Soft, warm, low-contrast. Tinted with ink rather than pure black. */
  --shadow-xs: 0 1px 2px rgba(23, 23, 23, 0.06);
  --shadow-sm: 0 2px 6px rgba(23, 23, 23, 0.07);
  --shadow-md: 0 8px 24px rgba(23, 23, 23, 0.09);
  --shadow-lg: 0 18px 48px rgba(23, 23, 23, 0.12);
  /* Image protection gradient (bottom-up) for text over photography */
  --scrim-bottom: linear-gradient(to top, rgba(23,23,23,0.72) 0%, rgba(23,23,23,0.32) 38%, rgba(23,23,23,0) 72%); /* @kind other */

  /* ---- Motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* @kind other */
  --dur-fast:   140ms; /* @kind other */
  --dur-normal: 220ms; /* @kind other */
  --dur-slow:   360ms; /* @kind other */

  /* ---- Layout ---- */
  --container-max: 1200px;
  --container-pad: var(--space-5);
}

/* === tokens/base.css === */
/* RiNo Retreat — base element styles & helpers.
   Light reset + brand defaults so raw HTML looks on-brand out of the box. */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--text-body);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: var(--weight-extra);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  color: var(--text-primary);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4 { font-size: var(--text-h4); letter-spacing: var(--tracking-normal); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }

a { color: var(--cta); text-decoration: none; }
a:hover { color: var(--cta-hover); }

/* ---- Brand utility classes ---- */

/* Eyebrow / overline label — tracked caps, the brand's signature label style */
.rr-overline {
  font-family: var(--font-sans);
  font-size: var(--text-overline);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Editorial display headline — uppercase, tight, heavy */
.rr-display {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--weight-black);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
  text-wrap: balance;
}

/* Signature script accent — Brittany Signature. Warm, personal touches. */
.rr-script {
  font-family: var(--font-script);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
  text-transform: none;
  color: var(--cta);
}

/* The short brick accent rule used under wordmarks/headers in brand collateral */
.rr-rule {
  display: inline-block;
  width: 56px;
  height: 3px;
  background: var(--cta);
  border: 0;
  border-radius: var(--radius-pill);
}

::selection { background: var(--rr-brick-tint); color: var(--rr-ink); }