/* Beone brand guidelines: https://tool.beone.be/charte.pdf.
 * Shared by the React application and the OpenAPI portal.
 * Brand variables may be overridden at runtime; semantic surfaces follow data-theme.
 */
@font-face {
  font-family: "Comfortaa";
  src: url("/branding/beone/fonts/comfortaa-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
}

@font-face {
  font-family: "Open Sans";
  src: url("/branding/beone/fonts/open-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
}

:root,
:root[data-theme="light"] {
  color-scheme: light;
  --font-body: "Open Sans", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-heading: "Comfortaa", "Open Sans", ui-sans-serif, system-ui, sans-serif;
  --beone-pink: #e53859;
  --beone-paper: #f4f2f2;
  --beone-ink: #141025;
  --beone-slate: #1f2630;
  --beone-orange: #ed8533;
  --brand: var(--beone-pink);
  --accent: var(--beone-orange);
  /* Official purple on pink is 4.459:1; black provides 5.042:1 for normal CTA text. */
  --brand-ink: #000;
  --accent-ink: var(--beone-ink);
  --brand-outline: var(--beone-ink);
  --brand-text: var(--beone-ink);
  --page: var(--beone-paper);
  --surface: #fff;
  --surface-alt: color-mix(in srgb, var(--beone-paper) 72%, var(--surface));
  --surface-raised: var(--surface);
  --text: var(--beone-ink);
  --muted: color-mix(in srgb, var(--beone-slate) 78%, var(--surface));
  --border: color-mix(in srgb, var(--beone-slate) 26%, var(--surface));
  --input-border: color-mix(in srgb, var(--beone-slate) 65%, var(--surface));
  --danger: color-mix(in srgb, var(--beone-pink) 65%, var(--beone-ink));
  --danger-bg: color-mix(in srgb, var(--beone-pink) 9%, var(--surface));
  --danger-fill: var(--beone-pink);
  --danger-ink: #000;
  --success: var(--beone-slate);
  --success-bg: color-mix(in srgb, var(--beone-slate) 7%, var(--surface));
  --warning: color-mix(in srgb, var(--beone-orange) 55%, var(--beone-ink));
  --warning-bg: color-mix(in srgb, var(--beone-orange) 13%, var(--surface));
  --info-bg: color-mix(in srgb, var(--beone-slate) 5%, var(--surface));
  --focus: var(--beone-ink);
  --brand-soft: color-mix(in srgb, var(--brand) 12%, var(--surface));
  --overlay: color-mix(in srgb, var(--beone-ink) 60%, transparent);
  --shadow: color-mix(in srgb, var(--beone-ink) 14%, transparent);
  --story-bg: var(--beone-ink);
  --story-text: var(--beone-paper);
  --story-muted: color-mix(in srgb, var(--beone-paper) 80%, var(--beone-ink));
  --story-ring: color-mix(in srgb, var(--beone-paper) 18%, transparent);
  --radius-card: 22px 22px 22px 0;
  --radius-control: 999px;
}

:root[data-theme="dark"] {
  color-scheme: dark;
  --page: var(--beone-ink);
  --surface: var(--beone-slate);
  --surface-alt: color-mix(in srgb, var(--beone-slate) 88%, var(--beone-paper));
  --surface-raised: color-mix(in srgb, var(--beone-slate) 96%, var(--beone-paper));
  --text: var(--beone-paper);
  --muted: color-mix(in srgb, var(--beone-paper) 76%, var(--surface));
  --border: color-mix(in srgb, var(--beone-paper) 28%, var(--surface));
  --input-border: color-mix(in srgb, var(--beone-paper) 55%, var(--surface));
  --brand-outline: var(--beone-paper);
  --brand-text: var(--beone-paper);
  --danger: color-mix(in srgb, var(--beone-pink) 45%, var(--beone-paper));
  --danger-bg: color-mix(in srgb, var(--beone-pink) 12%, var(--surface));
  --success: var(--beone-paper);
  --success-bg: color-mix(in srgb, var(--beone-paper) 7%, var(--surface));
  --warning: var(--beone-orange);
  --warning-bg: color-mix(in srgb, var(--beone-orange) 12%, var(--surface));
  --info-bg: color-mix(in srgb, var(--beone-paper) 6%, var(--surface));
  --focus: var(--beone-paper);
  --brand-soft: color-mix(in srgb, var(--brand) 15%, var(--surface));
  --shadow: color-mix(in srgb, #000 42%, transparent);
}