/* ============================================================================
   Theme — royal blue + bowtie
   ============================================================================

   The palette that shipped on 2026-08-11, parked here intact so it can be put
   back with one line. It is NOT loaded by default; see the switch at the top of
   tokens.css.

   Nothing outside this file knows which theme is active. Every value below is
   consumed through a token, so swapping themes is a stylesheet swap rather than
   a pass over app.css.

   What makes this theme itself, in one line each:
     * a mono royal-blue accent in place of the violet
     * a two-stop blue button ramp in place of the violet three-stop
     * the bowtie mark, drawn as a MASK so it takes its colour from CSS
   ========================================================================= */

:root {
  /* ---------- Accent — royal blue, mono ----------
     --accent is the button gradient's own first stop, so a focus ring is the
     same blue as the top of the button beside it.

     4.62:1 on white, which is the floor rather than a preference: --accent is
     the focus outline and the dropdown check as well as a fill, and one step
     lighter (#4B7BF5) drops to 3.85 and stops being findable. Lighten the
     FILLS below it if more brightness is wanted; leave this one alone. */
  --accent: #3B6BF0;
  --accent-deep: #2456D6;
  --accent-soft: #7FB2FB;
  --accent-tint: #EDF3FF;
  --on-accent: #FFFFFF;

  /* Derived from the accent, and named so no component has to hard-code it.
     Every one of these used to be a colour literal repeated across app.css,
     which is why the first reskin needed a find-and-replace rather than a token
     change. Don't reintroduce literals. */
  --accent-ring: 0 0 0 3px rgba(59,107,240,.15);      /* focus halo on fields */
  --accent-edge: rgba(59,107,240,.42);                /* a filled input's border */
  --accent-pane: linear-gradient(150deg, rgba(255,255,255,.9), rgba(237,243,255,.92));
  --accent-pane-soft: linear-gradient(150deg, rgba(255,255,255,.9), rgba(237,243,255,.72));
  --accent-lift: 0 2px 6px -2px rgba(59,107,240,.22); /* under a selected row */
  --accent-wash: rgba(237,243,255,.95);               /* menu row hover */

  /* Two blues rather than the six-stop brand ramp: that ramp runs violet
     through pink to gold, which is a signature a mono palette has no equivalent
     for, and stretching two blues across six stops only muddies the middle. */
  --grad-btn: linear-gradient(135deg, #3B6BF0 0%, #2563EB 52%, #1E40AF 100%);

  /* ---------- Accent-tinted shadows ----------
     The shadow COLOUR is what makes a coloured button look lit rather than
     pasted onto the page, so it moves with the accent and lives with it. */
  --shadow-btn: inset 0 1px 0 rgba(255,255,255,.35), 0 10px 24px -10px rgba(59,107,240,.55);
  --shadow-cta: inset 0 1.5px 0 rgba(255,255,255,.45), inset 0 -8px 16px -8px rgba(12,32,96,.5), 0 8px 20px -8px rgba(59,107,240,.5), 0 22px 44px -20px rgba(21,48,130,.42);
  --shadow-cta-hover: inset 0 1.5px 0 rgba(255,255,255,.55), inset 0 -8px 16px -8px rgba(12,32,96,.55), 0 14px 30px -10px rgba(59,107,240,.6), 0 34px 62px -22px rgba(21,48,130,.5);

  /* Tier-1 glass carries a trace of the accent in its inner bottom edge. */
  --glass-shadow: inset 0 1.5px 1px rgba(255,255,255,.9), inset 0 -10px 24px -20px rgba(59,107,240,.09), 0 2px 6px rgba(20,20,26,.05), 0 22px 46px -22px rgba(20,20,26,.18);
  --glass-shadow-hover: inset 0 1.5px 1px rgba(255,255,255,.95), inset 0 -12px 28px -20px rgba(59,107,240,.12), 0 6px 14px rgba(20,20,26,.07), 0 34px 68px -24px rgba(20,20,26,.24);

  /* ---------- Status pills ----------
     THIS THEME WEARS THEM FILLED. The hues are shared — amber ahead, green done,
     red called off — but how loudly they are spoken is a theme's business, and a
     mono blue accent leaves room for a saturated pill in a way the violet ramp
     does not: against violet-through-gold the solid set fought the brand, while
     against one flat blue it reads as the product's only other colour.

     The inks are not uniform, and cannot be: a bright yellow reflects almost as
     much light as white paper, so #FACC15 with white text lands at 1.53:1. Each
     pill takes whichever ink actually reads on it — green + white 5.0:1,
     yellow + ink 12.0:1, red + white 4.8:1. If a fourth state ever appears, run
     it against BOTH inks rather than assuming white. */
  --status-upcoming-bg: var(--warn-solid);
  --status-upcoming-ink: var(--warn-on-solid);
  --status-done-bg: var(--ok-solid);
  --status-done-ink: var(--ok-on-solid);
  --status-cancelled-bg: var(--danger-solid);
  --status-cancelled-ink: var(--danger-on-solid);

  /* ---------- The brand mark ----------
     The bowtie fills the 34px glyph slot edge to edge, so it needs no centring
     margin of its own. Its 2.82:1 ratio is why it is sized by WIDTH: the slot's
     width is the constraint, and 34 / 2.82 gives the height.

     Drawn as a MASK rather than an image, so the silhouette takes its colour
     from CSS — --brand-mark-bg is the paint, the file is only the shape. The
     source art is flat black with an alpha channel, which makes it usable as
     both. It is cropped to its ink because `contain` obeys the canvas, and the
     ink sits 2.82:1 inside a square one. */
  --brand-mark-w: 34px;
  --brand-mark-h: 12px;
  --brand-mark-margin: 0;
  --brand-mark-bg: currentColor;
  --brand-mark-mask: url("/assets/bowtie.png") center/contain no-repeat;

  /* The auth pages' header mark — much bigger than the rail's, because there it
     carries the heading on its own rather than sitting beside a nav. */
  --brand-mark-auth-w: 104px;
  --brand-mark-auth-h: 37px;
}