/* =========================================================
   Vina Nuraini — Design tokens
   Lembar 01: editorial specimen / studio sheet
   ========================================================= */

:root {
  /* Palette — warm paper, warm ink, oxblood */
  --c-ink: #131010;
  --c-ink-2: #1b1616;
  --c-maroon: #6b1a29;
  --c-rose: #c98a92;
  --c-maroon-deep: #2b0c14;
  --c-paper: #f3efe7;
  --c-paper-dim: #e6dfd3;
  --c-gray: #a79c94;

  --c-paper-soft: rgba(243, 239, 231, 0.68);
  --c-ink-soft: rgba(19, 16, 16, 0.64);

  --line-dark: rgba(243, 239, 231, 0.14);
  --line-dark-strong: rgba(243, 239, 231, 0.32);
  --line-light: rgba(19, 16, 16, 0.14);
  --line-light-strong: rgba(19, 16, 16, 0.32);

  /* Typography */
  --font-display: "Fraunces", "Times New Roman", Georgia, serif;
  --font-body: "Manrope", "Segoe UI", Arial, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

  --fs-display: clamp(3.5rem, 10.4vw, 9rem);
  --fs-section: clamp(2.4rem, 5.6vw, 5rem);
  --fs-numeral: clamp(4.6rem, 9.4vw, 8.6rem);
  --fs-body: clamp(0.94rem, 1vw, 1rem);
  --fs-small: 0.8rem;
  --fs-label: 0.64rem;

  /* Layout */
  --container: 1240px;
  --gutter: clamp(20px, 4vw, 56px);
  --section-y: clamp(76px, 9vw, 132px);
  --nav-h: 64px;
  --frame-inset: 10px;

  /* Motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 0.25s;
  --dur-mid: 0.45s;
  --dur-slow: 0.9s;

  /* Surface */
  --radius: 0px;
  --grain-opacity: 0.04;
  --z-menu: 95;
  --z-header: 100;
  --z-modal: 200;
}

@media (min-width: 900px) {
  :root {
    --nav-h: 72px;
  }
}