@import url('https://fonts.googleapis.com/css2?family=Instrument+Sans:wght@400;500;600&family=Instrument+Serif:ital@0;1&display=swap');

/* Light, cheerful override of the Nocturne tokens — soft cream ground, pastel tints, periwinkle accent */
:root {
  --font-heading: 'Instrument Sans', system-ui, sans-serif;
  --font-body: 'Instrument Sans', system-ui, sans-serif;

  --color-bg: #FAF7F1;
  --color-text: #191823;
  --color-surface: #FFFFFF;

  --color-accent: #6558E6;
  --color-accent-100: #F1EFFE;
  --color-accent-200: #E4E0FD;
  --color-accent-300: #4A3ECC;
  --color-accent-400: #7E73EB;
  --color-accent-500: #6558E6;
  --color-accent-600: #5348C9;
  --color-accent-700: #4238A8;
  --color-accent-800: #EDEAFD;
  --color-accent-900: #F3F0FE;

  --color-accent-2: #EC7455;
  --color-accent-2-100: #FDEEE9;
  --color-accent-2-300: #C4512F;
  --color-accent-2-500: #EC7455;
  --color-accent-2-900: #FDF0EB;

  --color-neutral-100: #FFFFFF;
  --color-neutral-200: #F6F3ED;
  --color-neutral-300: #EDE8DF;
  --color-neutral-400: #DCD5C9;
  --color-neutral-500: #B9B1A4;
  --color-neutral-600: #8A8378;
  --color-neutral-700: #E3DDD2;
  --color-neutral-800: #3A3742;
  --color-neutral-900: #191823;

  --color-divider: #E3DDD2;
  --color-section: #EFEBFF;
  --color-section-glow: #E0DAFF;

  --tint-peach: #FDEDE4;
  --tint-mint: #E2F1E8;
  --tint-lilac: #EBE7FE;
  --tint-butter: #FBF0D6;
  --tint-sky: #E4EDFA;

  --shadow-sm: 0 1px 2px rgba(25, 24, 35, .05);
  --shadow-md: 0 6px 20px -8px rgba(25, 24, 35, .12);
  --shadow-lg: 0 24px 60px -28px rgba(25, 24, 35, .22);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}

::selection { background: var(--color-accent-200); color: var(--color-text); }

/* Floating pill navigation */
.nav {
  border: 0 !important;
  background: rgba(255, 255, 255, .82) !important;
  backdrop-filter: blur(14px) saturate(140%);
  box-shadow: var(--shadow-md), inset 0 0 0 1px rgba(25, 24, 35, .06);
  border-radius: 999px !important;
  max-width: 1180px;
  margin: 16px auto 0 !important;
  padding: 8px 10px 8px 22px !important;
  display: flex;
  align-items: center;
  gap: 4px;
  height: auto !important;
  min-height: 0 !important;
}
.nav .nav-brand {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -.01em;
  margin-right: 14px;
}
.nav > a:not(.btn):not(.nav-brand) {
  font-size: 14px;
  padding: 8px 14px;
  border-radius: 999px;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
  transition: background .18s ease, color .18s ease;
}
.nav > a:not(.btn):not(.nav-brand):hover {
  background: var(--color-accent-100);
  color: var(--color-text);
}

/* Buttons — soft filled, not outlined, to match the light direction */
.btn {
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 14px;
  padding: 11px 20px;
  transition: transform .18s ease, background .18s ease, box-shadow .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: var(--color-text) !important;
  border-color: var(--color-text) !important;
  color: var(--color-bg) !important;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--color-accent) !important; border-color: var(--color-accent) !important; }
.btn-ghost {
  background: rgba(255, 255, 255, .7) !important;
  border: 1px solid var(--color-divider) !important;
  color: var(--color-text) !important;
}
.btn-ghost:hover { background: #fff !important; border-color: var(--color-neutral-400) !important; }

/* Tags — pastel pills */
.tag {
  border-radius: 999px;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: 12.5px;
  padding: 6px 12px;
  letter-spacing: 0;
  text-transform: none;
}
.tag-accent { background: var(--color-accent-200) !important; color: var(--color-accent-300) !important; border-color: transparent !important; }
.tag-neutral { background: var(--color-neutral-200) !important; color: color-mix(in srgb, var(--color-text) 72%, transparent) !important; border-color: transparent !important; }
.tag-outline { background: transparent !important; border: 1px solid var(--color-divider) !important; color: color-mix(in srgb, var(--color-text) 62%, transparent) !important; }

/* Cards — white surfaces with a hairline, no heavy elevation */
.card {
  background: var(--color-surface) !important;
  border: 1px solid var(--color-divider) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-sm);
}
.card-kicker {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.card-title { font-family: var(--font-heading); font-weight: 500; letter-spacing: -.01em; }
.card-body { color: color-mix(in srgb, var(--color-text) 72%, transparent); }

/* Images sit on light ground now — blending off, soft rounding on */
.lighten { mix-blend-mode: normal !important; }
.lighten image-slot, .lighten > * { border-radius: 20px; overflow: hidden; }

:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }