/*
 * Design tokens shared by the public site and the admin panel.
 * Palette sampled from the gemach trailer artwork: cream panel, olive hills,
 * navy river, dark-olive ring of the memorial badge.
 */
:root {
  /* Surfaces */
  --cream: #F4EFDC;        /* main page background (trailer panel) */
  --cream-2: #EAE3C8;      /* alternate section background */
  --paper: #FBF8EF;        /* cards, inputs */
  --sand: #D8CEA8;         /* borders, dividers */
  --sand-2: #C7BB8E;

  /* Olive (hills, headlines) */
  --olive-900: #343F24;
  --olive-800: #444F30;    /* badge ring */
  --olive-700: #56653A;    /* text-safe olive on cream (AA) */
  --olive-600: #677A43;
  --olive-500: #7B8C4F;    /* hills, decorative, large headings */
  --olive-300: #A8B47D;    /* light hills */
  --olive-100: #E2E6CC;

  /* Navy (river, body copy on the trailer) */
  --navy-900: #172E40;
  --navy-800: #1F3D54;     /* text-safe navy */
  --navy-600: #2C5472;     /* river */
  --navy-400: #4F7A99;
  --navy-100: #DCE6EC;

  /* Text */
  --text: #22303B;
  --text-muted: #55605F;
  --text-on-dark: #FBF8EF;

  /* Sparing warm accent (campfire) — badges / highlights only */
  --ember: #C4702C;
  --ember-100: #F6E2CC;

  /* Status colours (admin + booking status) */
  --st-pending: #B7791F;
  --st-pending-bg: #FBEFD5;
  --st-approved: #4E6B2E;
  --st-approved-bg: #E3EBCF;
  --st-picked: #2C5472;
  --st-picked-bg: #DCE6EC;
  --st-returned: #5B6B5B;
  --st-returned-bg: #E6E9E2;
  --st-cancelled: #6B6B6B;
  --st-cancelled-bg: #ECECEC;
  --st-rejected: #A33A2C;
  --st-rejected-bg: #F6DDD8;
  --danger: #A33A2C;
  --success: #4E6B2E;

  /* Typography */
  --font-display: "Karantina", "Rubik", system-ui, sans-serif; /* condensed, like the trailer quote */
  --font-ui: "Rubik", "Segoe UI", "Arial Hebrew", system-ui, sans-serif;
  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-md: 1.0625rem;
  --fs-lg: 1.25rem;
  --fs-xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --fs-2xl: clamp(2rem, 1.4rem + 2.4vw, 3rem);
  --fs-display: clamp(3rem, 1.8rem + 5vw, 5.75rem);

  /* Shape & depth */
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 24px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(52, 63, 36, 0.08), 0 2px 6px rgba(52, 63, 36, 0.06);
  --shadow: 0 6px 20px rgba(52, 63, 36, 0.10), 0 2px 6px rgba(52, 63, 36, 0.06);
  --shadow-lg: 0 18px 50px rgba(23, 46, 64, 0.16);
  --ring: 0 0 0 3px rgba(44, 84, 114, 0.35);

  /* Spacing */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;

  --container: 1180px;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}