/* ============================================================================
   HP design foundation — The Screen
   Ported from eventapp/app/apps/shared/hp.css (the kit assembled at
   eventapp/brand/kit). Sources, in precedence order:
     HP Digital Guidelines deck  >  veneer.hp.com v3.151.0  >  Brand Guidelines V.6
   Nothing here is invented; every value traces to one of those three.

   This file is FOUNDATION ONLY — primitives, semantic tokens, type scale. The
   Screen keeps its own components in styles.css and simply drinks from these
   tokens, so a rep app built for a store floor (huge tap targets, one-handed,
   glanceable at arm's length) does not inherit a registration form's furniture.
   ========================================================================== */

/* Forma DJR UI, variable. Axes: wght 200–800, opsz 9–144.
   The brand mandates the UI cut specifically for digital (Guidelines p.100)
   because it thins strokes at small sizes — that IS the opsz axis, so we let the
   browser drive it via font-optical-sizing rather than pinning it by hand. */
@font-face {
  font-family: 'Forma DJR UI';
  src: url('/assets/FormaDJRUI.woff2') format('woff2-variations');
  font-weight: 200 800;
  font-display: swap;
}

:root {
  /* ---- Primitives: electricBlue (veneer.hp.com, == Brand Guidelines p.90) ---- */
  --eb-0:  #E4EEFA;  --eb-1:  #C9E0FC;  --eb-2:  #B2D2FF;  --eb-3:  #8FBAFF;
  --eb-4:  #72A3FF;  --eb-5:  #518CFF;  --eb-6:  #296EF9;  --eb-7:  #024AD8;
  --eb-8:  #103FB2;  --eb-9:  #0E3191;  --eb-10: #0C2877;  --eb-11: #0A2162;
  --eb-12: #0A1D4E;

  /* ---- Primitives: gray (true neutral) ---- */
  --gray-0:  #FAFAFA; --gray-1:  #F5F5F5; --gray-2:  #F0F0F0; --gray-3:  #E8E8E8;
  --gray-4:  #C2C2C2; --gray-5:  #A3A3A3; --gray-6:  #858585; --gray-7:  #636363;
  --gray-8:  #525252; --gray-9:  #3D3D3D; --gray-10: #292929; --gray-11: #212121;
  --gray-12: #1A1A1A;

  /* ---- Primitives: secondary. Permitted beyond headline emphasis here because
     Guidelines p.92 carves out "HP-developed software UX/UI design".
     Power Storm = information, Orange Bloom = attention. ---- */
  --ps-0: #E1EEF3; --ps-3: #94BBCA; --ps-5: #6D9AAB; --ps-6: #568393; --ps-7: #447180; --ps-10: #0E4353;
  --ob-0: #FBE5E4; --ob-5: #FF5050; --ob-6: #E54041; --ob-7: #CC2D32; --ob-8: #B3262B; --ob-10: #79191B;
  /* darkOrange, from the same Veneer primitives. The Screen needs a THIRD
     status colour that eventapp's forms never did: "reachable but unhappy"
     (queued sync, expired visit, promo flag) has to be visibly different from
     "wrong" at a glance, and collapsing both onto Orange Bloom made the network
     dot's warn state and the live-customer button the same colour. */
  --do-0: #FFEDDE; --do-4: #FFA238; --do-5: #FF8900; --do-6: #E07200; --do-7: #B2600C; --do-8: #874E14;

  /* ---- Layout: Veneer size / cornerRadius primitives ---- */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 28px; --s-8: 32px;
  --r-1: 4px; --r-2: 8px; --r-3: 12px; --r-4: 16px; --r-full: 999px;

  /* ---- Semantic: light. Structure from Veneer's semantic layer, values
     repointed to current primitives (the shipped bundle still had royalBlue). ---- */
  --fg:            var(--gray-12);
  --fg-medium:     var(--gray-8);
  --fg-light:      var(--gray-7);
  --fg-disabled:   var(--gray-5);
  --bg:            #FFFFFF;
  --bg-container:  var(--gray-0);
  /* The plain surface under its own name. styles.css repoints --bg at the sunken
     step so cards lift off the page, and a custom property always resolves to
     the WINNING declaration — so `--card: var(--bg)` there would have quietly
     handed the cards the page colour. --surface is the value that cannot move. */
  --surface:       #FFFFFF;
  --bg-sunken:     var(--gray-1);
  --stroke:        var(--gray-3);
  --stroke-strong: var(--gray-6);   /* gray-5 measured 2.52:1 — under the 3:1 floor for controls */
  --stroke-focus:  var(--eb-7);

  /* Interaction states follow the deck's rule (slide 37): hover shifts one step
     along the ramp, active shifts one step again. */
  --primary:        var(--eb-7);
  --primary-hover:  var(--eb-8);
  --primary-active: var(--eb-9);
  --primary-fg:     #FFFFFF;
  --primary-tint:        var(--eb-0);
  --primary-tint-hover:  var(--eb-1);
  --primary-tint-active: var(--eb-2);

  --positive:      #006C3E;   /* 00834B measured 4.15:1 on its tint — under 4.5 at 12px */
  --positive-tint: #D5F5E7;
  --attention:      var(--ob-8);   /* ob-7 measured 4.37:1 on its tint */
  --attention-tint: var(--ob-0);
  --info:      var(--ps-7);
  --info-tint: var(--ps-0);
  --caution:      var(--do-7);   /* 4.66:1 on white — do-6 measured 3.0:1, under the text floor */
  --caution-tint: var(--do-0);

  --shadow: 0 1px 2px rgb(0 0 0 / .06), 0 4px 12px rgb(0 0 0 / .06);
  --logo: var(--eb-7);        /* p.69: always HP Blue, in both themes */
  --stripe-angle: -20deg;     /* p.72: 20° shear, verticals tilt, horizontals hold */
  --ease: cubic-bezier(0.61, 0.09, 0.17, 0.99);   /* the single brand curve */
}

/* Veneer ships dark for every semantic token and switches on prefers-color-scheme;
   the marketing book is simply silent on it, and per the user that silence is not
   a prohibition. It is defined here but NOT auto-applied — see the note in
   styles.css about why a store-floor tool pins light. */
:root[data-theme="dark"] {
  --fg: #FFFFFF; --fg-medium: var(--gray-3); --fg-light: var(--gray-4);
  --fg-disabled: var(--gray-7);
  --bg: var(--gray-12); --bg-container: var(--gray-11); --bg-sunken: #000000;
  --surface: var(--gray-11);
  --stroke: var(--gray-9); --stroke-strong: var(--gray-6);
  --primary: var(--eb-5); --primary-hover: var(--eb-4); --primary-active: var(--eb-3);
  /* Veneer keeps strokeFocus identical in both themes, but their dark ground is
     #292A35; on ours (#1A1A1A) Electric Blue 7 measured 2.46:1 — under the 3:1
     floor for a focus indicator. Step it up the ramp to match --primary. */
  --stroke-focus: var(--eb-5);
  --primary-fg: var(--gray-12);
  --primary-tint: var(--eb-12); --primary-tint-hover: var(--eb-11);
  --primary-tint-active: var(--eb-10);
  --positive: #00D072; --positive-tint: #093021;
  --attention: #FD7370; --attention-tint: #3A1614;
  --info: var(--ps-3); --info-tint: var(--ps-10);
  --caution: var(--do-4); --caution-tint: #3A2A12;
  --logo: #FFFFFF;
  --shadow: 0 1px 2px rgb(0 0 0 / .4), 0 4px 12px rgb(0 0 0 / .3);
}

/* Veneer's high-legibility helper switches on Forma DJR UI's OpenType
   alternates. Worth it anywhere a character could be misread — SKUs, model
   numbers, prices read across a counter. */
.high-legibility { font-feature-settings: 'ss01', 'ss02', 'ss03'; }

/* ---- Type scale. Veneer publishes three viewport scales and is explicit that
   you must not mix styles across them, so each breakpoint restates the whole
   set. The Screen only uses the small end of the scale — a rep app has no
   72px hero type — so the title-large/medium steps are omitted. ---- */
.title-regular { font-size: 32px; line-height: 32px; font-weight: 500; letter-spacing: 0; margin: 0; }
.title-small   { font-size: 24px; line-height: 24px; font-weight: 500; letter-spacing: 0; margin: 0; }
.subtitle-large   { font-size: 18px; line-height: 24px; font-weight: 500; margin: 0; }
.subtitle-regular { font-size: 16px; line-height: 20px; font-weight: 500; margin: 0; }
.overline-regular { font-size: 12px; line-height: 16px; font-weight: 500; margin: 0; }
.body-extra-large { font-size: 18px; line-height: 24px; margin: 0; }
.body-large       { font-size: 16px; line-height: 24px; margin: 0; }
.body-regular     { font-size: 14px; line-height: 24px; margin: 0; }
/* Global styles — identical at every viewport */
.label-regular { font-size: 16px; line-height: 20px; margin: 0; }
.label-small   { font-size: 12px; line-height: 16px; margin: 0; }
.caption       { font-size: 14px; line-height: 20px; margin: 0; }
.caption-small { font-size: 12px; line-height: 16px; margin: 0; }

@media (min-width: 768px) {          /* Typography Medium — Veneer breakpoint1 */
  .title-regular { font-size: 36px; line-height: 36px; }
  .title-small   { font-size: 28px; line-height: 28px; }
  .subtitle-large   { font-size: 20px; line-height: 24px; }
  .subtitle-regular { font-size: 18px; line-height: 24px; }
  .overline-regular { font-size: 14px; line-height: 20px; }
  .body-extra-large { font-size: 18px; line-height: 24px; }
  .body-large       { font-size: 16px; line-height: 24px; }
}
@media (min-width: 1024px) {         /* Typography Large — Veneer breakpoint2 */
  .title-regular { font-size: 44px; line-height: 44px; }
  .title-small   { font-size: 32px; line-height: 32px; }
  .subtitle-large   { font-size: 24px; line-height: 28px; }
  .subtitle-regular { font-size: 20px; line-height: 24px; }
  .overline-regular { font-size: 16px; line-height: 20px; }
  .body-extra-large { font-size: 20px; line-height: 24px; }
  .body-large       { font-size: 18px; line-height: 24px; }
  .body-regular     { font-size: 16px; line-height: 24px; }
}

/* The brand device (Guidelines pp.72–81). Always Electric Blue on white, never
   the reverse, never with copy on top, capped at 2–3 per view. The Screen uses
   exactly one, as the top-bar rule. */
.stripe {
  transform: skewX(var(--stripe-angle));
  background: var(--eb-7);
  flex: none;
}

/* The HP mark. p.69: always HP Blue on light grounds, white on dark.
   Masked rather than <img>-ed: the logo file fills with currentColor, and an
   <img> resolves that against the image's own root (black), so the --logo token
   would never reach it. A mask paints the token through the glyph instead, and
   the dark theme's white mark then comes for free. */
.hpmark {
  display: block; flex: none; width: 24px; height: 24px;
  background-color: var(--logo);
  -webkit-mask: url('/assets/hp-logo.svg') center / contain no-repeat;
          mask: url('/assets/hp-logo.svg') center / contain no-repeat;
}