/* ============================================================
   Palm Sporting Club — Colors & Type
   Marbella · Health & Wellness · Lagree™ Studio
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500&family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  /* ----------------------------------------------------------
     COLOR — base palette
     Drawn from the studio: warm sand, forest green, matcha,
     charcoal Megaformers, off-white walls, rust signage.
     ---------------------------------------------------------- */

  /* Sand / cream — primary brand background */
  --psc-sand-50:  #F7F5EE;   /* lightest cream, page bg */
  --psc-sand-100: #EFEBDF;   /* warm cream */
  --psc-sand-200: #E5E2D6;   /* logo plate, hero washes */
  --psc-sand-300: #D6D2C2;   /* dividers, soft chips */
  --psc-sand-400: #B5B0A0;

  /* Forest green — secondary brand (the cap, signage detail) */
  --psc-forest-900: #14271E;
  --psc-forest-800: #1F3A2E;  /* primary forest */
  --psc-forest-700: #2C5040;
  --psc-forest-600: #406654;
  --psc-forest-300: #A6B9A8;

  /* Matcha — accent (juice bar, fresh / botanical) */
  --psc-matcha-700: #6E8255;
  --psc-matcha-500: #8FA174;
  --psc-matcha-300: #C2CCAA;
  --psc-matcha-100: #E5EAD6;

  /* Charcoal — neutrals & type */
  --psc-ink-900: #14140F;     /* near black, type */
  --psc-ink-800: #1A1A19;     /* body */
  --psc-ink-700: #2A2A26;
  --psc-ink-500: #6B6B62;
  --psc-ink-400: #8C8B80;
  --psc-ink-300: #B8B6A8;

  /* Rust — signage warmth, accent only */
  --psc-rust-700: #5A3A26;
  --psc-rust-500: #6B4530;
  --psc-rust-300: #A07A60;

  /* Off-white — interior wall, surfaces */
  --psc-bone:    #F4F1E8;
  --psc-paper:   #FBF9F2;

  /* ----------------------------------------------------------
     COLOR — semantic
     ---------------------------------------------------------- */
  --bg:           var(--psc-sand-50);
  --bg-elevated:  var(--psc-paper);
  --bg-inverse:   var(--psc-forest-800);
  --bg-ink:       var(--psc-ink-900);

  --surface:      var(--psc-bone);
  --surface-2:    var(--psc-sand-100);
  --surface-3:    var(--psc-sand-200);

  --fg:           var(--psc-ink-900);   /* primary text */
  --fg-2:         var(--psc-ink-700);   /* secondary text */
  --fg-3:         var(--psc-ink-500);   /* muted, captions */
  --fg-4:         var(--psc-ink-400);   /* placeholder */
  --fg-on-dark:   var(--psc-sand-50);
  --fg-on-forest: var(--psc-sand-100);

  --line:         var(--psc-sand-300); /* hairline dividers */
  --line-strong:  var(--psc-ink-300);

  --brand-primary:   var(--psc-forest-800);
  --brand-secondary: var(--psc-ink-900);
  --brand-accent:    var(--psc-matcha-500);
  --brand-warm:      var(--psc-rust-500);

  --focus-ring:   var(--psc-forest-700);

  /* ----------------------------------------------------------
     TYPE — families & scale
     Display: Cormorant Garamond — refined transitional serif
     matching the logo lockup's classic feel.
     Body: Inter — neutral, legible grotesque for UI / paragraphs.
     ---------------------------------------------------------- */
  --font-display: "Cormorant Garamond", "Cormorant", Garamond, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  --tracking-tight:   -0.01em;
  --tracking-normal:  0em;
  --tracking-loose:   0.02em;
  --tracking-wide:    0.14em;   /* small caps, eyebrows */
  --tracking-xwide:   0.22em;   /* hero eyebrows */

  --leading-tight:   1.05;
  --leading-snug:    1.2;
  --leading-normal:  1.5;
  --leading-loose:   1.7;

  /* Type scale (clamp for fluid heroes; px for UI) */
  --fs-display:  clamp(56px, 8.5vw, 128px);
  --fs-h1:       clamp(40px, 5.5vw, 72px);
  --fs-h2:       clamp(32px, 3.6vw, 48px);
  --fs-h3:       28px;
  --fs-h4:       22px;
  --fs-eyebrow:  12px;
  --fs-body:     16px;
  --fs-body-lg:  18px;
  --fs-small:    14px;
  --fs-caption:  12px;

  /* ----------------------------------------------------------
     SPACING — 4px base
     ---------------------------------------------------------- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;
  --s-32: 128px;

  /* ----------------------------------------------------------
     RADIUS — soft, never sharp; pill for CTAs
     ---------------------------------------------------------- */
  --r-xs: 2px;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-2xl: 32px;
  --r-pill: 999px;

  /* ----------------------------------------------------------
     SHADOWS — feathered, warm
     ---------------------------------------------------------- */
  --shadow-sm:  0 1px 2px rgba(20, 20, 15, 0.04), 0 1px 1px rgba(20, 20, 15, 0.03);
  --shadow-md:  0 6px 18px rgba(20, 20, 15, 0.06), 0 2px 4px rgba(20, 20, 15, 0.04);
  --shadow-lg:  0 20px 48px rgba(20, 20, 15, 0.10), 0 6px 14px rgba(20, 20, 15, 0.05);
  --shadow-inset: inset 0 0 0 1px rgba(20, 20, 15, 0.06);

  /* ----------------------------------------------------------
     MOTION — slow, considered, never bouncy
     ---------------------------------------------------------- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:    160ms;
  --dur-base:    260ms;
  --dur-slow:    520ms;
}

/* ============================================================
   SEMANTIC ELEMENTS — base sheet
   Use class equivalents (.psc-h1, .psc-eyebrow) on UI nodes.
   ============================================================ */

html { color-scheme: light; }
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--leading-normal);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.psc-display, .psc-h1, .psc-h2, .psc-h3 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--fg);
}

.psc-display {
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 0.95;
}
.psc-h1 { font-size: var(--fs-h1); }
.psc-h2 { font-size: var(--fs-h2); }
.psc-h3 {
  font-size: var(--fs-h3);
  line-height: var(--leading-snug);
}
.psc-h4 {
  font-family: var(--font-body);
  font-size: var(--fs-h4);
  font-weight: 500;
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-snug);
}

.psc-italic { font-style: italic; }

.psc-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-xwide);
  text-transform: uppercase;
  color: var(--fg-3);
}

.psc-body   { font-size: var(--fs-body); line-height: var(--leading-normal); }
.psc-body-lg { font-size: var(--fs-body-lg); line-height: var(--leading-normal); }
.psc-small  { font-size: var(--fs-small); line-height: var(--leading-normal); color: var(--fg-2); }
.psc-caption { font-size: var(--fs-caption); line-height: var(--leading-snug); color: var(--fg-3); }

.psc-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--fs-h2);
  line-height: var(--leading-snug);
  color: var(--fg);
}

a { color: inherit; text-decoration: none; }
hr { border: 0; border-top: 1px solid var(--line); margin: var(--s-8) 0; }
::selection { background: var(--psc-matcha-300); color: var(--psc-ink-900); }