/* =========================================================
   SHORESTAY — Colors & Typography
   Boutique Property Collective · Ballito, South Africa
   ========================================================= */

/* ---------- Webfonts ---------- */
@font-face {
  font-family: 'Copperplate Shoreline';
  src: url('./fonts/OPTICopperplate-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Copperplate Shoreline';
  src: url('./fonts/OPTICopperplate.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Copperplate Shoreline';
  src: url('./fonts/CopperplateCC-Bold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Copperplate Shoreline';
  src: url('./fonts/OPTICopperplate-Heavy.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Copperplate Shoreline';
  src: url('./fonts/CopperplateCC-Heavy.otf') format('opentype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins-Light.otf') format('opentype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins-Italic.otf') format('opentype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins-SemiBold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Poppins';
  src: url('./fonts/Poppins-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

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

:root {
  /* ---------- Brand Primitives ---------- */
  /* from Colour Palette.png */
  --shoreline-navy:      #000B3D;  /* primary — deep ocean night */
  --shoreline-royal:     #01157A;  /* secondary — royal blue, used in wordmark */
  --shoreline-gold:      #CBAC65;  /* warm champagne gold — sunrays, accents */
  --shoreline-bronze:    #7A6200;  /* deep olive-bronze — earthy counterpoint */
  --shoreline-white:     #FFFFFF;

  /* Extended tonal scale — derived harmoniously */
  --navy-950: #00061F;
  --navy-900: #000B3D;   /* brand */
  --navy-800: #011353;
  --navy-700: #0B1E6E;
  --navy-600: #1C2F8A;
  --navy-500: #3446A6;

  --gold-100: #F7EFDC;   /* palest sand — subtle wash */
  --gold-200: #EFE1BE;
  --gold-300: #E3CE95;
  --gold-400: #D7BE7C;
  --gold-500: #CBAC65;   /* brand */
  --gold-600: #B5954E;
  --gold-700: #7A6200;   /* brand — deep bronze */
  --gold-800: #574600;

  /* Warm neutrals — sand & shell */
  --sand-50:  #FBF8F2;   /* page surface, airy */
  --sand-100: #F4EEE2;   /* card surface, warm */
  --sand-200: #E9E1CF;
  --sand-300: #D8CDB4;
  --sand-400: #B8AB8E;

  --ink-900:  #0A0F26;   /* body ink — near-black w/ navy hint */
  --ink-700:  #343A55;
  --ink-500:  #5E6480;
  --ink-400:  #8B90A8;
  --ink-300:  #B7BACB;

  /* ---------- Semantic Surfaces ---------- */
  --bg:             var(--sand-50);
  --bg-alt:         var(--sand-100);   /* warm card / section */
  --bg-deep:        var(--shoreline-navy); /* hero, footer, feature */
  --bg-deep-alt:    var(--navy-800);

  --surface:        #FFFFFF;
  --surface-warm:   var(--sand-100);
  --surface-sunk:   var(--sand-200);

  --border:         rgba(10, 15, 38, 0.10);
  --border-strong:  rgba(10, 15, 38, 0.18);
  --border-onDeep:  rgba(255, 255, 255, 0.14);

  /* ---------- Foreground / Text ---------- */
  --fg-1:           var(--ink-900);       /* primary body */
  --fg-2:           var(--ink-700);       /* secondary */
  --fg-3:           var(--ink-500);       /* muted / captions */
  --fg-4:           var(--ink-400);       /* placeholder */
  --fg-onDeep-1:    #FFFFFF;
  --fg-onDeep-2:    rgba(255, 255, 255, 0.78);
  --fg-onDeep-3:    rgba(255, 255, 255, 0.55);

  --accent:         var(--shoreline-gold);
  --accent-deep:    var(--gold-700);
  --accent-fg-onLight: var(--gold-700);   /* gold text needs deepening on white */
  --accent-fg-onDeep:  var(--gold-500);

  --link:           var(--shoreline-royal);
  --link-onDeep:    var(--gold-500);

  /* ---------- Semantic State ---------- */
  --success:        #3F7A5E;
  --warning:        #B5873A;
  --danger:         #8E2A2A;
  --info:           var(--shoreline-royal);

  /* ---------- Typography ---------- */
  --font-display:   'Copperplate Shoreline', 'Cinzel', 'Trajan Pro', 'Optima', Georgia, serif;
  --font-body:      'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-script:    'Brittany Signature', 'Allura', 'Pinyon Script', cursive;
  --font-mono:      'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Shorestay display sets wide small-caps-feeling letterspacing */
  --tracking-display-xl: 0.02em;
  --tracking-display:    0.04em;
  --tracking-eyebrow:    0.24em;   /* the "BOUTIQUE PROPERTY COLLECTIVE" look */
  --tracking-nav:        0.14em;
  --tracking-body:       0;

  --leading-display:  1.08;
  --leading-heading:  1.2;
  --leading-body:     1.55;
  --leading-tight:    1.3;

  /* Type scale — optimised for 1280–1920 hero layouts */
  --fs-hero:   clamp(44px, 6.2vw, 96px);
  --fs-h1:     clamp(36px, 4.2vw, 64px);
  --fs-h2:     clamp(28px, 3.0vw, 44px);
  --fs-h3:     clamp(22px, 2.0vw, 30px);
  --fs-h4:     20px;
  --fs-eyebrow: 12px;
  --fs-lg:     18px;
  --fs-body:   16px;
  --fs-sm:     14px;
  --fs-xs:     12px;

  /* ---------- Spacing (4px base) ---------- */
  --s-0:  0;
  --s-1:  4px;
  --s-2:  8px;
  --s-3:  12px;
  --s-4:  16px;
  --s-5:  24px;
  --s-6:  32px;
  --s-7:  48px;
  --s-8:  64px;
  --s-9:  96px;
  --s-10: 128px;

  /* ---------- Radii ---------- */
  --r-xs:  4px;
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  18px;
  --r-xl:  24px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ---------- Elevation ---------- */
  --shadow-xs: 0 1px 2px rgba(10, 15, 38, 0.04);
  --shadow-sm: 0 2px 8px rgba(10, 15, 38, 0.06);
  --shadow-md: 0 10px 28px -12px rgba(10, 15, 38, 0.18);
  --shadow-lg: 0 24px 60px -20px rgba(10, 15, 38, 0.28);
  --shadow-xl: 0 40px 90px -30px rgba(10, 15, 38, 0.35);
  --shadow-inset: inset 0 0 0 1px rgba(10, 15, 38, 0.06);
  --shadow-gold-glow: 0 0 0 1px rgba(203, 172, 101, 0.35), 0 16px 40px -12px rgba(203, 172, 101, 0.35);

  /* ---------- Motion ---------- */
  --ease-out:  cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-in:   cubic-bezier(0.6, 0.0, 0.8, 0.2);
  --ease-inout:cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:  150ms;
  --dur:       240ms;
  --dur-slow:  480ms;

  /* Layout */
  --container:     1200px;
  --container-lg:  1360px;
  --gutter:        clamp(16px, 4vw, 48px);
}

/* =========================================================
   Semantic element styles — opt-in via class
   Apply `.shoreline` on <body> or a root to get sensible
   defaults without leaking into host pages.
   ========================================================= */

.shoreline {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-body);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.shoreline h1, .shoreline .h1,
.shoreline h2, .shoreline .h2,
.shoreline h3, .shoreline .h3 {
  font-family: var(--font-display);
  color: var(--fg-1);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: var(--leading-heading);
  margin: 0;
}

.shoreline .hero, .shoreline .display {
  font-family: var(--font-display);
  font-size: var(--fs-hero);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-display-xl);
  font-weight: 400;
}

.shoreline h1, .shoreline .h1 { font-size: var(--fs-h1); }
.shoreline h2, .shoreline .h2 { font-size: var(--fs-h2); }
.shoreline h3, .shoreline .h3 { font-size: var(--fs-h3); font-weight: 500; letter-spacing: 0.02em; }
.shoreline h4, .shoreline .h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 600;
  letter-spacing: 0;
  line-height: var(--leading-tight);
  margin: 0;
}

.shoreline .eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent-fg-onLight);
  font-weight: 400;
}

.shoreline p { margin: 0 0 1em; color: var(--fg-2); }
.shoreline .lede { font-size: var(--fs-lg); color: var(--fg-2); line-height: 1.5; }
.shoreline small, .shoreline .caption {
  font-size: var(--fs-sm); color: var(--fg-3);
}

.shoreline a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.shoreline a:hover { border-bottom-color: currentColor; }

.shoreline .on-deep { color: var(--fg-onDeep-1); }
.shoreline .on-deep p { color: var(--fg-onDeep-2); }
.shoreline .on-deep .eyebrow { color: var(--accent-fg-onDeep); }

/* utility */
.shoreline .rule-gold {
  width: 48px; height: 1px; background: var(--shoreline-gold); border: 0;
}

/* Script flourish — use sparingly: 1 per page/artifact.
   Best on warm sand or navy backgrounds at large sizes. */
.shoreline .script,
.shoreline .flourish {
  font-family: var(--font-script);
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0;
  line-height: 1;
  /* Brittany sits high; nudge down to align optically with caps */
}