/* ============================================================
   WM Photos by Tom — Colors & Type
   Single source of truth for color + typography tokens.
   Load this file in every artifact; reference vars, never raw hex.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;0,800;1,400;1,600&family=Manrope:wght@300;400;500;600;700;800&family=Sacramento&display=swap');

:root {
  /* ---------- Jacksons Purple (deep indigo — primary) ---------- */
  --indigo-50:  #e8ebf3;
  --indigo-100: #d2d7e7;
  --indigo-300: #6175ad;   /* default page bg */
  --indigo-500: #1e3a8a;   /* primary */
  --indigo-600: #182e6e;
  --indigo-800: #0c1737;
  --indigo-900: #091129;

  /* ---------- Tahiti Gold (warm orange accent) ---------- */
  --gold-50:  #fbf1e6;
  --gold-100: #f7e3cd;
  --gold-300: #e49f50;
  --gold-500: #d97706;      /* primary accent */
  --gold-600: #ad5f04;
  --gold-800: #562f02;
  --gold-900: #412301;

  /* ---------- Mountain Meadow (vibrant green accent) ---------- */
  --green-50:  #e7f8f2;
  --green-100: #cff1e5;
  --green-300: #57cea6;
  --green-500: #10b981;     /* success / available */
  --green-600: #0c9467;
  --green-800: #064a33;
  --green-900: #043726;

  /* ---------- Neutral grayscale ---------- */
  --neutral-50:  #f2f2f2;
  --neutral-100: #d8dad9;
  --neutral-300: #b2b5b4;
  --neutral-500: #808482;
  --neutral-600: #4d5250;
  --neutral-800: #1a211e;
  --neutral-900: #010906;

  --white: #ffffff;

  /* ---------- Semantic role tokens ---------- */
  --bg-page:        var(--indigo-300);   /* signature mid-indigo page bg */
  --bg-surface:     var(--white);        /* cards, sheets, panels */
  --bg-surface-alt: var(--neutral-50);   /* secondary surfaces */
  --bg-inverse:     var(--indigo-900);   /* dark sections, footers */

  --fg-1:           var(--indigo-900);   /* primary text */
  --fg-2:           var(--neutral-600);  /* body / muted */
  --fg-3:           var(--neutral-500);  /* meta, captions */
  --fg-on-dark:     var(--white);
  --fg-on-dark-2:   var(--indigo-100);

  --accent:         var(--gold-500);     /* CTA, highlight */
  --accent-hover:   var(--gold-600);
  --success:        var(--green-500);

  --border-1:       var(--neutral-100);  /* hairline */
  --border-2:       var(--neutral-300);  /* visible */
  --border-strong:  var(--indigo-900);

  --focus-ring:     var(--gold-500);

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

  /* ---------- Radius ---------- */
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
  --radius-pill: 999px;

  /* ---------- Elevation (long, soft, editorial — never harsh) ---------- */
  --shadow-1: 0 1px 2px rgba(9, 17, 41, 0.06), 0 1px 1px rgba(9, 17, 41, 0.04);
  --shadow-2: 0 4px 12px rgba(9, 17, 41, 0.08), 0 1px 2px rgba(9, 17, 41, 0.05);
  --shadow-3: 0 16px 40px rgba(9, 17, 41, 0.18), 0 4px 12px rgba(9, 17, 41, 0.08);
  --shadow-4: 0 32px 80px rgba(9, 17, 41, 0.28), 0 8px 24px rgba(9, 17, 41, 0.12);

  /* ---------- Type families ---------- */
  --font-display: 'Playfair Display', 'Cormorant Garamond', Georgia, serif;
  --font-body:    'Manrope', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-script:  'Sacramento', 'Snell Roundhand', cursive;
  --font-mono:    ui-monospace, 'SF Mono', Menlo, Consolas, monospace;

  /* ---------- Type scale ---------- */
  --fs-display:  clamp(56px, 7vw, 96px);
  --fs-h1:       clamp(40px, 5vw, 64px);
  --fs-h2:       clamp(28px, 3.4vw, 44px);
  --fs-h3:       22px;
  --fs-h4:       18px;
  --fs-body:     16px;
  --fs-small:    14px;
  --fs-micro:    12px;

  --lh-tight:    1.05;
  --lh-snug:     1.2;
  --lh-body:     1.55;
  --lh-loose:    1.7;

  /* Letter-spacing: tight on serifs, generous on caps */
  --tracking-display: -0.01em;
  --tracking-eyebrow: 0.22em;   /* spaced caps echo the logo's "PHOTOS" */
  --tracking-button:  0.08em;

  /* ---------- Motion ---------- */
  --ease-out:    cubic-bezier(.22, .61, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast:    140ms;
  --dur-base:    240ms;
  --dur-slow:    420ms;
}

/* ============================================================
   Semantic element styles — opt-in via class names so they
   don't fight host-app resets.
   ============================================================ */

.wm-display,
.wm-h1,
.wm-h2,
.wm-h3,
.wm-h4 {
  font-family: var(--font-display);
  color: var(--fg-1);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  margin: 0;
}

.wm-display { font-size: var(--fs-display); line-height: 0.98; }
.wm-h1      { font-size: var(--fs-h1); }
.wm-h2      { font-size: var(--fs-h2); }
.wm-h3      { font-size: var(--fs-h3); line-height: var(--lh-snug); }
.wm-h4      { font-size: var(--fs-h4); line-height: var(--lh-snug); }

.wm-eyebrow {
  font-family: var(--font-body);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--fg-2);
}

.wm-script {
  font-family: var(--font-script);
  font-weight: 400;
  font-size: 2.2em;       /* script reads small at nominal size — pump it */
  line-height: 1;
  color: var(--fg-1);
}

.wm-body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.wm-small  { font-family: var(--font-body); font-size: var(--fs-small); color: var(--fg-2); }
.wm-meta   { font-family: var(--font-body); font-size: var(--fs-micro); color: var(--fg-3); letter-spacing: 0.04em; }

.wm-mono {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--neutral-50);
  padding: 2px 6px;
  border-radius: var(--radius-xs);
  color: var(--fg-1);
}

/* Italic ligature-rich serif is a key brand voice — used for pull quotes */
.wm-pull {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.3;
  color: var(--fg-1);
  text-wrap: balance;
}