/* Get Notebound — shared design tokens & components.
   Ivory/clay base · terracotta accent · Cormorant Garamond display + Karla UI. */

:root {
  --sand:   #EFE8E1;
  --paper:  #FAF6F0;
  --blush:  #F4E3D4;
  --ink:    #32261D;
  --muted:  rgba(50, 38, 29, .62);
  --hair:   rgba(50, 38, 29, .12);
  --accent:      #8F4A32;
  --accent-deep: #6B3421;
  --accent-soft: #F4E6D8;
  --on-accent:   #FBF6EF;
  --grain: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="140" height="140"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="140" height="140" filter="url(%23n)" opacity="0.05"/></svg>');
}

* { -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--sand);
  color: var(--ink);
  font-family: Karla, ui-sans-serif, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.font-display { font-family: 'Cormorant Garamond', Georgia, serif; }
.font-ui      { font-family: Karla, ui-sans-serif, system-ui, sans-serif; }
.mono         { font-family: ui-monospace, Menlo, monospace; }

a { color: var(--accent); }
a:hover { color: var(--accent-deep); }

.paper { background: var(--paper); }
.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: var(--grain); z-index: 5;
}

.eyebrow {
  font-weight: 700; font-size: 11px; letter-spacing: .24em;
  text-transform: uppercase; color: var(--accent);
}
.kicker { font-size: 10.5px; letter-spacing: .08em; color: #877A6B;
  font-family: ui-monospace, Menlo, monospace; font-weight: 600; }

.diamond { width: 7px; height: 7px; background: var(--accent);
  transform: rotate(45deg); opacity: .5; }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px;
  border: none; cursor: pointer; font-family: Karla, sans-serif; font-weight: 600;
  border-radius: 18px; transition: transform .12s ease, box-shadow .2s ease, background .2s; }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .55; cursor: default; transform: none; }
.btn-primary { background: var(--accent); color: var(--on-accent);
  box-shadow: 0 8px 22px color-mix(in srgb, var(--accent) 32%, transparent); }
.btn-primary:hover { background: var(--accent-deep); }
.btn-ghost { background: transparent; color: var(--accent);
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, transparent); }
.btn-ghost:hover { background: var(--accent-soft); }
.btn-lg { height: 58px; font-size: 17px; }
.btn-md { height: 52px; font-size: 16px; border-radius: 16px; }

.field { width: 100%; border-radius: 16px; border: 1.5px solid var(--hair);
  background: #fff; padding: 0 18px; height: 54px; box-sizing: border-box;
  font: 500 16px Karla, sans-serif; color: var(--ink); outline: none; }
textarea.field { padding: 14px 18px; height: auto; resize: none; line-height: 1.5; }
.field:focus { border-color: color-mix(in srgb, var(--accent) 55%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent); }
.field::placeholder { color: rgba(50,38,29,.4); }
.label { font: 600 13.5px Karla, sans-serif; color: var(--ink); }

.polaroid { background: #fff; padding: 14px 14px 18px;
  border: 1px solid color-mix(in srgb, var(--accent) 22%, transparent);
  box-shadow: 0 18px 40px rgba(54,35,22,.2); }
.stripes { background: repeating-linear-gradient(135deg, #F1D9C2 0 14px, #F8EDDC 14px 28px); }

.toggle { flex: none; width: 52px; height: 31px; border-radius: 99px;
  position: relative; cursor: pointer; transition: background .2s;
  background: rgba(50,38,29,.22); }
.toggle.on { background: var(--accent); }
.toggle .knob { position: absolute; top: 3px; left: 3px; width: 25px; height: 25px;
  border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.2);
  transition: left .2s; }
.toggle.on .knob { left: 24px; }

.card { background: #fff; border: 1px solid rgba(50,38,29,.09); border-radius: 18px; }

.chip { height: 38px; display: inline-flex; align-items: center; padding: 0 18px;
  border-radius: 99px; font: 600 13px Karla, sans-serif; cursor: pointer;
  background: #fff; border: 1px solid var(--hair); color: var(--ink); }
.chip.active { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.badge { font: 600 10.5px Karla, sans-serif; color: var(--accent);
  background: var(--blush); border-radius: 99px; padding: 2px 9px; line-height: 1.5;
  white-space: nowrap; }
.badge-mute { color: rgba(50,38,29,.5); background: rgba(50,38,29,.07); }

@keyframes blink   { 0%,45%{opacity:1} 50%,100%{opacity:0} }
@keyframes twinkle { 0%,100%{opacity:.15;transform:scale(.5) rotate(45deg)} 50%{opacity:1;transform:scale(1) rotate(45deg)} }
@keyframes shimmer { from{background-position:130% 0} to{background-position:-30% 0} }
@keyframes floaty  { from{transform:translateY(0)} to{transform:translateY(-9px)} }
@keyframes sweep   { from{transform:translateX(-110%)} to{transform:translateX(300%)} }
@keyframes phraseIn{ from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
@keyframes fadeUp  { from{opacity:0;transform:translateY(14px)} to{opacity:1;transform:none} }
.fade-up { animation: fadeUp .5s ease both; }

[x-cloak] { display: none !important; }

/* Local utility classes — replaces the Tailwind CDN (a synchronous third-party
   script in <head>; if it stalled, the whole page hung blank). Only the
   utilities actually used across pages/ are defined. */
.min-h-screen { min-height: 100vh; }
.flex { display: flex; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.text-center { text-align: center; }
.relative { position: relative; }
.absolute { position: absolute; }
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.hidden { display: none; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }