/* JoynUs design tokens, editorial letterpress.
   Warm paper, deep ink, a clay accent, characterful Fraunces display. */
:root {
  /* Surfaces */
  --paper:      #faf6ef;   /* page background, warm ivory */
  --paper-2:    #f4ecdf;   /* raised cards / wells */
  --paper-3:    #efe5d4;   /* hover / striped rows */
  --ink:        #221e18;   /* primary text, warm near-black */
  --ink-soft:   #5d5446;   /* secondary text */
  --ink-faint:  #8b8071;   /* meta / captions */
  --line:       #e3d8c6;   /* hairline borders */
  --line-strong:#d4c5ad;

  /* Accents */
  --clay:       #be5b43;   /* primary accent */
  --clay-dark:  #9c4631;
  --clay-tint:  #f3e0d8;   /* clay wash */
  --sage:       #5a6b54;   /* secondary accent */
  --gold:       #b68a4e;   /* hairline / seal detail */

  /* Feedback */
  --danger:     #a8392a;
  --ok:         #4f6b48;
  /* The attending outline on a guest person-chip, deliberately NOT --ok. --ok is
     the muted sage that success notices and status chips are built from and it
     must stay muted; this one is a scanning signal on a dense guest list, where
     the host wants "who's coming" to jump off the page. Only person-chip.attending
     uses it, do not reach for it as a general success colour.
     Teal-leaning rather than the yellower #39ff14 it started as: the chip fills
     underneath are pale blue and pale pink, and a yellow-green goes muddy on the
     pink. */
  --rsvp-yes:   #22e39b;

  /* Type */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif;
  --font-secondary:  "Frank Ruhl Libre", "David Libre", serif;

  /* Scale (fluid) */
  --step--1: clamp(0.78rem, 0.74rem + 0.2vw, 0.86rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.5vw, 1.4rem);
  --step-2:  clamp(1.5rem, 1.3rem + 1vw, 1.95rem);
  --step-3:  clamp(2rem, 1.6rem + 2vw, 2.95rem);
  --step-4:  clamp(2.6rem, 1.9rem + 3.4vw, 4.4rem);

  /* Space */
  --sp-1: 0.375rem;
  --sp-2: 0.75rem;
  --sp-3: 1.25rem;
  --sp-4: 2rem;
  --sp-5: 3.25rem;
  --sp-6: 5rem;

  /* Form */
  --radius:    7px;
  --radius-lg: 14px;
  --ring:      0 0 0 3px rgba(190, 91, 67, 0.22);
  --shadow-sm: 0 1px 2px rgba(34, 30, 24, 0.06);
  --shadow:    0 6px 24px -12px rgba(34, 30, 24, 0.28);
  --shadow-lg: 0 30px 60px -32px rgba(34, 30, 24, 0.45);

  /* Paper grain, faint warm tint layered over the flat background */
  --grain:
    radial-gradient(1200px 600px at 100% -10%, rgba(190, 91, 67, 0.05), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(90, 107, 84, 0.06), transparent 55%);
}