/* SEPTORE design tokens v1.1  ·  Operator-Built Capital */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Gilda+Display&family=Manrope:wght@400;500;600;700&display=swap');

:root {
  /* Core palette */
  --sp-ink: #1E1E1C;
  --sp-coquina: #E6DCC8;
  --sp-gold: #C5A46D;
  --sp-palm: #5E6B5A;

  /* Support */
  --sp-coquina-light: #F2ECE1;
  --sp-white: #FFFFFF;
  --sp-ink-80: #4A4A47;
  --sp-gold-dark: #9C7A3F;   /* decorative only: lines, icons */
  --sp-gold-light: #D9BF8F;  /* gold button hover (ink text) */
  --sp-line: rgba(30, 30, 28, 0.14);
  --sp-line-dark: rgba(230, 220, 200, 0.18);
  --sp-error: #9B2C2C;

  /* Semantic */
  --sp-bg: var(--sp-coquina);
  --sp-surface: var(--sp-coquina-light);
  --sp-text: var(--sp-ink);
  --sp-text-muted: var(--sp-ink-80);
  --sp-accent: var(--sp-gold);
  --sp-focus: var(--sp-ink);          /* on light */
  --sp-focus-on-dark: var(--sp-gold); /* on ink */

  /* Type */
  --sp-font-display: 'Gilda Display', 'Times New Roman', serif;
  --sp-font-accent: 'Cormorant Garamond', Georgia, serif;
  --sp-font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --sp-fs-display: clamp(44px, 6vw, 72px);
  --sp-fs-h1: clamp(38px, 4.6vw, 56px);
  --sp-fs-h2: clamp(30px, 3.4vw, 40px);
  --sp-fs-h3: 28px;
  --sp-fs-h4: 22px;
  --sp-fs-lead: 20px;
  --sp-fs-body: 17px;
  --sp-fs-small: 15px;
  --sp-fs-eyebrow: 13px;

  /* Space, layout, shape */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; --sp-10: 128px;
  --sp-max: 1200px;
  --sp-radius-btn: 999px;
  --sp-radius-input: 8px;
  --sp-radius-card: 12px;
  --sp-shadow-card: 0 1px 2px rgba(30,30,28,.06), 0 8px 24px rgba(30,30,28,.06);
  --sp-ease: cubic-bezier(.2,.7,.2,1);
  --sp-dur: 220ms;
}

html { background: var(--sp-bg); color: var(--sp-text); font-family: var(--sp-font-body); font-size: var(--sp-fs-body); line-height: 1.6; }
h1, h2 { font-family: var(--sp-font-display); font-weight: 400; line-height: 1.15; letter-spacing: .01em; }
h3 { font-family: var(--sp-font-accent); font-weight: 600; line-height: 1.2; }
.sp-eyebrow { font: 600 var(--sp-fs-eyebrow)/1 var(--sp-font-body); letter-spacing: .18em; text-transform: uppercase; }
.sp-tagline { font-family: var(--sp-font-accent); font-weight: 500; }
.sp-rule { width: 64px; height: 2px; background: var(--sp-gold); border: 0; }

.sp-section--dark { background: var(--sp-ink); color: var(--sp-coquina); }
.sp-section--dark a, .sp-section--dark .sp-tagline { color: var(--sp-gold); }
.sp-section--palm { background: var(--sp-palm); color: var(--sp-coquina); }

.sp-btn { display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; border-radius: var(--sp-radius-btn);
  font: 600 15px/1 var(--sp-font-body); letter-spacing: .02em; transition: background var(--sp-dur) var(--sp-ease); }
.sp-btn--primary { background: var(--sp-ink); color: var(--sp-coquina); }
.sp-btn--primary:hover { background: #000; }
.sp-btn--gold { background: var(--sp-gold); color: var(--sp-ink); }        /* on dark sections only */
.sp-btn--gold:hover { background: var(--sp-gold-light); color: var(--sp-ink); }
.sp-btn--outline { border: 1.5px solid currentColor; color: inherit; background: transparent; }
:focus-visible { outline: 2px solid var(--sp-focus); outline-offset: 3px; }
.sp-section--dark :focus-visible { outline-color: var(--sp-focus-on-dark); }

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