/* ==========================================================================
   TOKENS — the single place where every colour, font, and spacing value lives.
   Change a value here and it updates everywhere on the site.
   This file holds ONLY variables. No layout, no styling. (See main.css for that.)
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------ */
  /* COLOURS — locked. Do not add new colours without updating the brief. */
  /* ------------------------------------------------------------------ */

  --near-black:  #100C06;              /* page background — a WARM near-black.
                                          This value is not a taste decision: it was measured out of
                                          the photographs themselves. The dark edges of the Limerick
                                          shots all sit at roughly #100C06–#100C07, so the page is
                                          literally the same colour the photographs fade into, and
                                          there is no seam where a picture meets the page.
                                          (It was #0A0A0B — a COLD black — which is why the photos
                                          used to look pasted on.) */
  --near-black-cold: #0A0A0B;          /* the original cold black. Kept only for reference. */
  --warm-cream:  #EDE6DA;              /* primary text, headlines, artist name */
  --warm-grey:   #B8B0A4;              /* body text                           */
  --ember:       #6B1F1F;              /* accent, deep (true oxblood — pooled dark blood).
                                          Used where the accent FILLS: text highlighting, larger areas.
                                          Historical note: the variable keeps its old name "ember";
                                          the colour was changed from #B14A2B by request. */
  --ember-lit:   #9E2C2C;              /* accent, lit (blood-red with light in it — no amber tint).
                                          Used where the accent STRIKES: track numbers, the send
                                          arrow, link hovers, focus outlines. */
  --hairline:    rgba(237, 230, 218, 0.12); /* faint dividing lines, borders   */


  /* ------------------------------------------------------------------ */
  /* TYPEFACES — Fraunces for display/serif, Inter for body/sans.        */
  /* The actual font files are loaded in main.css via @font-face.        */
  /* ------------------------------------------------------------------ */

  --font-display: "Fraunces", Georgia, "Times New Roman", serif;   /* headlines, artist name, italics */
  --font-body:    "Inter", system-ui, -apple-system, Arial, sans-serif; /* body text, navigation */


  /* ------------------------------------------------------------------ */
  /* SPACING — every value is a multiple of 8px. Use these, not raw px.  */
  /* ------------------------------------------------------------------ */

  --space-1:   8px;
  --space-2:   16px;
  --space-3:   24px;
  --space-4:   32px;
  --space-5:   40px;
  --space-6:   48px;
  --space-8:   64px;
  --space-10:  80px;
  --space-12:  96px;                   /* section padding on mobile */
  --space-16:  128px;
  --space-20:  160px;                  /* section padding on desktop */
  --space-24:  192px;                  /* extra-deep breathing room */


  /* ------------------------------------------------------------------ */
  /* LAYOUT WIDTHS — how wide things are allowed to get.                  */
  /* ------------------------------------------------------------------ */

  --content-max:   1280px;             /* the overall page column        */
  --prose-max:     620px;              /* paragraphs — kept narrow to read like a page */
  --line-max:      560px;              /* the mailing-list line + field  */
  --track-max:     680px;              /* the Spotify player             */
  --outer-margin:  clamp(24px, 6vw, 64px); /* page side margins: 24 on phones → 64 on desktop */


  /* ------------------------------------------------------------------ */
  /* MOTION — nothing animates faster than 300ms or longer than 1500ms.  */
  /* ------------------------------------------------------------------ */

  --ease-cinematic: cubic-bezier(0.2, 0.6, 0.2, 1); /* the site's signature easing */
  --dur-fast:   300ms;                 /* smallest allowed duration */
  --dur-hero:   1200ms;                /* hero fade-in on load      */
  --dur-max:    1500ms;                /* longest allowed duration  */
}