/* The personal apps' theme: Sunset's design system, in rainbow.

   Loaded after app.css on every personal page and changes only colour.
   Layout, type, spacing and every component come from app.css, so the two
   families stay in step whenever either one changes.

   Two kinds of colour live here, kept apart on purpose:
   - the RAINBOW is decoration: the band across the top, the mark, nav
     tabs, tiles. It runs in spectrum order because it's meant to look
     like a rainbow.
   - the DATA hues (--hue-*) mark one spending heading each on charts.
     They are NOT in spectrum order — neighbours in the rainbow are too
     alike to tell apart in a chart, especially colour-blind. This order
     passes the dataviz validator (contrast >= 3:1 on white, CVD dE >= 8);
     re-run it before changing one. */

:root {
  /* Buttons, focus rings and links: a violet that keeps white text at
     better than 7:1. Highlight tints derive from it in app.css. */
  --terracotta: #6B3FD4;
  --terracotta-dark: #5730B3;

  --rainbow: linear-gradient(90deg,
    #E0353B 0%, #E8650A 16%, #E9A400 32%, #1F9D55 50%, #0A84D6 66%, #6B3FD4 83%, #D23C96 100%);

  --hue-1: #E0353B;  /* red */
  --hue-2: #0A84D6;  /* blue */
  --hue-3: #B07400;  /* gold, darkened to read on white */
  --hue-4: #7A4FE0;  /* violet */
  --hue-5: #1F9D55;  /* green */
  --hue-6: #D23C96;  /* pink */
  --hue-7: #E8650A;  /* orange */

  /* Kept is good news, and always this colour. */
  --kept: #1F9D55;
  --kept-tint: #E7F5EC;
}

/* The band of colour across the top of every page. */
body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 5px;
  background: var(--rainbow); z-index: 10;
}

/* The mark: a small rainbow in place of the sun. */
.brand-row .mark { color: inherit; }
.brand-row .wordmark {
  background: var(--rainbow); -webkit-background-clip: text; background-clip: text;
  color: transparent; font-weight: 700;
}

/* Hub tiles each take the next colour of the rainbow. The hover border
   comes first so the coloured top edge, declared after it, survives it. */
.tile { border-top-width: 4px; }
.tile:hover { border-color: var(--accent-edge); }
.tile:nth-child(7n + 1) { border-top-color: var(--hue-1); }
.tile:nth-child(7n + 2) { border-top-color: var(--hue-7); }
.tile:nth-child(7n + 3) { border-top-color: #E9A400; }
.tile:nth-child(7n + 4) { border-top-color: var(--hue-5); }
.tile:nth-child(7n + 5) { border-top-color: var(--hue-2); }
.tile:nth-child(7n + 6) { border-top-color: var(--hue-4); }
.tile:nth-child(7n + 7) { border-top-color: var(--hue-6); }

/* The Google button on the sign-in page. */
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--white); color: var(--ink); border: 1px solid var(--border);
}
.btn-google:hover { border-color: var(--terracotta); }
.btn-google svg { width: 18px; height: 18px; }