/* NARD — design tokens, mirrored 1:1 from iOS handoff */
:root {
  /* Persian Heritage palette */
  --turquoise: #3FB8B0;
  --turquoise-deep: #2A8A85;
  --cobalt: #1E3A8A;
  --cobalt-deep: #0F2766;
  --gold: #C9A24C;
  --gold-deep: #8E6D24;
  --brick: #B53A2E;
  --brick-deep: #7E251D;
  --walnut: #3E2A1C;
  --walnut-mid: #5C3F28;
  --walnut-light: #8C6240;
  --charcoal: #1A130E;
  --charcoal-deep: #100A07;
  --ivory: #EFE6D2;
  --cream: #F2EAD7;
  --paper: #F8F2E2;

  /* Resolved theme — light by default */
  --bg: var(--cream);
  --bg2: var(--paper);
  --fg: var(--charcoal);
  --fg-mute: rgba(31,27,22,0.62);
  --fg-faint: rgba(31,27,22,0.38);
  --line: rgba(62,42,28,0.14);
  --card: #FFFFFF;
  --card-elev: 0 2px 10px rgba(31,27,22,0.06), 0 1px 2px rgba(31,27,22,0.04);
  --inlay-frame: 0 0 0 0.5px var(--gold-deep), 0 0 0 2px transparent, 0 0 0 2.5px var(--gold);

  --accent: var(--turquoise);
  --accent-alt: var(--gold);

  /* Type */
  --serif: 'Cormorant Garamond', 'Cormorant', 'Iowan Old Style', Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Helvetica Neue', Arial, sans-serif;

  /* Radii */
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 22px;
  --r-2xl: 26px;

  /* Spacing scale (4pt grid) */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px;
  --s6: 24px; --s8: 32px; --s10: 40px; --s12: 48px; --s16: 64px;
  --s20: 80px; --s24: 96px; --s32: 128px;

  /* Motion */
  --ease: cubic-bezier(.2,.7,.2,1);
}

[data-theme="dark"] {
  --bg: var(--charcoal);
  --bg2: var(--charcoal-deep);
  --fg: var(--ivory);
  --fg-mute: rgba(244,235,217,0.62);
  --fg-faint: rgba(244,235,217,0.38);
  --line: rgba(239,230,210,0.14);
  --card: #2A2520;
  --card-elev: 0 2px 10px rgba(0,0,0,0.4);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: var(--charcoal);
    --bg2: var(--charcoal-deep);
    --fg: var(--ivory);
    --fg-mute: rgba(244,235,217,0.62);
    --fg-faint: rgba(244,235,217,0.38);
    --line: rgba(239,230,210,0.14);
    --card: #2A2520;
    --card-elev: 0 2px 10px rgba(0,0,0,0.4);
  }
}

* { box-sizing: border-box; }
*::selection { background: rgba(63,184,176,0.3); color: inherit; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--serif);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body { overflow-x: hidden; }

/* Type primitives */
.eyebrow {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--fg-mute);
  display: inline-block;
}

.eyebrow .num { color: var(--accent); margin-right: 8px; }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin: 0;
  text-wrap: balance;
}

p { text-wrap: pretty; }

a { color: inherit; }

/* Inlay border (gold + brick hairline frame) — used for hero plates */
.inlay-frame {
  position: relative;
  isolation: isolate;
}
.inlay-frame::before,
.inlay-frame::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
}
.inlay-frame::before {
  border: 0.5px solid var(--gold-deep);
  margin: 4px;
}
.inlay-frame::after {
  border: 0.5px solid var(--gold);
  margin: 7px;
  opacity: 0.7;
}

/* Container */
.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--s6);
}
@media (max-width: 720px) {
  .container { padding: 0 var(--s5); }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font-family: var(--sans);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.3px;
  padding: 12px 20px;
  border-radius: 9999px;
  border: 0.5px solid var(--line);
  background: transparent;
  color: var(--fg);
  cursor: pointer;
  transition: background 160ms var(--ease), color 160ms var(--ease), border-color 160ms var(--ease), transform 160ms var(--ease);
}
.btn:hover { background: var(--card); }
.btn:active { transform: translateY(1px); }
.btn--primary {
  background: var(--turquoise);
  color: #062623;
  border-color: var(--turquoise-deep);
}
.btn--primary:hover { background: var(--turquoise-deep); color: var(--paper); }

/* Hairline rule */
.rule {
  border: 0;
  height: 1px;
  background: var(--line);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}