/* ============================================================
   CooverBox / Coover.ai — Design System Foundations
   Colors + Typography tokens
   ------------------------------------------------------------
   Brand: premium gift packaging made from bookbinding cardboard.
   Visual world: antiquity — Renaissance manuscripts, Da Vinci
   sketches, gilded book covers, parchment, inscriptional serifs.
   ============================================================ */

/* ---- Webfonts (Google Fonts) -------------------------------
   NAMU (the brand display face) is NOT on Google Fonts. It is
   substituted here with "Unbounded" — a contemporary Ukrainian
   display typeface with full Cyrillic. Replace with real NAMU
   .woff2 files when available (see README → SUBSTITUTIONS).
   Jacques François Shadow = the logo wordmark serif (faithful).
   Open Sans = body. Montserrat Alternates = micro-labels.
   Inter = legal / fine print.
------------------------------------------------------------- */
@import url('https://fonts.googleapis.com/css2?family=Unbounded:wght@300;400;500;600;700&family=Jacques+Francois+Shadow&family=Open+Sans:ital,wght@0,400;0,600;0,700;1,400&family=Montserrat+Alternates:wght@400;500;600&family=Montserrat:wght@500;600;700&family=Inter:wght@400;500&display=swap');

:root {
  /* ===== CORE BRAND ===== */
  --green:        #254745;   /* deep forest green — primary action */
  --green-deep:   #1c3633;   /* pressed / darker green */
  --green-soft:   #38524f;   /* hover lift */
  --gold:         #ccb374;   /* primary gold — accents, footer text */
  --gold-light:   #d2bf90;   /* soft gold — icons on dark */
  --gold-pale:    #e8d9a8;   /* faint gold tint */
  --bronze:       #976122;   /* hairline rules, ornamental lines */
  --brown:        #644633;   /* card / panel borders, stitch lines */
  --brown-deep:   #5b3b14;   /* deepest wood-brown */

  /* ===== PARCHMENT NEUTRALS (surfaces) ===== */
  --paper:        #f2e7d9;   /* primary page background */
  --paper-alt:    #ede8db;   /* alternate page background */
  --surface:      #efede7;   /* fields, tag chips, inset panels */
  --field:        #f0f0f1;   /* text input fill */
  --white:        #ffffff;   /* scroll-panel / card white */

  /* ===== INK (text) ===== */
  --ink:          #090a0c;   /* primary text */
  --ink-navy:     #080922;   /* headings on cards (cool black) */
  --ink-warm:     #292422;   /* warm near-black, tag text + strokes */
  --ink-plain:    #0f0f0f;   /* neutral black */
  --ink-muted:    #4d4d4d;   /* secondary / helper text */
  --ink-faint:    rgba(15,15,15,0.6); /* placeholder, captions */

  /* ===== ON DARK ===== */
  --cream:        #efede7;   /* text on dark/green */
  --cream-warm:   #f6f0f0;   /* button label text */
  --footer-ink:   #14110d;   /* footer base (dark roast) */

  /* ===== ACCENTS (drawn from product imagery) ===== */
  --terracotta:   #dd8f57;   /* warm clay accent */
  --red:          #da2128;   /* signal red (seals, alerts) */
  --peach:        #f6d0ab;   /* pale warm highlight */
  --teal-grey:    #9ba5a2;   /* cool muted grey-green */

  /* ===== SHADOWS / ELEVATION ===== */
  --shadow-card:  0 4px 10px rgba(0,0,0,0.25);
  --shadow-soft:  0 2px 8px rgba(41,36,34,0.12);
  --shadow-lift:  0 10px 28px rgba(20,17,13,0.22);
  --inset-press:  inset 0 2px 5px rgba(0,0,0,0.18);

  /* ===== RADII ===== */
  --r-pill:   100px;  /* buttons */
  --r-tag:    60px;   /* tag chips */
  --r-lg:     24px;   /* large panels / hero media */
  --r-md:     12px;   /* media tiles */
  --r-sm:     6px;    /* fields, inset blocks */

  /* ===== HAIRLINES ===== */
  --rule-bronze: 1px solid var(--bronze);
  --rule-brown:  1px solid var(--brown);
  --rule-faint:  1px solid rgba(0,0,0,0.2);

  /* ===== TYPE FAMILIES ===== */
  --font-display: 'Unbounded', 'Montserrat', sans-serif;          /* NAMU substitute — headings */
  --font-logo:    'Jacques Francois Shadow', 'Cormorant', serif;  /* wordmark / Renaissance serif */
  --font-body:    'Open Sans', system-ui, sans-serif;             /* body copy */
  --font-label:   'Montserrat Alternates', 'Open Sans', sans-serif;/* micro-labels / taglines */
  --font-fine:    'Inter', system-ui, sans-serif;                 /* legal / fine print */

  /* ===== TYPE SCALE (px values mirror the Figma source) ===== */
  --t-hero:    50px;  /* H1 hero */
  --t-h2:      42px;  /* section heads */
  --t-h3:      24px;  /* card / sub heads */
  --t-lead:    20px;  /* lead paragraph / button-lg */
  --t-body:    18px;  /* standard body */
  --t-base:    16px;  /* UI default */
  --t-sm:      14px;  /* labels, fine */
  --t-xs:      12px;  /* micro */

  --lh-tight:  1.2;
  --lh-body:   1.4;
}

/* ============================================================
   SEMANTIC TYPE CLASSES
   ============================================================ */
.cb-hero {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-hero);
  line-height: var(--lh-tight);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: 0.01em;
}
.cb-h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--t-h2);
  line-height: var(--lh-body);
  color: var(--ink-plain);
  text-transform: uppercase;
}
.cb-h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--t-h3);
  line-height: var(--lh-body);
  color: var(--ink-navy);
}
.cb-wordmark {
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: 34px;
  line-height: var(--lh-tight);
  color: var(--ink);
  letter-spacing: 0.02em;
}
.cb-tagline {
  font-family: var(--font-label);
  font-weight: 500;
  font-size: var(--t-sm);
  line-height: var(--lh-tight);
  color: var(--ink);
  letter-spacing: 0.04em;
}
.cb-lead {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-lead);
  line-height: var(--lh-body);
  color: var(--ink);
}
.cb-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--ink);
}
.cb-body-sm {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--ink-muted);
}
.cb-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: var(--t-base);
  line-height: var(--lh-body);
  color: var(--ink-plain);
}
.cb-fine {
  font-family: var(--font-fine);
  font-weight: 500;
  font-size: var(--t-sm);
  line-height: 20px;
  color: var(--gold);
}