/* ─────────────────────────────────────────────────────────────
   POMEWELL — design tokens
   Premium stationery aesthetic. Warm cream paper, walnut ink,
   terracotta accent. No system fonts.
   ───────────────────────────────────────────────────────────── */

:root {
  /* paper warmth — slightly aged toward sepia */
  --paper-1: #F7F1E1;        /* primary page — warmer parchment */
  --paper-2: #EFE6CE;        /* secondary surface */
  --paper-3: #E0D2AC;        /* aged accent */
  --paper-edge: #C9B58A;     /* deckle / rule */
  --paper-shadow: rgba(75, 50, 20, 0.10);

  /* ink — darker, more like iron-gall */
  --ink-1: #1F1208;          /* primary, near-black walnut */
  --ink-2: #4A3520;          /* secondary */
  --ink-3: #7D6240;          /* tertiary */
  --ink-4: #B09870;          /* muted */

  /* accents — saturated old-printing colors */
  --accent-rust: #7C2A1F;    /* OXBLOOD — primary accent */
  --accent-rust-soft: #B85A3C;
  --accent-forest: #2E4A2C;  /* deep forest */
  --accent-amber: #B47A1A;   /* mustard */
  --accent-plum: #3F1F3A;    /* aubergine */
  --accent-cobalt: #1F3A6E;  /* navy/indigo */

  /* post-it palette */
  --pi-butter: #F6DE82;
  --pi-peach: #F2B89C;
  --pi-sage: #C5D2A8;
  --pi-sky: #A8C2D6;
  --pi-lilac: #C8B7D2;
  --pi-kraft: #D6BB95;
  --pi-rose: #E8AAB2;
  --pi-mint: #B0D6C0;

  /* shadows */
  --shadow-soft: 0 1px 2px rgba(75,55,30,0.04), 0 4px 16px rgba(75,55,30,0.06);
  --shadow-paper: 0 1px 0 rgba(255,255,255,0.6) inset, 0 1px 3px rgba(75,55,30,0.08), 0 8px 24px rgba(75,55,30,0.06);
  --shadow-lift: 0 12px 30px rgba(75,55,30,0.15), 0 2px 6px rgba(75,55,30,0.08);
  --shadow-postit: 0 1px 1px rgba(75,55,30,0.10), 0 4px 8px rgba(75,55,30,0.10), 0 12px 20px rgba(75,55,30,0.08);

  /* radii — slightly organic */
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 14px;
  --r-xl: 22px;

  /* fonts */
  --f-display: "Bodoni Moda", "Bodoni 72", "Didot", serif;
  --f-body: "Cardo", "EB Garamond", Georgia, serif;
  --f-ui: "Bricolage Grotesque", -apple-system, system-ui, sans-serif;
  --f-sans: "Bricolage Grotesque", -apple-system, system-ui, sans-serif;
  --f-hand: "Caveat", "Homemade Apple", cursive;
  --f-mono: "IBM Plex Mono", ui-monospace, "SF Mono", monospace;
}

/* dark theme override applied via .theme-dark on body */
body.theme-dark {
  --paper-1: #1A140A;
  --paper-2: #221B0F;
  --paper-3: #2C2316;
  --paper-edge: #3A2F1F;
  --paper-shadow: rgba(0,0,0,0.5);

  --ink-1: #EDE3CE;
  --ink-2: #BFA98A;
  --ink-3: #8A7458;
  --ink-4: #4A3D2C;

  --accent-rust: #C76B4E;
  --accent-rust-soft: #E08866;

  --shadow-paper: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 3px rgba(0,0,0,0.5), 0 8px 24px rgba(0,0,0,0.5);
  --shadow-soft: 0 1px 2px rgba(0,0,0,0.3), 0 4px 16px rgba(0,0,0,0.4);
  --shadow-postit: 0 1px 1px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.3), 0 12px 20px rgba(0,0,0,0.25);
}
body.theme-dark .pomewell-root { color: var(--ink-1); background: var(--paper-1); }

/* sepia — warmer browns */
body.theme-sepia {
  --paper-1: #E8D6B0;
  --paper-2: #DAC59A;
  --paper-3: #C9AE7A;
  --paper-edge: #B89A6A;
  --paper-shadow: rgba(60,40,18,0.18);

  --ink-1: #3A2818;
  --ink-2: #5A4030;
  --ink-3: #806048;
  --ink-4: #A98A66;
  --accent-rust: #7C2A1F;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; font-family: var(--f-ui); color: var(--ink-1); }

/* ─────────────────────────────────────────────────────────────
   Paper texture — subtle multi-layer noise + warm vignette.
   Use as ::before on any surface needing fiber texture.
   ───────────────────────────────────────────────────────────── */
.paper {
  position: relative;
  background-color: var(--paper-1);
  background-image:
    radial-gradient(ellipse at 25% 18%, rgba(255,250,235,0.6), transparent 55%),
    radial-gradient(ellipse at 78% 82%, rgba(200,170,120,0.10), transparent 60%),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' seed='3'/><feColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.36 0 0 0 0 0.22 0 0 0 0.045 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 100% 100%, 100% 100%, 220px 220px;
}
.paper-2 {
  background-color: var(--paper-2);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='5'/><feColorMatrix values='0 0 0 0 0.45 0 0 0 0 0.36 0 0 0 0 0.22 0 0 0 0.05 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}
.paper-3 {
  background-color: var(--paper-3);
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='2' seed='9'/><feColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.32 0 0 0 0 0.18 0 0 0 0.08 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* paper rules */
.rule-lined {
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 31px, rgba(139,117,88,0.22) 31px 32px);
}
.rule-grid {
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 23px, rgba(139,117,88,0.18) 23px 24px),
    repeating-linear-gradient(to right, transparent 0 23px, rgba(139,117,88,0.18) 23px 24px);
}
.rule-dotted {
  background-image: radial-gradient(rgba(139,117,88,0.4) 1px, transparent 1.4px);
  background-size: 18px 18px;
}
.rule-music {
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 0 22px,
      rgba(139,117,88,0.5) 22px 23px,
      transparent 23px 30px,
      rgba(139,117,88,0.5) 30px 31px,
      transparent 31px 38px,
      rgba(139,117,88,0.5) 38px 39px,
      transparent 39px 46px,
      rgba(139,117,88,0.5) 46px 47px,
      transparent 47px 54px,
      rgba(139,117,88,0.5) 54px 55px,
      transparent 55px 84px);
}

/* Mini paper previews — much tighter spacing so the pattern is visible
   in small thumbnail tiles (around 60–90px wide). */
.rule-lined-mini {
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(139,117,88,0.32) 7px 8px);
  background-size: 100% 100%;
}
.rule-grid-mini {
  background-image:
    repeating-linear-gradient(to bottom, transparent 0 7px, rgba(139,117,88,0.28) 7px 8px),
    repeating-linear-gradient(to right,  transparent 0 7px, rgba(139,117,88,0.28) 7px 8px);
  background-size: 100% 100%;
}
.rule-dotted-mini {
  background-image: radial-gradient(rgba(139,117,88,0.55) 0.8px, transparent 1.2px);
  background-size: 6px 6px;
}
.rule-music-mini {
  background-image:
    repeating-linear-gradient(to bottom,
      transparent 0 6px,
      rgba(139,117,88,0.55) 6px 7px,
      transparent 7px 10px,
      rgba(139,117,88,0.55) 10px 11px,
      transparent 11px 14px,
      rgba(139,117,88,0.55) 14px 15px,
      transparent 15px 22px);
  background-size: 100% 100%;
}

/* margin line (left red rule for notebook paper) */
.margin-rule::before {
  content: "";
  position: absolute;
  left: 44px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--accent-rust);
  opacity: 0.35;
}

/* ─────────────────────────────────────────────────────────────
   Ink stroke — pure CSS handwritten underline / strokes
   ───────────────────────────────────────────────────────────── */
.ink-underline {
  position: relative;
  display: inline-block;
}
.ink-underline::after {
  content: "";
  position: absolute;
  left: -2px; right: -2px; bottom: -4px;
  height: 6px;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 8' preserveAspectRatio='none'><path d='M2,5 Q40,2 80,4.5 T160,4 T198,5' stroke='%23B85A3C' stroke-width='1.6' fill='none' stroke-linecap='round'/></svg>") center/100% 100% no-repeat;
}

.highlight {
  background: linear-gradient(180deg, transparent 32%, rgba(246,222,130,0.55) 32%, rgba(246,222,130,0.55) 92%, transparent 92%);
  padding: 0 2px;
}

/* deckle edge for paper sheets */
.deckle {
  --d: var(--paper-edge);
  filter: drop-shadow(0 1px 2px rgba(75,55,30,0.10)) drop-shadow(0 6px 12px rgba(75,55,30,0.08));
}

/* utility: pen stroke draw-on animation (CSS-only) */
@keyframes drawIn { from { stroke-dashoffset: var(--len, 600); } to { stroke-dashoffset: 0; } }
.ink-stroke path { stroke-dasharray: var(--len, 600); stroke-dashoffset: var(--len, 600); animation: drawIn 1.4s ease-out forwards; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes pulseInk { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* postit wobble */
@keyframes wobble {
  0%   { transform: var(--rest) scale(1); }
  20%  { transform: var(--rest) scale(1.04) rotate(0.5deg); }
  45%  { transform: var(--rest) scale(0.99) rotate(-0.3deg); }
  70%  { transform: var(--rest) scale(1.01); }
  100% { transform: var(--rest) scale(1); }
}
.postit-wobble { animation: wobble 480ms cubic-bezier(.3,.7,.4,1); }

/* page-curl shadow */
.page-curl::after {
  content: "";
  position: absolute;
  right: 0; bottom: 0;
  width: 50px; height: 50px;
  background: linear-gradient(135deg, transparent 50%, rgba(75,55,30,0.12) 50%, var(--paper-2) 60%);
  border-bottom-right-radius: 6px;
}

/* tiny chips */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--paper-2);
  border: 0.5px solid var(--paper-edge);
  border-radius: 999px;
  font-family: var(--f-ui);
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.2px;
}

/* button base */
.btn {
  font-family: var(--f-ui);
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: transform .12s, background .15s;
}
.btn:active { transform: translateY(1px); }
.btn-ink, .btn-rust, .btn-ghost {
  font-family: var(--f-display);
  font-weight: 500;
  text-transform: uppercase;
}
.btn-ink {
  background: var(--ink-1);
  color: var(--paper-1);
  border-radius: 2px;
  padding: 9px 16px;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 500;
}
.btn-rust {
  background: var(--accent-rust);
  color: var(--paper-1);
  border-radius: 2px;
  padding: 9px 16px;
  font-size: 12px;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  font-weight: 500;
}
.btn-ghost {
  background: transparent;
  color: var(--ink-2);
  border: 1px solid var(--paper-edge);
  border-radius: 2px;
  padding: 8px 14px;
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  font-weight: 500;
  font-family: var(--f-display);
}

/* scrollbar reset inside artboards */
.dc-card * { scrollbar-width: none; }
.dc-card *::-webkit-scrollbar { display: none; }

/* ─────────────────────────────────────────────────────────────
   App scrollbars — slim warm paper-tone bars that match the design.
   Firefox uses scrollbar-color; WebKit gets a custom track + thumb.
   Hide when idle: scrollbar fades in on container hover.
   ───────────────────────────────────────────────────────────── */
.pomewell-root, .pomewell-root *, .pomewell-root *::before, .pomewell-root *::after {
  scrollbar-width: thin;
  scrollbar-color: rgba(75, 50, 20, 0.18) transparent;
}
.pomewell-root *::-webkit-scrollbar { width: 8px; height: 8px; }
.pomewell-root *::-webkit-scrollbar-track {
  background: transparent;
  margin: 4px 0;
}
.pomewell-root *::-webkit-scrollbar-thumb {
  background: rgba(75, 50, 20, 0.18);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
  transition: background .2s;
}
.pomewell-root *:hover::-webkit-scrollbar-thumb {
  background: rgba(75, 50, 20, 0.36);
  background-clip: content-box;
}
.pomewell-root *::-webkit-scrollbar-thumb:hover {
  background: rgba(124, 42, 31, 0.55);
  background-clip: content-box;
}
.pomewell-root *::-webkit-scrollbar-corner { background: transparent; }

/* Hide scrollbars completely on horizontal scroll strips and the page-tab rail */
.no-scrollbar { scrollbar-width: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* ─── Range input — custom warm-palette thumb to replace browser purple ── */
.pomewell-root input[type=range] { cursor: pointer; }
.pomewell-root input[type=range]::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 4px;
}
.pomewell-root input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ink-1);
  border: 2px solid var(--paper-1);
  box-shadow: 0 1px 4px rgba(75,55,30,0.30);
  cursor: pointer;
  margin-top: -5px;
  transition: background .15s;
}
.pomewell-root input[type=range]::-webkit-slider-thumb:hover {
  background: var(--accent-rust);
}
.pomewell-root input[type=range]::-moz-range-thumb {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ink-1);
  border: 2px solid var(--paper-1);
  box-shadow: 0 1px 4px rgba(75,55,30,0.30);
  cursor: pointer;
  transition: background .15s;
}
.pomewell-root input[type=range]::-moz-range-thumb:hover {
  background: var(--accent-rust);
}