/* Shared design tokens, Goldplay @font-face and base rules for the annotation pages
 * (review.css / workspace.css layer on top of this). Vanilla CSS, no build step.
 * Palette matches the barbri-lms design system: matisse-blue primary, Goldplay
 * headings, cod-gray text, and its success/warning/danger status colors.
 *
 * Body text names "Proxima Nova" in its font stack but does NOT self-host it
 * (unlike Goldplay, which IS bundled under static/fonts/); the pages fall through
 * the stack to a system sans-serif instead of bundling that font. */

@font-face {
  font-family: "Goldplay";
  src: url("fonts/goldplay/latinotype_-_goldplay_regular-webfont.woff2") format("woff2"),
       url("fonts/goldplay/latinotype_-_goldplay_regular-webfont.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Goldplay";
  src: url("fonts/goldplay/latinotype_-_goldplay_regular_it-webfont.woff2") format("woff2"),
       url("fonts/goldplay/latinotype_-_goldplay_regular_it-webfont.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Goldplay";
  src: url("fonts/goldplay/latinotype_-_goldplay_medium-webfont.woff2") format("woff2"),
       url("fonts/goldplay/latinotype_-_goldplay_medium-webfont.woff") format("woff");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Goldplay";
  src: url("fonts/goldplay/latinotype_-_goldplay_medium_it-webfont.woff2") format("woff2"),
       url("fonts/goldplay/latinotype_-_goldplay_medium_it-webfont.woff") format("woff");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Goldplay";
  src: url("fonts/goldplay/latinotype_-_goldplay_semibold-webfont.woff2") format("woff2"),
       url("fonts/goldplay/latinotype_-_goldplay_semibold-webfont.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Goldplay";
  src: url("fonts/goldplay/latinotype_-_goldplay_semibold_it-webfont.woff2") format("woff2"),
       url("fonts/goldplay/latinotype_-_goldplay_semibold_it-webfont.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}


:root {
  /* ── @barbri/oneux token bridge ──────────────────────────────────────────
   * Real values pulled from @barbri/oneux@0.1.42's dist/global-styles.css (the
   * package pe-vue-net/barbri-lms actually ships), so this file's visual
   * language matches the live design system even though the package itself
   * isn't installed yet (blocked on an expired Azure Artifacts token as of
   * this pass — see package.json/.npmrc). Once it installs and its
   * global-styles.css loads, these become harmless duplicate declarations of
   * the same values; deleting this block then is the whole migration.
   * Only the handful of primitives/aliases this file actually uses are
   * ported — not oneux's full token set. */
  --bb-color-blue-50: #ebf2f9;
  --bb-color-blue-100: #c8d9ee;
  --bb-color-blue-500: #3c79c3;
  --bb-color-blue-600: #3163a0;
  --bb-color-blue-700: #2a5488;
  --bb-color-blue-900: #112237;
  --bb-color-blue-950: #001722;
  --bb-color-neutral-50: #ffffff;
  --bb-color-neutral-100: #efefef;
  --bb-color-neutral-300: #bdbdbd;
  --bb-color-neutral-500: #7c7c7c;
  --bb-color-neutral-700: #525252;
  --bb-color-neutral-950: #292929;
  --bb-color-red-50: #fef2f2;
  --bb-color-red-300: #f9a8aa;
  --bb-color-red-600: #d9253b;
  --bb-color-red-900: #83182e;
  --bb-color-orange-50: #fff0e6;
  --bb-color-orange-300: #ffb98a;
  --bb-color-orange-800: #752f00;
  --bb-color-orange-900: #471d00;
  --bb-color-green-50: #f0f7ee;
  --bb-color-green-700: #457336;
  --bb-color-green-900: #1d3117;
  --bb-color-purple-50: #f2e8fc;
  --bb-color-purple-300: #ad6eed;
  --bb-color-purple-600: #6917ba;

  /* Semantic aliases oneux's OWN component CSS reads directly (bb-card, bb-sidebar,
   * bb-sidebar-item, bb-chip — grepped from their .scss sources) — these have to be
   * real --bb-* names, not just isaac-3.0's own var(--color-*) aliases, since the
   * components' internal styles reference them by that name regardless of whether
   * oneux's own global-styles.css is loaded (see app/mfe/oneux.js's module docstring
   * on why that stylesheet isn't wired in this pass). */
  --bb-color-bg-surface: var(--bb-color-neutral-50);
  --bb-color-bg-surface-hover: var(--bb-color-blue-50);
  --bb-color-border-secondary: var(--bb-color-neutral-300);
  --bb-color-text-secondary: var(--bb-color-neutral-700);
  --bb-color-text-invert: var(--bb-color-neutral-50);
  --bb-body-font-size: 16px;
  --bb-body-font-weight: 400;
  --bb-body-font-weight-strong: 600;
  --bb-body-line-height: 1.5;
  --bb-icon-font-weight: 300;

  --bb-spacing-half: 4px;
  --bb-spacing-1u: 8px;
  --bb-spacing-1-5u: 12px;
  --bb-spacing-2u: 16px;
  --bb-spacing-3u: 24px;
  --bb-spacing-4u: 32px;
  --bb-spacing-6u: 48px;

  --bb-border-width-1: 1px;
  --bb-border-radius-xs: 2px;
  --bb-border-radius-s: 4px;
  --bb-border-radius-md: 6px;
  --bb-border-radius-lg: 8px;
  --bb-border-radius-xl: 12px;
  --bb-border-radius-3xl: 24px;

  --bb-shadow-200: 0px 3px 1px -1px rgb(26 26 26 / 7%);
  --bb-shadow-300: 0px 4px 6px -2px rgb(26 26 26 / 20%);
  --bb-shadow-400: 0px 8px 16px -4px rgb(26 26 26 / 22%);

  /* ── isaac-3.0's own names, re-expressed against the bridge above ──
   * Kept so every existing rule below (and any other file) needs no rename;
   * only the values move to track oneux's real palette. Typography stays on
   * Goldplay/Proxima Nova rather than oneux's Bitter/Nunito — those
   * aren't self-hosted anywhere in this repo yet and pulling them from a CDN
   * would be a new external dependency + CSP hole, which is a decision to
   * take deliberately rather than as a side effect of a visual refresh. */
  --color-bg: var(--bb-color-neutral-50);
  --color-surface: var(--bb-color-blue-50);
  --color-subtle: var(--bb-color-blue-100);
  --color-panel: var(--bb-color-neutral-50);
  --color-border: var(--bb-color-blue-100);
  --color-border-light: var(--bb-color-blue-50);

  --color-text: var(--bb-color-neutral-950);
  --color-text-muted: var(--bb-color-neutral-700);

  --color-primary: var(--bb-color-blue-700);
  --color-primary-hover: var(--bb-color-blue-600);
  --color-primary-active: var(--bb-color-blue-950);
  --color-primary-tint: var(--bb-color-blue-100);

  --color-danger: var(--bb-color-red-600);
  --color-danger-tint: var(--bb-color-red-50);
  --color-danger-border: var(--bb-color-red-300);
  --color-warning: var(--bb-color-orange-800);
  --color-warning-tint: var(--bb-color-orange-50);
  --color-warning-border: var(--bb-color-orange-300);
  --color-warning-text-dark: var(--bb-color-orange-900);
  --color-success: var(--bb-color-green-700);
  --color-success-tint: var(--bb-color-green-50);

  /* ISAAC's own accent, reserved for what ISAAC itself is doing (the rail's
   * thinking/trace/AI-generated affordances) rather than the app's neutral
   * chrome — mirrors the prototype's own purple-for-ISAAC convention. */
  --color-isaac: var(--bb-color-purple-600);
  --color-isaac-tint: var(--bb-color-purple-50);
  --color-isaac-border: var(--bb-color-purple-300);

  /* Typography — same webfonts as barbri-lms */
  --font-heading: "Goldplay", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: "Proxima Nova", Avenir, Helvetica, Arial, sans-serif;

  /* Shape & elevation */
  --radius-sm: var(--bb-border-radius-xs);
  --radius: var(--bb-border-radius-s);
  --radius-md: var(--bb-border-radius-md);
  --radius-lg: var(--bb-border-radius-lg);
  --radius-xl: var(--bb-border-radius-xl);
  --radius-full: 9999px;
  --shadow-sm: var(--bb-shadow-200);
  --shadow-md: var(--bb-shadow-300);
  --shadow-lg: var(--bb-shadow-400);

  --transition: 150ms cubic-bezier(0.25, 0.1, 0.25, 1);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--color-bg);
  color: var(--color-text);
  -webkit-font-smoothing: antialiased;
}

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}