/* ==========================================================================
   Spa Rehberi — Design Tokens
   Warm editorial aesthetic: Aman Resorts × Anthropic
   ========================================================================== */

:root {
  /* --- Surfaces ---------------------------------------------------------- */
  --sr-bg:             #faf9f6;
  --sr-surface:        #f5f1ea;
  --sr-surface-2:      #ede7db;
  --sr-surface-sunk:   #f0ebe1;
  --sr-paper:          #ffffff;

  /* --- Ink (text) -------------------------------------------------------- */
  --sr-ink:            #2b2724;
  --sr-ink-2:          #5a524b;
  --sr-ink-3:          #8a7f74;
  --sr-ink-4:          #b8ad9f;

  /* --- Lines ------------------------------------------------------------- */
  --sr-line:           #e8e2d6;
  --sr-line-2:         #dbd3c2;
  --sr-line-ink:       #2b2724;

  /* --- Clay (primary accent) ------------------------------------------- */
  --sr-clay:           #c96442;
  --sr-clay-hover:     #b55736;
  --sr-clay-press:     #9e4a2e;
  --sr-clay-tint:      #f4e4dc;
  --sr-clay-ink:       #7a2e17;

  /* --- Sage (success / verified) ---------------------------------------- */
  --sr-sage:           #7a8770;
  --sr-sage-tint:      #e6ebe1;
  --sr-sage-ink:       #3e4a36;

  /* --- State ------------------------------------------------------------- */
  --sr-warn:           #b88a3e;
  --sr-warn-tint:      #f4ead7;
  --sr-error:          #a8443a;
  --sr-error-tint:     #f4dfdb;
  --sr-info:           #6b7a8a;
  --sr-info-tint:      #e1e6ec;

  --sr-focus-ring:     rgba(201, 100, 66, 0.35);

  /* --- Typography -------------------------------------------------------- */
  --sr-font-serif:     'Fraunces', 'Tiempos Text', 'Copernicus', Georgia, 'Times New Roman', serif;
  --sr-font-sans:      'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --sr-font-mono:      ui-monospace, 'SF Mono', Menlo, monospace;

  --sr-text-xs:        0.75rem;
  --sr-text-sm:        0.8125rem;
  --sr-text-base:      0.9375rem;
  --sr-text-md:        1rem;
  --sr-text-lg:        1.125rem;
  --sr-text-xl:        1.375rem;
  --sr-text-2xl:       1.75rem;
  --sr-text-3xl:       2.25rem;
  --sr-text-4xl:       3rem;
  --sr-text-5xl:       4rem;

  --sr-leading-tight:  1.15;
  --sr-leading-snug:   1.3;
  --sr-leading-normal: 1.55;
  --sr-leading-loose:  1.75;

  --sr-tracking-tight: -0.02em;
  --sr-tracking-normal: 0;
  --sr-tracking-wide:  0.08em;
  --sr-tracking-caps:  0.14em;

  --sr-radius-sm:      6px;
  --sr-radius-md:      10px;
  --sr-radius-lg:      14px;
  --sr-radius-xl:      20px;
  --sr-radius-full:    999px;

  --sr-space-1:        4px;
  --sr-space-2:        8px;
  --sr-space-3:        12px;
  --sr-space-4:        16px;
  --sr-space-5:        20px;
  --sr-space-6:        24px;
  --sr-space-8:        32px;
  --sr-space-10:       40px;
  --sr-space-12:       48px;
  --sr-space-16:       64px;
  --sr-space-20:       80px;
  --sr-space-24:       96px;

  --sr-elev-0:         0 0 0 1px var(--sr-line);
  --sr-elev-1:         0 0 0 1px var(--sr-line-2);

  --sr-ease:           cubic-bezier(.2, .6, .2, 1);
  --sr-ease-out:       cubic-bezier(0, 0, .2, 1);
  --sr-dur-fast:       120ms;
  --sr-dur:            200ms;
  --sr-dur-slow:       360ms;

  --sr-container:      1240px;
  --sr-container-narrow: 880px;
}

html { color-scheme: light; }

body {
  background: var(--sr-bg);
  color: var(--sr-ink);
  font-family: var(--sr-font-sans);
  font-size: var(--sr-text-base);
  line-height: var(--sr-leading-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  margin: 0;
}

* { box-sizing: border-box; }

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

::selection { background: var(--sr-clay-tint); color: var(--sr-clay-ink); }

.sr-display, h1.sr-h, h2.sr-h {
  font-family: var(--sr-font-serif);
  font-weight: 400;
  letter-spacing: var(--sr-tracking-tight);
  line-height: var(--sr-leading-tight);
  color: var(--sr-ink);
}

.sr-eyebrow, .eyebrow {
  font-family: var(--sr-font-sans);
  font-size: var(--sr-text-xs);
  font-weight: 500;
  letter-spacing: var(--sr-tracking-caps);
  text-transform: uppercase;
  color: var(--sr-ink-3);
}