/* ───────────── Fonts (self-hosted, latin subset). CJK uses system fonts, see --cjk ───────────── */
@font-face { font-family: "Unbounded"; font-weight: 300; font-display: swap; src: url("../vendor/fonts/unbounded-latin-300-normal.woff2") format("woff2"); }
@font-face { font-family: "Unbounded"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/unbounded-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 400; font-display: swap; src: url("../vendor/fonts/oswald-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/oswald-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Oswald"; font-weight: 600; font-display: swap; src: url("../vendor/fonts/oswald-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 400; font-display: swap; src: url("../vendor/fonts/dm-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "DM Mono"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/dm-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 400; font-display: swap; src: url("../vendor/fonts/inter-tight-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 500; font-display: swap; src: url("../vendor/fonts/inter-tight-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Inter Tight"; font-weight: 600; font-display: swap; src: url("../vendor/fonts/inter-tight-latin-600-normal.woff2") format("woff2"); }

:root {
  /* Palette: exactly the 12 hex values supplied by ETN */
  --ink-900: #24221F;   /* page background */
  --ink-800: #302C27;   /* surfaces */
  --ink-700: #3A342E;   /* raised surfaces */
  --ink-600: #45403A;   /* lines, hover */
  --gold-300: #E3BE6E;  /* primary accent */
  --gold-500: #C79A3E;  /* mustard: buttons, hover */
  --clay: #D98E6A;      /* secondary accent */
  --sage: #A9C99A;      /* impact / sustainability */
  --forest: #2E3A2C;    /* impact panel */
  --white: #FFFFFF;
  --cream: #DCD6CC;     /* light section */
  --stone: #9A9289;     /* muted text */

  /* Towel ramp sampled from "Color Palette ETN.jpg" (used for gradients and product tints) */
  --tw-mustard: #8A512B;
  --tw-golden: #AC6837;
  --tw-amber: #BC784A;
  --tw-butter: #D39B72;
  --tw-lemon: #DDAB7A;
  --tw-custard: #E5C4A6;
  --tw-cream: #DEC5AE;

  /* Type. --cjk is also the fallback for Chinese and Arabic glyphs (the self-hosted fonts are Latin only) */
  --cjk: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans SC", "Source Han Sans SC", "Geeza Pro", "Noto Naskh Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --f-wide: "Unbounded", "Inter Tight", var(--cjk);
  --f-cond: "Oswald", "Inter Tight", var(--cjk);
  --f-mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, var(--cjk), monospace;
  --f-body: "Inter Tight", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, var(--cjk), sans-serif;

  /* Layout */
  --gutter: clamp(18px, 3.4vw, 56px);
  --maxw: 1680px;
  --sec-y: clamp(84px, 11vw, 190px);
  --r-s: 10px;
  --r-m: 18px;
  --r-l: 30px;

  /* Motion */
  --ease: cubic-bezier(.22, .8, .2, 1);
  --ease-io: cubic-bezier(.7, 0, .2, 1);

  /* Header height (JS keeps this exact) */
  --hdr: 68px;
}