/* Voro brand tokens and base type.
 *
 * Values are taken from the current Voro deck system (the Sodali success-story
 * deck, April 2026), not invented here. The deck sets editorial text in
 * Helvetica Neue and every label, figure and source line in Courier New; it
 * works in #131E29 ink on #F7F5F0 ivory or white, and keeps colour for meaning
 * rather than decoration.
 *
 * One rule from the deck is worth stating because it is also the accessible
 * choice: olympic is an emphasis colour on dark grounds only (7.6:1 on
 * rich-black, 2.1:1 on ivory — unreadable as body text on light). Orchid is the
 * emphasis colour on light grounds (4.7:1 on ivory). The deck follows this
 * exactly: cyan on the dark section slides, magenta on the white ones.
 *
 * This file is the single source of truth for the palette. Every surface links
 * it; nothing else should declare a colour token. */

:root{
  /* Brand palette */
  --ivory:#F7F5F0; --rich-black:#131E29; --white:#FFFFFF;
  --midnight:#012169; --olympic:#00B6F1; --royal:#0047BB;
  --sea-green:#00D7BF; --lemongrass:#D0F474; --orchid:#BB29BB;

  /* Deck greys. Solid rather than translucent so they read identically on
     white cards and on the ivory page behind them. */
  --slate:#5A6470; --slate-light:#8B9099;
  --ink-soft:var(--slate); --ink-faint:var(--slate-light);

  /* Rules. --hairline is the deck's rule colour; the translucent pair are for
     borders that sit over varying backgrounds. */
  --hairline:#DADCE0;
  --line:rgba(19,30,41,0.14); --line-soft:rgba(19,30,41,0.08);

  /* Interaction. The deck has no link or button colour of its own, so solid ink
     carries weight and olympic carries focus — which also keeps every
     interactive surface above 4.5:1. */
  --accent:var(--rich-black);
  --accent-soft:rgba(19,30,41,0.07);
  --ring:rgba(0,182,241,0.55);

  /* Type */
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:"Courier New",Courier,monospace;

  --maxw-narrow:760px; --maxw-wide:1100px;

  /* Aliases: some pages were written against shorter names. Kept so those
     rules keep resolving against the same values. */
  --ink:var(--rich-black); --soft:var(--slate); --faint:var(--slate-light);
}

body{font-family:var(--sans);}

/* Headlines are Helvetica Neue Bold and slightly tight, as in the deck. The
   serif face the pages used before appears nowhere in Voro's design system. */
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;letter-spacing:-0.02em;}

/* The deck's label voice: Courier, uppercase, widely tracked. Used for
   eyebrows, table headers, source lines and page context. */
.kicker,.label{font-family:var(--mono);font-size:12px;font-weight:700;
  letter-spacing:0.12em;text-transform:uppercase;color:var(--slate);}

/* Figures line up in columns when they are tabular. */
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* A visible focus ring everywhere, in olympic. Previously focus was only
   styled on a few controls, so keyboard users lost their place on the rest. */
:focus-visible{outline:2px solid var(--olympic);outline-offset:2px;border-radius:3px;}

/* Buttons.
 *
 * One definition for every surface. The review form, the manager dashboard and the
 * admin pages each carried their own, and they had already drifted apart on padding,
 * hover and disabled behaviour.
 *
 * The base is applied to the variant classes as well as to .btn, so markup that was
 * written as class="btn-primary" alone keeps working.
 *
 * Ink at rest and Voro blue on hover: the deck has no button of its own, and hover is
 * not something a deck has an opinion about, so this is the one place a brand colour
 * can carry the interaction. Both clear AA against white by a wide margin --
 * 15.8:1 on rich-black, 14.8:1 on midnight. */
.btn,.btn-primary,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;
  gap:8px;font-family:var(--sans);font-size:15px;font-weight:700;line-height:1;
  padding:13px 26px;border-radius:99px;border:1.5px solid transparent;
  cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background .15s ease,border-color .15s ease,color .15s ease,opacity .15s ease;}
.btn-sm{font-size:13px;padding:8px 16px;}

.btn-primary{background:var(--accent);color:var(--white);}
.btn-primary:hover:not(:disabled){background:var(--midnight);color:var(--white);}

.btn-ghost{background:transparent;color:var(--rich-black);border-color:var(--line);}
.btn-ghost:hover:not(:disabled){border-color:var(--rich-black);background:var(--lemongrass);}

.btn:disabled,.btn-primary:disabled,.btn-ghost:disabled,
.btn[aria-disabled="true"]{opacity:.35;cursor:not-allowed;}

/* Toast. Defined on the dashboard and on start-review already, differently; a third
   page needing it made one definition worth the move. The dashboard's version wins
   because it rises rather than just fading, and cannot swallow a click. */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--rich-black);color:var(--ivory);font-size:13.5px;font-weight:700;
  padding:12px 22px;border-radius:99px;opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;z-index:99;max-width:90vw;text-align:center;}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}