/* ============================================================
   HardByte — Color tokens
   The mark is three RGB squares (semi-transparent) over a fixed
   opaque backing, so the squares composite to STABLE colors that
   read the same on black or white. The brand colors below are
   those true composited values, sampled from the mark:
     red #CB3137 · green #4E9450 · blue #4389B8.

   Colour roles — one job each, the same on every surface:
     BLUE acts and selects — buttons, links, focus, checked controls.
     GREEN reports state — present, live, current, approved, success.
       It is the brand's own colour and is never an action fill.
     RED is danger and error. AMBER is pending / in progress.
     The SPECTRAL gradient (effects.css) is the signature line.
   This is how the website draws it (every filled action is blue-600;
   green marks the current item, the open position, success), and the
   product UIs follow the website.
   A light subtree inside a dark page — a light section of the website —
   takes [data-theme="light"], which declares the same light values.
   ============================================================ */

:root,
[data-theme="light"] {
  /* --- Brand spectrum (composited mark colors) --- */
  --hb-green-300: #A7CDA9;
  --hb-green-400: #76AE79;
  --hb-green-500: #4E9450;   /* mark green — the brand colour; state, never an action fill */
  --hb-green-600: #3E7B40;   /* green text on light (4.76:1 on ink-50) */
  --hb-green-700: #2F5F31;

  --hb-red-300: #E5736F;     /* error text on dark (6.28:1 on ink-925) */
  --hb-red-400: #DA5A60;
  --hb-red-500: #CB3137;     /* mark red */
  --hb-red-600: #A82930;     /* error text on light (6.46:1 on ink-50) */

  --hb-blue-400: #74A9CC;    /* links, outlines and focus on dark */
  --hb-blue-500: #4389B8;    /* mark blue */
  --hb-blue-600: #336E97;    /* the action fill — white on it 5.50:1 */
  --hb-blue-700: #28567A;    /* action hover / pressed — white on it 7.77:1 */

  --hb-olive-500: #7A6E2A;   /* red×green overlap — tertiary */
  --hb-olive-400: #B8AC69;   /* olive on dark: series and code (8.18:1 on ink-925) — same hue, lighter */
  --hb-amber-400: #E0B83A;   /* pending / in progress on dark */
  --hb-amber-700: #8A6D12;   /* pending text on light */

  /* The grey of "Beyond" and "GmbH" in the logo artwork. For what refers to the
     logo, such as the claim re-typed in a Michroma heading; as text only on dark
     grounds (6.84:1 on black, 6.12:1 on ink-925), never on light ones, where it
     misses AA (3.07:1 on white, 2.86:1 on ink-50). Never UI or body text. */
  --hb-logo-grey: #939393;

  /* --- Ground and ink / neutral ramp (cool engineering slate) --- */
  /* Black is the ground of every full-screen dark surface — the website, the
     product UIs — and not a step of the slate. The slate starts above it: cards,
     raised panels, hairlines and text sit on the black. A mask's #000 is an
     alpha value, not this colour, and stays a literal. */
  --hb-black:   #000000;
  --hb-ink-950: #0C1116;     /* sunken: fields and wells inside a card */
  --hb-ink-925: #0D1219;     /* the card ground on black */
  --hb-ink-900: #121922;     /* raised: popovers, open panels */
  --hb-ink-850: #18212C;
  --hb-ink-800: #1E2935;     /* hairline on dark; pressed surface */
  --hb-ink-700: #2A3744;     /* control border on dark */
  --hb-ink-600: #3B4A59;
  --hb-ink-500: #566472;     /* field boundary on dark (3.1:1); large or disabled text only */
  --hb-ink-400: #7A8896;     /* muted text on dark */
  --hb-ink-300: #A4B0BC;     /* secondary text on dark */
  --hb-ink-200: #CBD3DB;
  --hb-ink-150: #DDE3E9;
  --hb-ink-100: #ECEFF2;     /* light hairline */
  --hb-ink-50:  #F5F7F9;     /* light surface */
  --hb-white:   #FFFFFF;

  /* --- Semantic status (the raw hue of each state) --- */
  --hb-success: var(--hb-green-500);
  --hb-warning: var(--hb-amber-400);
  --hb-danger:  var(--hb-red-500);
  --hb-info:    var(--hb-blue-500);

  /* ===========================================================
     SEMANTIC ALIASES — light theme is the default for documents,
     print and mail. Screens — the website and the product UIs —
     run on the dark theme (see [data-theme="dark"] below).
     =========================================================== */
  --color-brand:          var(--hb-green-600);
  --color-brand-strong:   var(--hb-green-700);
  --color-brand-soft:     #EAF3EB;

  /* The action colour: every filled button, the checked state of a control.
     Hover and press go DARKER (blue-700), never lighter: white on blue-500
     is 3.81:1 and fails AA. */
  --color-action:         var(--hb-blue-600);
  --color-action-strong:  var(--hb-blue-700);
  --color-action-soft:    #E6F1F8;
  --text-on-action:       var(--hb-white);

  /* The danger fill (D15): a button that destroys. The mark's red, white on
     it 5.21:1; pressed goes darker, red-600 (6.94:1). */
  --color-danger:         var(--hb-red-500);
  --color-danger-strong:  var(--hb-red-600);
  --text-on-danger:       var(--hb-white);

  /* Blue is also the link and outline accent */
  --color-accent:         var(--hb-blue-500);
  --color-accent-strong:  var(--hb-blue-600);
  --color-accent-soft:    #E6F1F8;
  --link:                 var(--hb-blue-600);

  /* Signature dark card on a light page (paradigm / product cards) */
  --surface-dark:         var(--hb-ink-900);
  --surface-dark-raised:  var(--hb-ink-800);
  --border-on-dark:       var(--hb-ink-700);
  --text-on-dark:         #F3F6F9;
  --text-on-dark-muted:   var(--hb-ink-300);

  --surface-canvas:       var(--hb-ink-50);
  --surface-card:         var(--hb-white);
  --surface-raised:       var(--hb-white);
  --surface-sunken:       var(--hb-ink-100);
  --surface-field:        var(--hb-white);
  --surface-inverse:      var(--hb-ink-900);

  --text-strong:          var(--hb-ink-950);
  --text-body:            var(--hb-ink-800);
  --text-muted:           var(--hb-ink-500);
  --text-faint:           var(--hb-ink-400);
  --text-on-brand:        var(--hb-white);
  --text-inverse:         var(--hb-ink-50);

  --border-hairline:      var(--hb-ink-100);
  --border-default:       #DCE2E8;
  --border-strong:        var(--hb-ink-300);
  /* A field's box is often its only boundary on a touch screen: 3:1 against
     its ground (WCAG 1.4.11), which neither hairline reaches. */
  --border-control:       var(--hb-ink-400);
  --border-focus:         var(--hb-blue-500);

  /* Status as text and as a soft ground — each pair checked on its theme's
     card: text 4.5:1, soft ground under that text 4.5:1. */
  --status-success-text:  var(--hb-green-600);
  --status-success-soft:  #EEF6EE;
  --status-warning-text:  var(--hb-amber-700);
  --status-warning-soft:  #FDF7E8;
  --status-danger-text:   var(--hb-red-600);
  --status-danger-soft:   #FBEBEC;
  --status-info-text:     var(--hb-blue-600);
  --status-info-soft:     #E6F1F8;

  /* Behind a dialog or sheet */
  --scrim:                rgba(12,17,22,0.48);

  --accent-red:           var(--hb-red-500);
  --accent-blue:          var(--hb-blue-500);

  /* --- Series and code: the mark's four colours, nothing else. A series is a
     fill (a bar, a line, a dot) in the logo's own values - all four hold 3:1
     against white, ink-50, ink-925 and black - in the spectral line's order
     read from blue; its label stays in text colour beside it, so a red series
     is not a status. Code text takes the readable step of each and sits on
     white or ink-50 in light. --- */
  --series-1:       var(--hb-blue-500);
  --series-2:       var(--hb-green-500);
  --series-3:       var(--hb-olive-500);
  --series-4:       var(--hb-red-500);
  --series-other:   var(--hb-ink-400);
  --code-keyword:   var(--hb-blue-600);
  --code-string:    var(--hb-green-600);
  --code-number:    var(--hb-olive-500);
  --code-type:      var(--hb-red-600);
  --code-function:  var(--text-strong);
  --code-comment:   var(--hb-ink-500);
  --code-added:     var(--hb-green-600);
  --code-removed:   var(--hb-red-600);
  /* Red-green-safe: where green and red carry the meaning (a diff, a result),
     a red-green-safe theme takes blue for the good side and olive for the bad -
     the mark's own pair across the blue-yellow axis. */
  --cvd-positive:   var(--hb-blue-600);
  --cvd-negative:   var(--hb-olive-500);
}

/* ===========================================================
   DARK THEME — every full-screen dark surface: the website, the
   product UIs. Apply to any subtree: <div data-theme="dark"> … </div>
   These are the values the website renders (black ground, ink-925
   cards, ink-800 hairlines, ink-700 control borders), not a separate
   dark UI of their own.
   =========================================================== */
[data-theme="dark"] {
  --color-brand:          var(--hb-green-500);   /* mark green */
  --color-brand-strong:   var(--hb-green-400);
  --color-brand-soft:     rgba(78,148,80,0.16);

  /* The action fill stays blue-600 on dark: white on it is 5.50:1, and a
     lighter blue would take the text below AA. */
  --color-action:         var(--hb-blue-600);
  --color-action-strong:  var(--hb-blue-700);
  --color-action-soft:    rgba(67,137,184,0.16);
  --text-on-action:       var(--hb-white);

  /* The danger fill keeps its values on dark: white on red-500 is 5.21:1. */
  --color-danger:         var(--hb-red-500);
  --color-danger-strong:  var(--hb-red-600);
  --text-on-danger:       var(--hb-white);

  --color-accent:         var(--hb-blue-400);
  --color-accent-strong:  var(--hb-blue-500);
  --color-accent-soft:    rgba(67,137,184,0.20);
  --link:                 var(--hb-blue-400);

  /* The four "on dark" tokens below are restated with the SAME values as the
     light block on purpose: they describe a dark card, so they look identical
     whichever theme the page is in. --surface-dark is the one that changes: on
     a black ground the dark card is the ordinary card, ink-925. */
  --surface-dark:         var(--hb-ink-925);
  --surface-dark-raised:  var(--hb-ink-900);
  --border-on-dark:       var(--hb-ink-700);
  --text-on-dark:         #F3F6F9;
  --text-on-dark-muted:   var(--hb-ink-300);

  --surface-canvas:       var(--hb-black);
  --surface-card:         var(--hb-ink-925);
  --surface-raised:       var(--hb-ink-900);
  --surface-sunken:       var(--hb-ink-950);
  --surface-field:        var(--hb-ink-950);
  --surface-inverse:      var(--hb-ink-50);

  --text-strong:          #F3F6F9;
  --text-body:            var(--hb-ink-200);
  --text-muted:           var(--hb-ink-400);
  /* ink-500 is 3.46:1 on black: large text, disabled text and marks only. */
  --text-faint:           var(--hb-ink-500);
  --text-on-brand:        #08120B;
  --text-inverse:         var(--hb-ink-900);

  --border-hairline:      var(--hb-ink-800);
  --border-default:       var(--hb-ink-700);
  --border-strong:        var(--hb-ink-600);
  --border-control:       var(--hb-ink-500);
  --border-focus:         var(--hb-blue-400);

  --status-success-text:  var(--hb-green-400);
  --status-success-soft:  rgba(78,148,80,0.16);
  --status-warning-text:  var(--hb-amber-400);
  --status-warning-soft:  rgba(224,184,58,0.12);
  --status-danger-text:   var(--hb-red-300);
  --status-danger-soft:   rgba(203,49,55,0.16);
  --status-info-text:     var(--hb-blue-400);
  --status-info-soft:     rgba(67,137,184,0.16);

  --scrim:                rgba(0,0,0,0.72);

  /* One stop lighter in dark, the same 500 -> 400 move --color-accent makes. */
  --accent-red:           var(--hb-red-400);
  --accent-blue:          var(--hb-blue-400);

  --code-keyword:   var(--hb-blue-400);
  --code-string:    var(--hb-green-400);
  --code-number:    var(--hb-olive-400);
  --code-type:      var(--hb-red-400);
  --code-function:  var(--text-strong);
  --code-comment:   var(--hb-ink-400);
  --code-added:     var(--hb-green-400);
  --code-removed:   var(--hb-red-400);
  --cvd-positive:   var(--hb-blue-400);
  --cvd-negative:   var(--hb-olive-400);
}