/* The geneva_drive palette — the only file on this site that may contain a
   literal colour. Everything else (site.css, landing.css, the manual that
   bin/md2html generates) refers to these custom properties.

   The values come from the admin engine, admin/public/application.css. The
   admin is the reference implementation of the geneva_drive look and leads:
   change a colour there first, then mirror it here.

   Two layers. The ramp below names the raw values — it exists so the same
   grey is never typed twice, and so a token's provenance is visible. The
   roles under it are what stylesheets actually use. Reach for a role; only
   add a ramp entry when the admin gains a value we do not carry yet.

   bin/md2html inlines this file verbatim into the generated manual, which is
   a standalone document: keep it to plain :root custom properties, with no
   @import, no url() and no selectors. */

:root {
  /* -------- the ramp -------- */
  /* Greys — the admin's page ground, cards, rules, ink and dark panels. */
  --white:     #ffffff;
  --gray-50:   #f9fafb;
  --gray-100:  #f3f4f6;
  --gray-200:  #e5e7eb;
  --gray-300:  #d1d5db;
  --gray-400:  #9ca3af;
  --gray-600:  #4b5563;
  --gray-700:  #374151;
  --gray-800:  #1f2937;
  --gray-900:  #111827;

  /* Blues — the admin's links, primary buttons and in-progress states. */
  --blue-200:  #bfdbfe;
  --blue-300:  #93c5fd;
  --blue-600:  #2563eb;
  --blue-800:  #1e40af;

  /* The admin's state inks (.workflow-state / .execution-state). */
  --green-800:  #065f46;
  --indigo-800: #3730a3;
  --amber-800:  #92400e;
  --red-800:    #991b1b;

  /* Light tints used only by the syntax theme, which needs six distinguishable
     hues that all clear 4.5:1 on --panel and on --ink. */
  --emerald-300: #6ee7b7;
  --indigo-300:  #a5b4fc;
  --violet-300:  #c4b5fd;
  --sky-300:     #7dd3fc;
  --cyan-300:    #67e8f9;
  --red-300:     #fca5a5;

  /* -------- roles: page and ink -------- */
  --bg:        var(--gray-100);  /* admin page ground */
  --surface:   var(--white);     /* admin cards; the manual's reading column */
  --ink:       var(--gray-800);  /* headings and body copy, and the dark bands */
  --muted:     var(--gray-600);  /* secondary ink. The admin's own #6b7280 lands
                                    at 4.39:1 on --bg, under AA, so we step down */
  --rule:      var(--gray-300);  /* card and table borders */
  --rule-soft: var(--gray-200);  /* the lighter rule between table rows */

  /* -------- roles: accent -------- */
  --accent:              var(--blue-600);
  --accent-hover:        var(--blue-800);
  --accent-light:        var(--blue-300);  /* the accent that survives --ink,
                                              8.1:1 on it; --accent is 2.2:1 */
  --accent-light-hover:  var(--blue-200);
  --on-accent:           var(--white);     /* label on an accent fill */
  /* The wash behind inline code. The literal comes first as the fallback for
     browsers without color-mix(); both are --accent at 8%. */
  --accent-wash: rgba(37, 99, 235, 0.08);
  --accent-wash: color-mix(in srgb, var(--accent) 8%, transparent);

  /* -------- roles: on the dark bands and code panels -------- */
  --on-ink:     var(--gray-200);  /* body copy and code sitting on --ink */
  --ink-bright: var(--gray-50);   /* headings there */
  --ink-dim:    var(--gray-300);
  --ink-faint:  var(--gray-400);  /* 5.8:1 on --ink — the floor for text */
  --rule-dark:  var(--gray-700);
  --panel:      var(--gray-900);  /* one step under --ink, for the terminal card */

  /* -------- roles: states -------- */
  --state-info:   var(--blue-800);
  --state-ok:     var(--green-800);
  --state-note:   var(--indigo-800);
  --state-warn:   var(--amber-800);
  --state-danger: var(--red-800);

  /* -------- roles: print -------- */
  /* The manual's print stylesheet. --print-meta is read inside @page margin
     boxes, where an engine that cannot resolve it falls back to black — fine
     for a page number. */
  --print-meta: var(--gray-600);
  --print-rule: var(--gray-300);

  /* -------- roles: syntax highlighting -------- */
  /* Used by the Rouge theme in site.css. The manual highlights with Prism,
     which ships its own light theme, so it does not read these. */
  --code-comment:  var(--gray-400);
  --code-keyword:  var(--blue-300);
  --code-string:   var(--emerald-300);
  --code-symbol:   var(--indigo-300);
  --code-number:   var(--violet-300);
  --code-constant: var(--sky-300);
  --code-method:   var(--gray-200);
  --code-variable: var(--cyan-300);
  --code-punct:    var(--gray-300);
  --code-error:    var(--red-300);
}