/*
 * brand.css - the web usage guide's layer over the Bpharma Web kit.
 *
 * Owner's decision of 10 November 2026 (jobs G1 to G3); proposed to the design team as N18 in docs/design-system-proposals.md.
 * Load it after the kit's tokens.css and bundle.css. It is the only file of the site, besides the kit, that holds colour values
 * (site.css keeps its rule of no colour literals) and it holds nothing but:
 *   - one @font-face (Jost, self-hosted, SIL Open Font License 1.1, fonts/OFL.txt);
 *   - custom-property blocks. The kit declares its brand tokens again in every theme block, so they are overridden in
 *     ":root, [data-theme]" (an override on :root alone would be shadowed inside every themed element);
 *   - the guide's own tokens, all named --guide-*.
 *
 * Kit tokens this file changes (and nothing else):
 *   all grounds ............ --brand-violet, --brand-teal, --brand-teal-light, --brand-teal-deep, --brand-lavender, --brand-mint,
 *                            --motif-circle, --font-sans
 *   light and subtle ....... --action, --action-hover, --on-action, --accent, --link, --ink, --ink-lead, --ink-muted, --ink-faint
 *   subtle ................. --surface
 *   indigo and deep ........ --action, --action-hover, --on-action, --accent, --link, --ink-faint
 *   indigo ................. --surface, --surface-raised, --surface-lavender, --surface-mint
 *   deep ................... --surface
 *   all grounds ............ --overlay, --overlay-strong (the overlay of a cover photo)
 * The focus tokens (--focus, --focus-ring), the lines, --danger and the shadows stay the kit's.
 *
 * Decisions: H2 and eyebrows are purple on a light ground and turquoise on a dark one (turquoise on white is 2.26:1);
 * the hover of the purple button is #57428A (the guide's #8E78C8 gives white text 3.7:1). The dark grounds are the guide's purple
 * #6950A0, the footer #4E3B80 (owner's decision of 10 November 2026, from a side-by-side with the kit's indigo); on that purple the
 * guide's turquoise is 2.85:1 as text, so the eyebrows, H2 and links of a dark ground are the light turquoise #A8EAE3 (4.77:1 on the
 * purple, 6.87:1 on the footer) and the faint ink is #E3E6EF (5.17:1); the turquoise buttons keep #46BEB4 with dark text.
 */

@font-face {
  font-family: "Jost";
  src: url("fonts/Jost-VF.ttf") format("truetype");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root, [data-theme] {
  --brand-violet: #6950A0;
  --brand-teal: #46BEB4;
  --brand-teal-light: #7AE2D8;
  --brand-teal-deep: #46BEB4;
  --brand-lavender: #F3F3F3;
  --brand-mint: #F3F3F3;
  --motif-circle: #6950A0A6;
  --overlay: #6950A073;
  --overlay-strong: #6950A0BF;
  --font-sans: "Jost", "Futura", "Century Gothic", system-ui, sans-serif;

  --guide-violet: #6950A0;
  --guide-teal: #46BEB4;
  --guide-violet-hover: #57428A;
  --guide-teal-hover: #7AE2D8;
  --guide-text: #4A4A4F;
  --guide-grey: #F3F3F3;
  --guide-on-teal: #17171A;
  --guide-glow-violet: 0 0 1.5rem .125rem #8E78C8B3;
  --guide-glow-teal: 0 0 1.5rem .125rem #7AE2D8BF;
  --guide-gradient: linear-gradient(90deg, #6950A0, #46BEB4);
  --guide-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1.6 0 0 0 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.08'/%3E%3C/svg%3E");
  --guide-radius-control: 1.25rem;
  --guide-radius-surface: clamp(1.875rem, .9rem + 2.6vw, 2.5rem);
  --guide-radius-bar: 1.5rem;
  --guide-border-button: .125rem;
  --guide-weight-light: 300;
  --guide-weight-regular: 400;
  --guide-weight-medium: 500;
  --guide-weight-semibold: 600;
  --guide-weight-bold: 700;
}

/* Light grounds */
:root, [data-theme="light"], [data-theme="subtle"] {
  --action: #6950A0;
  --action-hover: #57428A;
  --on-action: #FFFFFF;
  --accent: #6950A0;
  --link: #6950A0;
  --ink: #4A4A4F;
  --ink-lead: #4A4A4F;
  --ink-muted: #4A4A4F;
  --ink-faint: #4A4A4F;
}

[data-theme="subtle"] {
  --surface: #F3F3F3;
}

/* Dark grounds: the guide's purple (owner's decision of 10 November 2026); the accents are the light turquoise that keeps 4.5:1 on it */
[data-theme="indigo"], [data-theme="deep"] {
  --action: #46BEB4;
  --action-hover: #7AE2D8;
  --on-action: #17171A;
  --accent: #A8EAE3;
  --link: #A8EAE3;
  --ink-faint: #E3E6EF;
}

[data-theme="indigo"] {
  --surface: #6950A0;
  --surface-raised: #57428A;
  --surface-lavender: #57428A;
  --surface-mint: #57428A;
}

[data-theme="deep"] {
  --surface: #4E3B80;
}