/* ==========================================================
   NelaV Trading — Design tokens (colors, fonts, sizes)
   Use: <link rel="stylesheet" href="css/nelav-tokens.css">
   ========================================================== */

/* ---------- Fonts (self-hosted, files in /fonts) ---------- */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-500-italic.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("../fonts/cormorant-garamond-latin-600-italic.woff2") format("woff2");
  font-weight: 600; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin-400-normal.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin-500-normal.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "DM Sans";
  src: url("../fonts/dm-sans-latin-600-normal.woff2") format("woff2");
  font-weight: 600; font-style: normal; font-display: swap;
}

:root {
  /* ---------- Colors ---------- */
  /* Forest greens (dark backgrounds) */
  --forest:        #15231D;  /* main dark background, nav, hero */
  --forest-raised: #1C2D25;  /* cards on dark background */
  --forest-deep:   #101B16;  /* footer */

  /* Creams (light backgrounds) */
  --cream:         #F4EFE4;  /* main light background */
  --cream-card:    #FBF8F1;  /* cards on light background */
  --cream-line:    #E4DBC8;  /* borders on light background */
  --input-line:    #C9BFA8;  /* form field borders */

  /* Golds (brand accent, from the logo) */
  --gold:          #C9A45C;  /* buttons, rings, lines */
  --gold-light:    #E2C27F;  /* gold text on dark (product names, accents) */
  --gold-text:     #D4B06A;  /* small gold labels on dark */
  --gold-dark:     #7A5A24;  /* gold text on cream (passes contrast) */

  /* Text */
  --text-dark:     #1B2A22;  /* headings/body on cream */
  --text-muted:    #3E4A42;  /* secondary text on cream */
  --text-light:    #F4EFE4;  /* headings/body on forest */
  --text-soft:     #D9D2C3;  /* secondary text on forest */
  --text-subtle:   #CFC7B6;  /* footer text */

  /* ---------- Typography ---------- */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif; /* headings, product names (italic) */
  --font-body:    "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif; /* body, buttons, labels */

  --size-hero:    clamp(44px, 5.6vw, 76px);
  --size-h2:      54px;
  --size-h3:      30px;
  --size-product: 34px;   /* italic product names */
  --size-body:    18px;
  --size-small:   15px;
  --size-label:   13px;   /* uppercase eyebrow labels, letter-spacing 0.26em */

  /* ---------- Shape & layout ---------- */
  --radius-card:  20px;
  --radius-input: 10px;
  --radius-pill:  999px;
  --max-width:    1280px;
  --section-pad:  104px;
}