/* =========================================================
   ALULA COMMUNICATIONS
   Design tokens
   ========================================================= */

:root {
  color-scheme: light;

  /* ---------- Parchment ---------- */

  --parchment: #eee1c5;
  --parchment-light: #fbf5e8;
  --parchment-deep: #d8c49c;


  /* ---------- Ink ---------- */

  --ink: #241c18;
  --ink-soft: #5b4b40;
  --ink-muted: #7c6a5c;


  /* ---------- Illumination ---------- */

  --gold: #9f7a32;
  --gold-light: #d7b968;

  --cyan: #32ecff;
  --magenta: #ff3bd4;


  /* aliases used by animation code */

  --alula-cyan: var(--cyan);
  --alula-magenta: var(--magenta);


  /* ---------- Lines ---------- */

  --line: rgba(73, 52, 35, 0.15);
  --line-soft: rgba(73, 52, 35, 0.08);


  /* ---------- Layout ---------- */

  --page-width: 1180px;
  --text-width: 720px;

  --page-padding:
    clamp(1rem, 4vw, 4rem);


  /* ---------- Shape ---------- */

  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.5rem;


  /* ---------- Typography ---------- */

  --display-font:
    "Iowan Old Style",
    "Palatino Linotype",
    Palatino,
    "Book Antiqua",
    Georgia,
    serif;

  --body-font:
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;


  /* ---------- Motion ---------- */

  --ease-alula:
    cubic-bezier(0.22, 1, 0.36, 1);


  /* ---------- Reactive light coordinates ---------- */

  --cyan-x: 50%;
  --cyan-y: 50%;

  --magenta-x: 50%;
  --magenta-y: 50%;
}