/* =========================================================
   CLIPPER ROUND THE WORLD — COLOURS & TYPE
   Tokens lifted from the Clipper Race Brand Guidelines v4.
   Primary palette + the secondary "leg" palette (one hue per leg).
   Typeface: Akzidenz Grotesk BQ (web: Aktiv Grotesque). Archivo is the
   closest free grotesque; Arial/Helvetica are the documented fallbacks.
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,600;0,700;0,800;0,900;1,400;1,600;1,700;1,800;1,900&display=swap');

:root {
  /* ---------- PRIMARY PALETTE ---------- */
  --race-red:    #b1001e;   /* Race Red — full circumnavigation, headlines */
  --race-red-br: #e0102a;   /* brighter screen red for small UI accents */
  --race-navy:   #213f7c;   /* Race Navy (also Leg 3) */
  --race-blue:   #004c90;   /* Pantone 301 */
  --race-cyan:   #009eeb;   /* Race Cyan */
  --heavy-black: #0f0b0c;   /* Heavy Black — data screens, sidebar */
  --ink:         #0f0b0c;
  --cool-grey:   #3f4344;   /* Cool Gray 10 */
  --mist:        #98a4ac;   /* Pantone 428 — secondary copy */
  --white:       #ffffff;
  --paper:       #f4f3f1;   /* soft white for light surfaces */

  /* ---------- SECONDARY: LEG PALETTE ---------- */
  --leg-1: #fcb131;  /* Race Yellow  */
  --leg-2: #8cc63f;  /* Race Lime    */
  --leg-3: #213f7c;  /* Race Navy    */
  --leg-4: #91278f;  /* Race Purple  */
  --leg-5: #ec008c;  /* Race Pink    */
  --leg-6: #f58220;  /* Race Orange  */
  --leg-7: #007f49;  /* Race Green   */
  --leg-8: #009eeb;  /* Race Cyan (used for the home leg)   */

  /* ---------- HAIRLINES ---------- */
  --line:        rgba(255,255,255,0.14);
  --line-dark:   rgba(15,11,12,0.12);

  /* ---------- TYPE FAMILIES ---------- */
  --font-display: 'Archivo', 'Arial Narrow', 'Helvetica Neue', Arial, sans-serif;
  --font-brand:   'Archivo', Arial, Helvetica, sans-serif;
  --font-body:    'Archivo', Arial, Helvetica, sans-serif;

  /* ---------- MOTION ---------- */
  --ease-out:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-panel: cubic-bezier(0.7, 0, 0.3, 1);
  --dur-fast:   0.2s;
  --dur-mid:    0.42s;
  --dur-slow:   0.85s;
}

/* Spinner for the in-browser background-removal busy state. */
@keyframes clipspin { to { transform: rotate(360deg); } }