/* Swoop's tokens (every component reads these names). Gold rush: a gold field (the brand, the one action, the hero, the
   mark), warm black for everything else (no white pages), cream for reading. Gold is a FILL with black type on it
   (12:1) and the accent as text on the black (12:1). Coral is the hero's highlight and its one bright button (black
   type on coral 6.4:1; coral as type on gold is only 1.9:1, so on the field it always wears a black outline). Green
   means money that moved or is live, never decoration. The gold token coin and the pigeon's sunset shades are the
   warm notes in the art. */
/* the fonts live on Swoop's own server (web/fonts, Latin, variable): no third party sees a visit, nothing to block */
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-stretch: 75% 100%; font-display: swap; src: url('/fonts/bricolage-latin.woff2') format('woff2'); }
@font-face { font-family: 'Figtree'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/fonts/figtree-latin.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2'); }

:root {
  color-scheme: dark;

  /* the brand */
  --sheen: #FFC21A;         /* gold: Swoop, the one action, the hero field (a fill) */
  --sheen-deep: #E9A800;
  --sheen-press: #C98F00;
  --sheen-text: #FFC21A;    /* gold as text on the black ground */
  --sheen-wash: rgba(255, 194, 26, 0.16);
  --coral: #FF5A36;         /* the highlight and the one bright button on the gold field */
  --coral-deep: #E8451F;
  --violet: #FF5A36;        /* the old name for the middle of the stripe: coral now */
  --jade: #3DFF9A;          /* money that moved or is live: BNB, delivered, live dots */
  --jade-deep: #3DFF9A;
  --jade-wash: rgba(61, 255, 154, 0.12);
  --plum: #12110E;          /* bands, and the ink on the bright fills */
  --plum-2: #050505;        /* the footer */
  --plum-hi: #1F1D18;
  --night: #0A0A0A;         /* the ground */
  --gold: #FFC93C;          /* a token, in the art; "soon" */
  --gold-2: #E9A912;
  --gold-ink: #FFD978;
  --teal: #3DFF9A;
  --cream: #1B1A16;
  /* old names a few components still read: they map onto the new world */
  --navy: #12110E;
  --navy-2: #050505;
  --navy-hi: #1F1D18;
  --red: #FFC21A;
  --red-2: #FFC21A;
  --red-wash: rgba(255, 194, 26, 0.16);
  --blue: #12110E;
  --blue-field: #12110E;
  --stripe: linear-gradient(90deg, var(--jade), var(--sheen) 50%, var(--coral));

  /* the surfaces: warm black, a step lighter for each layer */
  --page: #0A0A0A;
  --bg: #0A0A0A;
  --bg-2: #1D1C17;          /* wells, tracks, table heads */
  --surface: #141412;       /* cards */
  --surface-2: #1B1A16;
  --surface-3: #23211B;
  --line: #2C2A22;
  --line-2: #3A372C;
  --line-3: #5A5444;
  --border: 1px solid var(--line);
  --ink: #FFFBEA;
  --ink-2: #E9E3CF;
  --muted: #B3AA8F;
  --accent: #FFC21A;
  --accent-2: #E9A800;      /* the accent's hover and pressed fill */
  --accent-wash: rgba(255, 194, 26, 0.14);
  --on-accent: #0A0A0A;
  --accent-ink: #FFC21A;    /* the accent as TEXT on the black ground (12:1) */
  --good: #3DFF9A;
  --good-wash: rgba(61, 255, 154, 0.12);
  --bad: #FF8A95;
  --bad-wash: rgba(255, 138, 149, 0.12);
  --warn: #FFC96B;
  --warn-wash: rgba(255, 201, 107, 0.12);
  --pill: rgba(255, 251, 234, 0.08);

  --font-display: 'Bricolage Grotesque', 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-text: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;
  --display-weight: 800;
  --display-tracking: -0.035em;

  --wrap: 1200px;
  --gut: clamp(16px, 4vw, 40px);
  --top-h: 68px;
  --r-sm: 8px;
  --r: 12px;
  --r-lg: 16px;
  --r-xl: 22px;
  --r-btn: 999px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 0 rgba(255, 251, 234, 0.04) inset, 0 2px 6px rgba(0, 0, 0, 0.3);
  --shadow: 0 1px 0 rgba(255, 251, 234, 0.05) inset, 0 18px 36px -18px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 1px 0 rgba(255, 251, 234, 0.06) inset, 0 34px 70px -30px rgba(0, 0, 0, 0.85);

  --t-fast: 160ms;
  --t: 320ms;
  --t-slow: 700ms;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-stamp: cubic-bezier(0.3, 1.5, 0.5, 1);
}

/* the black bands (custody, the desk strip): a step lighter than the ground. Components read the same names. */
.on-navy, .on-plum {
  color-scheme: dark;
  --bg: #12110E;
  --bg-2: rgba(255, 251, 234, 0.07);
  --surface: #191814;
  --surface-2: #211F1A;
  --surface-3: #27251F;
  --line: rgba(255, 251, 234, 0.12);
  --line-2: rgba(255, 251, 234, 0.2);
  --line-3: rgba(255, 251, 234, 0.34);
  color: var(--ink);
}

/* the gold field (the hero, the closing band): black type, black buttons */
.on-blue, .on-sheen {
  --ink: #0A0A0A;
  --ink-2: #0A0A0A;
  --muted: #3D3320;
  --line: rgba(10, 10, 10, 0.28);
  --line-2: rgba(10, 10, 10, 0.4);
  --line-3: rgba(10, 10, 10, 0.55);
  --pill: rgba(10, 10, 10, 0.1);
  --accent: #0A0A0A;
  --accent-2: #1F1D18;
  --accent-ink: #0A0A0A;   /* text accents on the gold field are black */
  --on-accent: #FFFBEA;
  color: var(--ink);
}

/* the black strips inside the hero (the deliveries ticker, the desk board) and the cards inside the gold field go
   back to the night tokens */
.on-sheen .ticker, .on-sheen .h2-board {
  --ink: #FFFBEA;
  --ink-2: #E9E3CF;
  --muted: #B3AA8F;
  --line: #2C2A22;
  --line-2: #3A372C;
  --line-3: #5A5444;
  --pill: rgba(255, 251, 234, 0.08);
  --accent: #FFC21A;
  --accent-2: #E9A800;
  --accent-ink: #FFC21A;
  --on-accent: #0A0A0A;
  color: var(--ink);
}
.on-sheen .ticket, .on-sheen .panel, .on-sheen .card, .on-blue .ticket, .on-blue .panel {
  --surface: #141412;
  --surface-2: #1B1A16;
  --bg-2: #1D1C17;
  --ink: #FFFBEA;
  --ink-2: #E9E3CF;
  --muted: #B3AA8F;
  --line: #2C2A22;
  --line-2: #3A372C;
  --line-3: #5A5444;
  --accent: #FFC21A;
  --accent-2: #E9A800;
  --accent-ink: #FFC21A;
  --accent-wash: rgba(255, 194, 26, 0.14);
  --on-accent: #0A0A0A;
  color: var(--ink);
}