/* =========================================================
   SULVEO — 1. Design Tokens & Variables
   ========================================================= */

:root {
  --ink: #411c22;
  --coal: #4d232a;
  --card: #572931;
  --line: #743843;
  --bronze: #c5814f;
  --bronze-lt: #e9b285;
  --bronze-dk: #8f5228;
  --cream: #f6e9db;
  --sand: #c7a09b;
  --wa: #25d366;
  --header-h: 60px;

  /* RGB equivalents for alpha composition: rgb(var(--bronze-rgb) / .3) */
  --bronze-rgb: 197 129 79;
  --wa-rgb: 37 211 102;
  --ink-rgb: 65 28 34;
  --coal-rgb: 77 35 42;
  --card-rgb: 87 41 49;
  --line-rgb: 116 56 67;
  --sand-rgb: 199 160 155;

  --font-display: "Zain", "Space Grotesk", "Segoe UI", sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Space Grotesk", sans-serif;
  --font-num: "Space Grotesk", "IBM Plex Sans Arabic", sans-serif;

  --ease: cubic-bezier(.19, 1, .22, 1);
  --shadow-bronze: 0 12px 36px rgb(var(--bronze-rgb) / .4);
  --shadow-bronze-lg: 0 16px 44px rgb(var(--bronze-rgb) / .55);
}