/* ============================================================
   Noolberry Design System — v1.0
   Single-file stylesheet. Tokens + component classes.

   Vendored from the Claude Design handoff with two changes:
     1. The Google Fonts @import was removed — fonts are enqueued
        in functions.php (a stylesheet @import blocks rendering).
     2. Image paths rewritten ../assets/*.png -> ../img/*.png to
        match this theme's assets/{css,img} layout.
   Everything else is byte-for-byte the handoff. Do not add
   colours, fonts, or radii that are not defined here.
   ============================================================ */

/* ---------- 1. TOKENS -------------------------------------- */
:root {
  /* Warm neutrals (oatmeal / paper) */
  --oat-100:#F6EEE1; --oat-200:#F3E8D4; --oat-300:#F0E5CF; --oat-400:#E7DED0;
  --cream-50:#FFFCF7; --cream-100:#FBF4EC;

  /* Berry / plum brand */
  --berry-700:#742F4A; --berry-600:#8E3B5C; --berry-500:#9A3E63;
  --berry-300:#C87E97; --berry-200:#B98A99;

  /* Aubergine ink */
  --ink-900:#3F2029; --ink-800:#472A34; --ink-600:#6B4F57;
  --ink-500:#7B5D63; --ink-300:#A99E8D;

  --sage-400:#A7AE93;
  --on-berry:#FBEFE9;

  /* Semantic aliases — prefer these in markup */
  --bg-page:var(--oat-400);
  --surface-container:var(--oat-200);
  --surface-card:var(--cream-50);
  --surface-hero:var(--oat-300);
  --text-heading:var(--ink-800);
  --text-heading-strong:var(--ink-900);
  --text-body:var(--ink-600);
  --text-muted:var(--ink-500);
  --text-caption:var(--ink-300);
  --text-accent:var(--berry-500);
  --action-bg:var(--berry-600);
  --action-bg-hover:var(--berry-700);
  --action-fg:var(--on-berry);
  --rule:rgba(154,62,99,.14);

  /* Type */
  --font-display:"Marcellus",Georgia,"Times New Roman",serif;
  --font-body:"Mulish",system-ui,-apple-system,sans-serif;
  --font-label:"Jost",system-ui,sans-serif;
  --text-hero:46px; --text-h2:44px; --text-h3:34px; --text-title:26px;
  --text-body-lg:15px; --text-body-sm:13px;
  --text-eyebrow:11.5px; --tracking-eyebrow:.22em;
  --text-wordmark:23px; --tracking-wordmark:.4em;
  --text-button:13px; --tracking-button:.12em;

  /* Space / shape */
  --space-1:8px; --space-2:12px; --space-3:16px; --space-4:22px;
  --space-5:26px; --space-6:44px; --space-7:54px; --space-8:60px;
  --radius-sharp:2px; --radius-card:8px; --radius-container:14px;
  --shadow-card:0 12px 32px -20px rgba(76,34,52,.5);
  --shadow-container:0 24px 60px -30px rgba(76,34,52,.45);
  --page-max:1180px; --gutter:44px;
}

/* ---------- 2. BASE ---------------------------------------- */
body{margin:0;background:var(--bg-page);font-family:var(--font-body);color:var(--text-heading);-webkit-font-smoothing:antialiased}
a{color:var(--text-accent);text-decoration:none}
a:hover{color:var(--berry-700);text-decoration:underline}
img{max-width:100%}

/* ---------- 3. LAYOUT -------------------------------------- */
.nb-page{min-height:100vh;padding:var(--space-5);box-sizing:border-box;display:flex;justify-content:center;align-items:flex-start}
.nb-shell{width:100%;max-width:var(--page-max);margin:0 auto;border-radius:var(--radius-container);overflow:hidden;box-shadow:var(--shadow-container);background:var(--oat-200) url('../img/berry-paper.png') top center/100% auto no-repeat}
.nb-section{padding:var(--space-7) var(--gutter) 46px}

/* ---------- 4. TYPE ---------------------------------------- */
.nb-eyebrow{font-size:var(--text-eyebrow);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent);font-weight:700}
.nb-h1{font-family:var(--font-display);font-weight:400;font-size:var(--text-hero);line-height:1.16;margin:var(--space-3) 0 0;color:var(--text-heading-strong);max-width:600px;text-wrap:pretty}
.nb-h2{font-family:var(--font-display);font-weight:400;font-size:var(--text-h2);margin:0;color:var(--text-heading)}
.nb-h3{font-family:var(--font-display);font-weight:400;font-size:var(--text-h3);line-height:1.25;margin:0 0 14px;color:var(--text-heading);text-wrap:pretty}
.nb-body{font-size:var(--text-body-lg);line-height:1.8;color:var(--text-body);margin:0 0 var(--space-5)}
.nb-small{font-size:var(--text-body-sm);line-height:1.7;color:var(--text-muted);margin:0}
.nb-wordmark{font-family:var(--font-label);font-weight:400;font-size:var(--text-wordmark);letter-spacing:var(--tracking-wordmark);text-transform:lowercase;color:var(--text-heading);padding-left:.4em}
.nb-wordmark--sm{font-size:17px;letter-spacing:.38em}

/* ---------- 5. BUTTONS ------------------------------------- */
.nb-btn{display:inline-flex;align-items:center;font-family:var(--font-body);font-weight:700;font-size:13.5px;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;border:0;background:none}
.nb-btn--solid{background:var(--action-bg);color:var(--action-fg);padding:15px 30px;border-radius:var(--radius-sharp);transition:background .18s ease}
.nb-btn--solid:hover{background:var(--action-bg-hover);text-decoration:none;color:var(--action-fg)}
.nb-btn--underline{color:var(--text-heading-strong);border-bottom:1px solid var(--text-accent);padding-bottom:3px}
.nb-btn--underline:hover{color:var(--berry-700);text-decoration:none}
.nb-btn--sm{font-size:12px;letter-spacing:.14em;padding:14px 30px}

/* ---------- 6. HEADER / NAV -------------------------------- */
.nb-header{display:flex;align-items:center;justify-content:space-between;padding:20px var(--gutter);background:rgba(246,238,225,.55);backdrop-filter:blur(2px);border-bottom:1px solid var(--rule)}
.nb-nav{display:flex;gap:var(--space-4);align-items:center;color:var(--text-heading)}
.nb-nav a{color:var(--text-heading);font-size:13px;letter-spacing:.06em}
.nb-icon{cursor:pointer;line-height:1}

/* ---------- 7. HERO ---------------------------------------- */
.nb-hero{position:relative;min-height:560px;background:var(--surface-hero) url('../img/berry-hero.png') center/cover no-repeat}
.nb-hero__copy{position:absolute;top:52px;left:52px;right:52px}
.nb-hero__actions{position:absolute;left:52px;bottom:46px;display:flex;gap:var(--space-3);align-items:center}
.nb-float{position:absolute;right:66px;bottom:110px;font-family:var(--font-display);font-size:150px;color:rgba(142,59,92,.22);animation:nbFloat 6s ease-in-out infinite}
@keyframes nbFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ---------- 8. SECTION HEADING ------------------------------ */
.nb-sechead{display:flex;align-items:baseline;gap:var(--space-3);margin:0 0 32px}
.nb-sechead__trail{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--text-accent);font-weight:700}

/* ---------- 9. PRODUCT CARD --------------------------------- */
.nb-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--space-5)}
.nb-card{background:var(--surface-card);border-radius:var(--radius-card);overflow:hidden;box-shadow:var(--shadow-card);cursor:pointer;transition:transform .22s ease;display:block}
.nb-card:hover{transform:translateY(-4px);text-decoration:none}
.nb-card__media{height:230px;background:var(--cream-100) url('../img/berry-collection.png') center/cover no-repeat}
.nb-card__body{padding:22px 24px 26px}
.nb-card__title{font-family:var(--font-display);font-size:var(--text-title);color:var(--text-heading)}

/* ---------- 10. EDITORIAL BAND ------------------------------ */
.nb-band{display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.nb-band__text{padding:var(--space-8) 52px;display:flex;flex-direction:column;justify-content:center;background:rgba(247,240,225,.66)}
.nb-band__text .nb-body{max-width:400px}
.nb-band__media{position:relative;min-height:380px;background:var(--surface-hero) url('../img/berry-hero.png') center/cover}

/* ---------- 11. FOOTER + NEWSLETTER ------------------------- */
.nb-footer{padding:var(--gutter) var(--gutter) 36px;display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-6);background:rgba(246,238,225,.5);border-top:1px solid var(--rule)}
.nb-footer__cols{display:flex;gap:var(--gutter)}
.nb-footer__col{display:flex;flex-direction:column;gap:9px;font-size:13px;color:var(--text-body)}
.nb-footer__col b{font-weight:700;color:var(--text-heading);margin-bottom:2px}
.nb-signup__title{font-weight:700;font-size:13px;color:var(--text-heading);margin-bottom:10px}
.nb-signup__row{display:flex;gap:var(--space-1)}
.nb-signup__input{background:#fff;border:0;padding:11px 14px;border-radius:var(--radius-sharp);font-family:var(--font-body);font-size:12.5px;color:var(--text-heading);flex:1;min-width:0}
.nb-signup__input::placeholder{color:var(--text-caption)}
.nb-signup__go{background:var(--action-bg);color:var(--action-fg);border:0;padding:11px 16px;border-radius:var(--radius-sharp);font-size:12.5px;cursor:pointer}
.nb-signup__go:hover{background:var(--action-bg-hover)}

/* ---------- 12. RESPONSIVE ---------------------------------- */
@media (max-width:900px){
  .nb-grid,.nb-band{grid-template-columns:1fr}
  .nb-footer{flex-direction:column}
  .nb-hero{min-height:440px}
  :root{--text-hero:34px;--text-h2:32px;--text-h3:26px;--gutter:24px}
  .nb-hero__copy{top:32px;left:24px;right:24px}
  .nb-hero__actions{left:24px;bottom:28px}
  .nb-band__text{padding:40px 24px}
  .nb-float{display:none}
}