/* Ulysse brand tokens.
 *
 * Sampled from the pitchbook rather than guessed: pages 1 and 6 were rasterised at 150 dpi
 * and the dominant colours counted, so these are the exact values in the deck. Every page
 * reads from this file, so the brand changes in one place.
 *
 * The wordmark is a rounded indigo-to-violet mark followed by navy "Ulysse". The mark is the
 * only place the two accents appear together, and it is the same geometry as the favicon.
 */

:root {
  /* Core */
  --navy:        #2E3A6E;   /* headings, dark panels. 19.4% of pitchbook page 6 */
  --navy-deep:   #23253F;   /* deepest shade, used inside dark panels */
  --indigo:      #5A5BC0;   /* accent, gradient start */
  --violet:      #8A63D6;   /* accent, gradient end */
  --accent:      #6C5EC8;   /* solid mid-accent, sampled from the wordmark X */

  /* Surfaces */
  --white:       #FFFFFF;
  --card:        #F4F5FB;   /* card and panel fill */
  --lavender:    #EEECFA;   /* pale callout fill */
  --lavender-2:  #E7E5F8;   /* slightly deeper callout fill */
  --border:      #DFE2F0;

  /* Text */
  --ink:         #2E3A6E;
  --body:        #3E4356;
  --muted:       #5A5D70;
  --grey:        #9A9BA7;

  /* Status, used by the platform console */
  --eligible:    #1B7F5A;
  --near:        #B4791B;
  --excluded:    #98A6B3;

  /* Type. Source Serif 4 is self-hosted below, so there is no runtime font fetch and
   * nothing to block. Body uses the system sans, which is faster than any download. */
  --font-serif:  "Source Serif 4", Georgia, "Iowan Old Style", "Palatino Linotype", serif;
  --font-sans:   -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto,
                 Helvetica, Arial, sans-serif;
  --font-mono:   "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Rhythm */
  --gradient:    linear-gradient(100deg, var(--indigo), var(--violet));
  --radius:      8px;
  --shadow:      0 1px 2px rgba(46, 58, 110, .06), 0 6px 20px rgba(46, 58, 110, .05);
  --maxw:        1160px;
}

/* Latin subset only, 62 KB across three weights. */
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/sourceserif4-400.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("../fonts/sourceserif4-600.woff2") format("woff2");
}
@font-face {
  font-family: "Source Serif 4";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("../fonts/sourceserif4-700.woff2") format("woff2");
}

/* ---------------------------------------------------------------- wordmark component
 * Built in CSS rather than shipped as a bitmap, so it stays sharp at any size and can be
 * recoloured for dark backgrounds. Used in the header, the hero and the platform console.
 */
.wordmark {
  font-family: var(--font-sans);
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--navy);
  display: inline-flex;
  align-items: center;
  gap: .4em;
  line-height: 1;
  white-space: nowrap;
}
.wordmark .mark {
  width: .62em;
  height: .62em;
  border-radius: .19em;
  background: var(--gradient);
  flex: 0 0 auto;
}
.wordmark.on-dark { color: #fff; }
.wordmark.on-dark .mark { background: linear-gradient(100deg, #A9A6F5, #C6A5F2); }