/* Colin Calnan Music: brand tokens.
   Source of truth for colour and type. DESIGN.md explains the rules.
   Load the fonts with:
   <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;800;900&family=Josefin+Sans:wght@300;400&family=Yellowtail&display=swap" rel="stylesheet">
*/

:root {
  /* the four brand colours, sampled from the Canva set and the printed tip card */
  --cm-teal:    #32BBA7;  /* the panel. Main field colour */
  --cm-yellow:  #FFCB05;  /* offset block */
  --cm-orange:  #F4A41D;  /* offset block, handle bar, buttons */
  --cm-white:   #FFFFFF;  /* ground and display type */

  /* support colours, for small text and states only */
  --cm-ink:       #1D2B2A;  /* small text anywhere. 6.2:1 on teal, 9.6:1 on yellow, 14.7:1 on white */
  --cm-teal-deep: #0A5F54;  /* links and small teal text on white (7.6:1) */
  --cm-orange-deep: #C97E06; /* hover on orange */

  /* type */
  --cm-display: "Montserrat", "Helvetica Neue", Arial, sans-serif;  /* 800-900, caps */
  --cm-script:  "Yellowtail", "Brush Script MT", cursive;          /* one short phrase */
  --cm-tracked: "Josefin Sans", "Futura", "Century Gothic", sans-serif; /* light, spaced */
  --cm-body:    "Montserrat", "Helvetica Neue", Arial, sans-serif;  /* 400-600 */

  /* the offset offset used by the splice title and the block grammar */
  --cm-splice: 0.055em;
}

/* Splice title: solid white caps with a white outline offset down-right.
   Usage: <h1 class="cm-splice" data-text="CRAZY LOVE">CRAZY LOVE</h1>  */
.cm-splice {
  position: relative;
  isolation: isolate;
  font: 900 1em/0.95 var(--cm-display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--cm-white);
}
.cm-splice::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  transform: translate(var(--cm-splice), var(--cm-splice));
  color: var(--cm-white);
  filter: url(#cm-outline);
  z-index: -1;
  pointer-events: none;
}

/* Outline title: outline only, for use over a photo (story format) */
.cm-outline {
  font: 800 1em/0.95 var(--cm-display);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--cm-white);
  filter: url(#cm-outline);
}

/* Both outlines are drawn with an SVG filter, not -webkit-text-stroke, because
   Montserrat's letters (R, E, and others) have overlapping contours and a stroke
   shows the seams inside the letter. Every page using .cm-splice or .cm-outline
   must include this once, anywhere in <body>:

<svg width="0" height="0" style="position:absolute" aria-hidden="true"><filter id="cm-outline" x="-5%" y="-5%" width="110%" height="110%"><feMorphology in="SourceAlpha" operator="dilate" radius="3" result="d"/><feComposite in="d" in2="SourceAlpha" operator="out" result="ring"/><feFlood flood-color="#fff"/><feComposite in2="ring" operator="in"/></filter></svg>

   radius is the line weight in px: 3 on 1080 canvases, 2 on web pages. */

/* Script kicker: "Colin sings", "Giveaway", "Tonight" */
.cm-script {
  font: 400 1em/1.1 var(--cm-script);
  color: var(--cm-white);
}
/* Glow variant, only over a photo */
.cm-script--glow { text-shadow: 0 0 0.25em rgba(50, 187, 167, 0.9), 0 0 0.6em rgba(50, 187, 167, 0.6); }

/* Tracked line: "By Van Morrison", dates, venue, time */
.cm-tracked {
  font: 300 1em/1.4 var(--cm-tracked);
  letter-spacing: 0.08em;
  color: var(--cm-white);
}

/* Handle bar: orange strip with the handle, bottom edge */
.cm-handle {
  font: 700 1em/1 var(--cm-body);
  color: var(--cm-white);
  background: var(--cm-orange);
}