/* Cozie Pillow design tokens and base styles ("Pearl and midnight").
   Source of truth: design-system.html. Component classes live in components.css.
   Brass means "buy": the buy button fill and star ratings only. */


:root {
  /* Surfaces */
  --cp-linen: #EFE7DB;
  --cp-oat: #E5DACA;
  --cp-pearl: #FCFAF6;   /* page and reading text */
  --cp-white: #FFFFFF;   /* cards, inputs, tables */
  --cp-line: #DDD3C4;
  --cp-border-input: #8C8478;

  /* Ink */
  --cp-midnight: #222A3F;
  --cp-midnight-soft: #364059;
  --cp-slate: #4A5062;
  --cp-placeholder: #5F6575;

  /* Accents */
  --cp-mist: #A7B4C2;
  --cp-sage: #8FA08A;
  --cp-sage-deep: #52634E;
  --cp-sage-deeper: #435342;
  --cp-brass: #D4A24C;      /* buy button fill and stars only */
  --cp-brass-edge: #A87A27;
  --cp-brass-light: #E2B55F;

  /* Feedback */
  --cp-success-bg: #E8EDE3;  --cp-success-text: #3F5239;  --cp-success-line: #8FA08A;
  --cp-warning-bg: #F6EBD3;  --cp-warning-text: #6B4E1B;  --cp-warning-line: #D4A24C;
  --cp-error-bg:   #F6E3DE;  --cp-error-text:   #8E3B33;  --cp-error-line:   #B5564B;
  --cp-info-bg:    #E4EAF0;  --cp-info-text:    #2F4057;  --cp-info-line:    #A7B4C2;

  /* Type */
  --cp-font-heading: 'Fraunces', Georgia, 'Times New Roman', serif;
  --cp-font-body: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --cp-text-xs: 0.8125rem;   /* 13 */
  --cp-text-sm: 0.9375rem;   /* 15 */
  --cp-text-base: 1.0625rem; /* 17 */
  --cp-text-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);   /* 18-20 */
  --cp-text-xl: clamp(1.5rem, 1.3rem + 0.8vw, 1.75rem);      /* 24-28 */
  --cp-text-2xl: clamp(2rem, 1.6rem + 1.6vw, 2.5rem);        /* 32-40 */
  --cp-text-3xl: clamp(2.5rem, 1.9rem + 2.6vw, 3.5rem);      /* 40-56, page and category titles */
  --cp-text-display: clamp(3.5rem, 1.5rem + 7vw, 7.5rem);    /* 56-120, homepage headline only */
  /* Article scale: post titles run 60-90 characters, so they stay smaller */
  --cp-text-post-title: clamp(1.875rem, 1.45rem + 1.7vw, 2.625rem);  /* 30-42 */
  --cp-text-post-h2: clamp(1.625rem, 1.4rem + 0.9vw, 2rem);          /* 26-32 */
  --cp-text-post-h3: clamp(1.3125rem, 1.2rem + 0.45vw, 1.5rem);      /* 21-24 */
  --cp-text-card: clamp(1.25rem, 1.15rem + 0.3vw, 1.375rem);         /* 20-22 */

  --cp-weight-regular: 400;
  --cp-weight-medium: 500;
  --cp-weight-semibold: 600;
  --cp-weight-display: 300;

  --cp-leading-tight: 1.12;
  --cp-leading-snug: 1.35;
  --cp-leading-body: 1.7;

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

  /* Shape */
  --cp-radius-xs: 6px;
  --cp-radius-sm: 8px;
  --cp-radius-md: 16px;
  --cp-radius-lg: 28px;
  --cp-radius-pill: 999px;
  --cp-shadow-soft: 0 1px 2px rgba(34,42,63,.04), 0 8px 24px rgba(34,42,63,.06);
  --cp-shadow-lift: 0 2px 4px rgba(34,42,63,.05), 0 16px 40px rgba(34,42,63,.10);
  --cp-ring: 0 0 0 2px var(--cp-pearl), 0 0 0 4px var(--cp-midnight);

  /* Motion */
  --cp-ease: cubic-bezier(.22,.61,.36,1);
  --cp-dur-fast: 150ms;
  --cp-dur-base: 250ms;
  --cp-dur-slow: 400ms;

  /* Layout */
  --cp-content: 720px;
  --cp-wide: 1320px;
  --cp-gutter: 24px;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--cp-pearl);
  color: var(--cp-slate);
  font-family: var(--cp-font-body);
  font-size: var(--cp-text-base);
  line-height: var(--cp-leading-body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--cp-space-4);
  color: var(--cp-midnight);
  font-family: var(--cp-font-heading);
  font-weight: var(--cp-weight-display);
  line-height: var(--cp-leading-tight);
  letter-spacing: -0.01em;
  font-variation-settings: 'SOFT' 100, 'WONK' 0;
}
h1 { font-size: var(--cp-text-3xl); }
h2 { font-size: var(--cp-text-2xl); }
h3 { font-size: var(--cp-text-xl); font-weight: 400; }
h4 { font-size: var(--cp-text-lg); font-weight: 400; }
h5 { font-size: var(--cp-text-base); font-family: var(--cp-font-body); font-weight: 600; letter-spacing: 0; line-height: var(--cp-leading-snug); }
h6 { font-size: var(--cp-text-xs); font-family: var(--cp-font-body); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--cp-sage-deep); }
h1, h2, h3, h4 { text-wrap: balance; }
/* Article scale: use .cp-article on the post content wrapper; .cp-post-* are the same sizes as utilities. */
.cp-post-title, .cp-article > h1 { font-size: var(--cp-text-post-title); font-weight: 400; line-height: 1.15; letter-spacing: -0.012em; }
.cp-post-h2, .cp-article > h2 { font-size: var(--cp-text-post-h2); font-weight: 400; line-height: 1.2; }
.cp-post-h3, .cp-article > h3 { font-size: var(--cp-text-post-h3); font-weight: 400; line-height: 1.25; }
.cp-article > h2 { margin: var(--cp-space-7) 0 var(--cp-space-4); }
.cp-article > h3 { margin: var(--cp-space-6) 0 var(--cp-space-3); }
p { margin: 0 0 var(--cp-space-4); }
a { color: var(--cp-midnight); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1.5px; transition: color var(--cp-dur-fast) var(--cp-ease); }
a:hover { color: var(--cp-sage-deep); }
:focus-visible { outline: 2px solid var(--cp-midnight); outline-offset: 3px; border-radius: 4px; }
img, svg { max-width: 100%; }
hr { border: 0; height: 1px; background: var(--cp-line); margin: var(--cp-space-6) 0; }
ul, ol { padding-left: 1.25rem; margin: 0 0 var(--cp-space-4); }
li { margin-bottom: var(--cp-space-2); }
li::marker { color: var(--cp-slate); }
small, .cp-small { font-size: var(--cp-text-sm); }
.cp-lead { font-size: var(--cp-text-lg); line-height: 1.6; color: var(--cp-slate); }
.cp-eyebrow { display: block; margin-bottom: var(--cp-space-3); font-size: var(--cp-text-xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cp-sage-deep); }
.cp-caption { font-size: var(--cp-text-xs); color: var(--cp-placeholder); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
svg.i { width: 1.15em; height: 1.15em; flex: none; vertical-align: -0.2em; }