/* Hover brand tokens, shared by every page (index, login, admin, compare, video page).
   Loaded first: styles.css, auth.css and compare.css only use these tokens.
   Charte graphique (Figma "Charte-Graphique"): Night #131313, White #FFFFFF, Green #D3FB42
   (signature accent), Beige #F9F6F4 (page background), Lavande #F3EDF4, Light blue #E2EDF7.
   Titles: GT Walsheim Pro Semi-Bold. Text: DM Sans Regular.

   GT Walsheim Pro is a commercial font: it renders when installed on the computer, or when
   licensed woff2 files are dropped in public/fonts/ (the server then adds their @font-face
   rules on top of this file, see src/api/brand-assets.js). Otherwise titles use DM Sans
   600/700, slightly tightened, which keeps the same compact look.

   Light by default, dark when the system asks for it. Text contrast >= 4.5:1 in both themes. */
:root {
  /* palette */
  --hv-night: #131313;
  --hv-white: #ffffff;
  --hv-green: #d3fb42;
  --hv-beige: #f9f6f4;
  --hv-lavande: #f3edf4;
  --hv-blue: #e2edf7;

  /* typography */
  --font: "DM Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-title: "GT Walsheim Pro", "GT Walsheim Pro Web", "DM Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --title-weight: 650;                  /* Semi-Bold; DM Sans fallback between 600 and 700 */
  --title-tracking: -.02em;
  --mono: ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

  /* surfaces */
  --background: var(--hv-beige);
  --foreground: var(--hv-night);
  --card: var(--hv-white);
  --card-foreground: var(--hv-night);
  --popover: var(--hv-white);
  --popover-foreground: var(--hv-night);
  --muted: #f4f0ec;                     /* warm beige, one step darker than the page */
  --muted-foreground: #67625c;          /* 5.3:1 on --muted, 6.0:1 on white, 5.6:1 on beige */
  --secondary: #f4f0ec;
  --secondary-foreground: var(--hv-night);
  --accent: #f1ede9;                    /* hover background */
  --accent-foreground: var(--hv-night);
  --text-2: #3b3936;                    /* body copy, one step softer than Night */
  --border: #e8e3de;                    /* Night-tinted hairline */
  --input: #d2ccc6;
  --lavande: var(--hv-lavande);         /* soft tints: info cards, selected items */
  --lavande-border: #e4d9e6;
  --sky: var(--hv-blue);
  --sky-border: #c9dbec;
  --sky-foreground: #1f3a56;            /* 9.8:1 on light blue */

  /* focus: Night outline + Green halo (visible on beige, white and green) */
  --ring: var(--hv-night);
  --ring-halo: rgb(211 251 66 / .9);
  --ring-soft: rgb(211 251 66 / .75);

  /* actions */
  --primary: var(--hv-night);           /* white text 18.6:1 */
  --primary-hover: #2f2f2f;
  --primary-foreground: var(--hv-white);
  --primary-text: var(--hv-night);      /* links, selected marks */
  --primary-soft: var(--hv-lavande);
  --cta: var(--hv-green);               /* the single main action of a page, Night text 15.6:1 */
  --cta-hover: #c6f02a;
  --cta-foreground: var(--hv-night);
  --brand: var(--hv-night);
  --brand-foreground: var(--hv-green);
  --logo: var(--hv-night);
  --link-deco: rgb(19 19 19 / .35);

  --destructive: #b42318;               /* solid buttons, white text 6.6:1 */
  --destructive-hover: #912018;
  --destructive-foreground: #ffffff;
  --destructive-text: #b42318;
  --destructive-soft: #fdf0ee;
  --destructive-border: #f6cfc9;

  /* status: OK = Green family (dark olive text on a green tint), running = Night/Green */
  --success: #3f5f00;  --success-soft: #eefdbf; --success-border: #cdec6a; --success-solid: #5c8a00;
  --warning: #8a4b00;  --warning-soft: #fdf4e3; --warning-border: #f0d29a; --warning-solid: #a85d00;
  --run: var(--hv-night); --run-soft: #f5fcdc; --run-border: #cdec6a; --run-solid: var(--hv-night);
  --info: var(--sky-foreground); --info-soft: var(--hv-blue); --info-border: var(--sky-border); --info-solid: #3b6e9e;
  --neutral: #5c5852;  --neutral-soft: #f2efec; --neutral-border: #e3ded9; --neutral-solid: #a39e98;
  --on-solid: #ffffff;

  --shadow-sm: 0 1px 2px rgb(19 19 19 / .05);
  --shadow-md: 0 1px 2px rgb(19 19 19 / .04), 0 12px 32px -8px rgb(19 19 19 / .18);
  --backdrop: rgb(19 19 19 / .55);

  --radius: .625rem;                    /* 10px */
  --radius-sm: 8px;                     /* buttons, inputs */
  --radius-md: 10px;                    /* inner boxes */
  --radius-xl: 12px;                    /* cards, dialogs */
  --pill-radius: 6px;                   /* badges */
  --ease: 150ms ease-out;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: var(--hv-night);
    --foreground: var(--hv-beige);
    --card: #1c1c1c;
    --card-foreground: var(--hv-beige);
    --popover: #222222;
    --popover-foreground: var(--hv-beige);
    --muted: #242424;
    --muted-foreground: #a8a29c;        /* 6.1:1 on --muted */
    --secondary: #2a2a2a;
    --secondary-foreground: var(--hv-beige);
    --accent: #2a2a2a;
    --accent-foreground: var(--hv-beige);
    --text-2: #dad5d0;
    --border: #2f2f2f;
    --input: #424242;
    --lavande: rgb(243 237 244 / .07);
    --lavande-border: rgb(243 237 244 / .16);
    --sky: rgb(226 237 247 / .08);
    --sky-border: rgb(226 237 247 / .2);
    --sky-foreground: #c9ddf2;

    --ring: var(--hv-green);
    --ring-halo: rgb(211 251 66 / .28);
    --ring-soft: rgb(211 251 66 / .3);

    --primary: var(--hv-beige);         /* Night text */
    --primary-hover: #ffffff;
    --primary-foreground: var(--hv-night);
    --primary-text: var(--hv-green);
    --primary-soft: rgb(211 251 66 / .1);
    --cta: var(--hv-green);
    --cta-hover: #e0ff6e;
    --cta-foreground: var(--hv-night);
    --brand: var(--hv-green);
    --brand-foreground: var(--hv-night);
    --logo: var(--hv-green);
    --link-deco: rgb(211 251 66 / .45);

    --destructive: #d92d20;
    --destructive-hover: #b42318;
    --destructive-foreground: #ffffff;
    --destructive-text: #ff8a7a;
    --destructive-soft: rgb(255 99 77 / .12);
    --destructive-border: rgb(255 99 77 / .32);

    --success: var(--hv-green); --success-soft: rgb(211 251 66 / .1); --success-border: rgb(211 251 66 / .3); --success-solid: var(--hv-green);
    --warning: #f5c04a; --warning-soft: rgb(245 180 50 / .12); --warning-border: rgb(245 180 50 / .32); --warning-solid: #e8a21a;
    --run: var(--hv-green); --run-soft: rgb(211 251 66 / .08); --run-border: rgb(211 251 66 / .3); --run-solid: var(--hv-green);
    --info: var(--sky-foreground); --info-soft: var(--sky); --info-border: var(--sky-border); --info-solid: #8fb8e0;
    --neutral: #a8a29c; --neutral-soft: #242424; --neutral-border: #383838; --neutral-solid: #6f6a65;
    --on-solid: #ffffff;

    --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-md: 0 1px 2px rgb(0 0 0 / .4), 0 16px 40px -8px rgb(0 0 0 / .7);
    --backdrop: rgb(0 0 0 / .6);
    color-scheme: dark;
  }
}

/* ---------- brand marks ----------
   The logotype and the monogram are single-colour SVGs (public/brand/), painted with a CSS mask
   so they follow --logo: Night on light, Green in dark mode. role="img" + aria-label on the element. */
.hv-logo, .hv-monogram, .hv-arrow {
  display: inline-block; flex: none;
  background-color: var(--logo);
  -webkit-mask: var(--hv-mask) center / contain no-repeat;
  mask: var(--hv-mask) center / contain no-repeat;
}
.hv-logo { --hv-mask: url("/brand/logotype.svg"); height: 22px; aspect-ratio: 1812.77 / 427.225; }
.hv-monogram { --hv-mask: url("/brand/monogram.svg"); width: 20px; aspect-ratio: 191.937 / 187.078; }
.hv-arrow { --hv-mask: url("/brand/arrow.svg"); width: 24px; aspect-ratio: 123.06 / 119.899; }
/* "QA" next to the logotype: a Green tag with Night text (15.6:1), the brand's signature pair. */
.hv-tag {
  display: inline-flex; align-items: center; height: 20px; padding: 0 6px;
  border-radius: 5px; background: var(--hv-green); color: var(--hv-night);
  font-family: var(--font-title); font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1;
}
@media (forced-colors: active) {
  .hv-logo, .hv-monogram, .hv-arrow { forced-color-adjust: none; background-color: CanvasText; }
  .hv-tag { border: 1px solid CanvasText; }
}