/* Sealion Visio — generated by build-css.py. Do not edit by hand. */
/* Palette derived from the AURA design system (accueil.sealion.fr). */

/* Inter — UI text. Variable, 100..900, latin + latin-ext. */
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/Inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02AF, U+0300-0301, U+0303, U+0309, U+0323, U+1E00-1EFF,
    U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Unbounded — display face, matching aura.sealion.fr headings. */
@font-face {
  font-family: 'Unbounded';
  src: url('/assets/fonts/Unbounded-latin.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --fonts-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --fonts-display: 'Unbounded', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --global-font-body: var(--fonts-sans);
  --avatar-cap-height: 0.72;

  --colors-primary-50: #fff6ee;
  --colors-primary-100: #ffede0;
  --colors-primary-200: #ffe3d0;
  --colors-primary-300: #fbcdae;
  --colors-primary-400: #f6a163;
  --colors-primary-500: #e67e22;
  --colors-primary-600: #b85400;
  --colors-primary-700: #6b390f;
  --colors-primary-800: #b45100;
  --colors-primary-900: #4e2c11;
  --colors-primary-950: #3f2410;
  --colors-primary-action: #e67e22;

  --colors-greyscale-000: #ffffff;
  --colors-greyscale-50: #f9f9f9;
  --colors-greyscale-100: #f4f4f4;
  --colors-greyscale-200: #e8e8e8;
  --colors-greyscale-250: #dddddd;
  --colors-greyscale-300: #cecece;
  --colors-greyscale-400: #9a9a9a;
  --colors-greyscale-500: #7c7c7c;
  --colors-greyscale-600: #666666;
  --colors-greyscale-700: #404040;
  --colors-greyscale-750: #363636;
  --colors-greyscale-800: #2a2a2a;
  --colors-greyscale-900: #232323;
  --colors-greyscale-950: #1d1d1d;
  --colors-greyscale-1000: #161616;

  --colors-primary-dark-50: #161616;
  --colors-primary-dark-75: #1d1d1d;
  --colors-primary-dark-100: #2a2a2a;
  --colors-primary-dark-200: #404040;
  --colors-primary-dark-300: #555555;
  --colors-primary-dark-400: #6e6e6e;
  --colors-primary-dark-500: #8a8a8a;
  --colors-primary-dark-600: #a3a3a3;
  --colors-primary-dark-700: #bdbdbd;
  --colors-primary-dark-800: #d6d6d6;
  --colors-primary-dark-900: #e8e8e8;
  --colors-primary-dark-950: #f4f4f4;
  --colors-primary-dark-action: #e67e22;

  --colors-gray-50: #f9f9f9;
  --colors-gray-100: #f4f4f4;
  --colors-gray-200: #e8e8e8;
  --colors-gray-300: #cecece;
  --colors-gray-400: #9a9a9a;
  --colors-gray-500: #7c7c7c;
  --colors-gray-600: #666666;
  --colors-gray-700: #404040;
  --colors-gray-800: #2a2a2a;
  --colors-gray-900: #232323;
  --colors-gray-950: #161616;

  --colors-error-100: #370603;
  --colors-error-200: #792a20;
  --colors-error-300: #9d2f23;
  --colors-error-400: #c63f30;
  --colors-error-500: #c0392b;
  --colors-error-600: #e26756;
  --colors-error-700: #f18f80;
  --colors-error-800: #fbb2a6;
  --colors-error-900: #ffd6cf;
  --colors-error-950: #fff3f0;

  --colors-default-text: #1d1d1d;
  --colors-default-bg: #ffffff;
  --colors-default-subtle: #f4f4f4;
  --colors-default-subtle-text: #666666;
  --colors-box-text: #1d1d1d;
  --colors-box-bg: #ffffff;
  --colors-box-border: #cecece;
  --colors-control: #f4f4f4;
  --colors-control-hover: #e8e8e8;
  --colors-control-active: #dddddd;
  --colors-control-text: #1d1d1d;
  --colors-control-border: #7c7c7c;
  --colors-control-subtle: #9a9a9a;

  --colors-primary: #b45100;
  --colors-primary-hover: #9a3800;
  --colors-primary-active: #832100;
  --colors-primary-text: #ffffff;
  --colors-primary-warm: #fbcdae;
  --colors-primary-subtle: #ffede0;
  --colors-primary-subtle-text: #b45100;
  --colors-alert: #b45100;
  --colors-alert-notification: #c0392b;
  --colors-focus-ring: #e67e22;

  --colors-success: #1f7a37;
  --colors-success-hover: #1a6b2f;
  --colors-success-active: #155c28;
  --colors-success-text: #ffffff;
  --colors-success-subtle: #e3f7e9;
  --colors-success-subtle-text: #155c28;
  --colors-danger: #c0392b;
  --colors-danger-hover: #a53125;
  --colors-danger-active: #8a291f;
  --colors-danger-text: #ffffff;
  --colors-danger-subtle: #fbe6e3;
  --colors-danger-subtle-text: #8a291f;
  --colors-warning: #8a5200;
  --colors-warning-hover: #734400;
  --colors-warning-active: #5c3600;
  --colors-warning-text: #ffffff;
  --colors-warning-subtle: #fdf1e0;
  --colors-warning-subtle-text: #734400;
}

/* Dark theme — explicit opt-in via the toggle. */
html[data-theme='dark'] {
  --colors-primary-50: #402715;
  --colors-primary-100: #543117;
  --colors-primary-200: #713e16;
  --colors-primary-300: #954d08;
  --colors-primary-400: #c26814;
  --colors-primary-500: #e67e22;
  --colors-primary-600: #f29856;
  --colors-primary-700: #fbc49f;
  --colors-primary-800: #e67e22;
  --colors-primary-900: #ffe1cc;
  --colors-primary-950: #fff0e4;
  --colors-primary-action: #e67e22;

  --colors-greyscale-000: #1d1d1d;
  --colors-greyscale-50: #212121;
  --colors-greyscale-100: #2a2a2a;
  --colors-greyscale-200: #333333;
  --colors-greyscale-250: #3a3a3a;
  --colors-greyscale-300: #404040;
  --colors-greyscale-400: #6e6e6e;
  --colors-greyscale-500: #8a8a8a;
  --colors-greyscale-600: #a3a3a3;
  --colors-greyscale-700: #c4c4c4;
  --colors-greyscale-750: #d0d0d0;
  --colors-greyscale-800: #dcdcdc;
  --colors-greyscale-900: #e8e8e8;
  --colors-greyscale-950: #f4f4f4;
  --colors-greyscale-1000: #fbfbfb;

  --colors-gray-50: #212121;
  --colors-gray-100: #2a2a2a;
  --colors-gray-200: #333333;
  --colors-gray-300: #404040;
  --colors-gray-400: #6e6e6e;
  --colors-gray-500: #8a8a8a;
  --colors-gray-600: #a3a3a3;
  --colors-gray-700: #c4c4c4;
  --colors-gray-800: #dcdcdc;
  --colors-gray-900: #e8e8e8;
  --colors-gray-950: #f4f4f4;

  --colors-default-text: #f4f4f4;
  --colors-default-bg: #1d1d1d;
  --colors-default-subtle: #2a2a2a;
  --colors-default-subtle-text: #a3a3a3;
  --colors-box-text: #f4f4f4;
  --colors-box-bg: #2a2a2a;
  --colors-box-border: #404040;
  --colors-control: #2a2a2a;
  --colors-control-hover: #363636;
  --colors-control-active: #404040;
  --colors-control-text: #f4f4f4;
  --colors-control-border: #6e6e6e;
  --colors-control-subtle: #8a8a8a;

  --colors-primary: #e67e22;
  --colors-primary-hover: #f29856;
  --colors-primary-active: #fbc49f;
  --colors-primary-text: #1d1d1d;
  --colors-primary-warm: #954d08;
  --colors-primary-subtle: #543117;
  --colors-primary-subtle-text: #ffe1cc;
  --colors-alert: #e67e22;
  --colors-alert-notification: #e05a4a;
  --colors-focus-ring: #e67e22;

  --colors-success: #34c759;
  --colors-success-hover: #2aa94a;
  --colors-success-active: #238f3e;
  --colors-success-text: #1d1d1d;
  --colors-success-subtle: #17331f;
  --colors-success-subtle-text: #8ee0a3;
  --colors-danger: #e05a4a;
  --colors-danger-hover: #cf4c3d;
  --colors-danger-active: #c0392b;
  --colors-danger-text: #1d1d1d;
  --colors-danger-subtle: #3a1f1b;
  --colors-danger-subtle-text: #f0a99f;
  --colors-warning: #e6a23c;
  --colors-warning-hover: #d4912c;
  --colors-warning-active: #b87a20;
  --colors-warning-text: #1d1d1d;
  --colors-warning-subtle: #3a2c16;
  --colors-warning-subtle-text: #f0c98a;
}

/* Dark theme — follow the OS unless the viewer picked light. */
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) {
    --colors-primary-50: #402715;
    --colors-primary-100: #543117;
    --colors-primary-200: #713e16;
    --colors-primary-300: #954d08;
    --colors-primary-400: #c26814;
    --colors-primary-500: #e67e22;
    --colors-primary-600: #f29856;
    --colors-primary-700: #fbc49f;
    --colors-primary-800: #e67e22;
    --colors-primary-900: #ffe1cc;
    --colors-primary-950: #fff0e4;
    --colors-primary-action: #e67e22;

    --colors-greyscale-000: #1d1d1d;
    --colors-greyscale-50: #212121;
    --colors-greyscale-100: #2a2a2a;
    --colors-greyscale-200: #333333;
    --colors-greyscale-250: #3a3a3a;
    --colors-greyscale-300: #404040;
    --colors-greyscale-400: #6e6e6e;
    --colors-greyscale-500: #8a8a8a;
    --colors-greyscale-600: #a3a3a3;
    --colors-greyscale-700: #c4c4c4;
    --colors-greyscale-750: #d0d0d0;
    --colors-greyscale-800: #dcdcdc;
    --colors-greyscale-900: #e8e8e8;
    --colors-greyscale-950: #f4f4f4;
    --colors-greyscale-1000: #fbfbfb;

    --colors-gray-50: #212121;
    --colors-gray-100: #2a2a2a;
    --colors-gray-200: #333333;
    --colors-gray-300: #404040;
    --colors-gray-400: #6e6e6e;
    --colors-gray-500: #8a8a8a;
    --colors-gray-600: #a3a3a3;
    --colors-gray-700: #c4c4c4;
    --colors-gray-800: #dcdcdc;
    --colors-gray-900: #e8e8e8;
    --colors-gray-950: #f4f4f4;

    --colors-default-text: #f4f4f4;
    --colors-default-bg: #1d1d1d;
    --colors-default-subtle: #2a2a2a;
    --colors-default-subtle-text: #a3a3a3;
    --colors-box-text: #f4f4f4;
    --colors-box-bg: #2a2a2a;
    --colors-box-border: #404040;
    --colors-control: #2a2a2a;
    --colors-control-hover: #363636;
    --colors-control-active: #404040;
    --colors-control-text: #f4f4f4;
    --colors-control-border: #6e6e6e;
    --colors-control-subtle: #8a8a8a;

    --colors-primary: #e67e22;
    --colors-primary-hover: #f29856;
    --colors-primary-active: #fbc49f;
    --colors-primary-text: #1d1d1d;
    --colors-primary-warm: #954d08;
    --colors-primary-subtle: #543117;
    --colors-primary-subtle-text: #ffe1cc;
    --colors-alert: #e67e22;
    --colors-alert-notification: #e05a4a;
    --colors-focus-ring: #e67e22;

    --colors-success: #34c759;
    --colors-success-hover: #2aa94a;
    --colors-success-active: #238f3e;
    --colors-success-text: #1d1d1d;
    --colors-success-subtle: #17331f;
    --colors-success-subtle-text: #8ee0a3;
    --colors-danger: #e05a4a;
    --colors-danger-hover: #cf4c3d;
    --colors-danger-active: #c0392b;
    --colors-danger-text: #1d1d1d;
    --colors-danger-subtle: #3a1f1b;
    --colors-danger-subtle-text: #f0a99f;
    --colors-warning: #e6a23c;
    --colors-warning-hover: #d4912c;
    --colors-warning-active: #b87a20;
    --colors-warning-text: #1d1d1d;
    --colors-warning-subtle: #3a2c16;
    --colors-warning-subtle-text: #f0c98a;
  }
}

/* --- Page surface ---------------------------------------------------------
   Upstream emits no background rule for html or body at all: the app is light
   everywhere outside a room, so the browser's white default was enough. That
   makes --colors-default-bg a token nothing consumes, and a dark theme would
   otherwise paint light text onto a white page. Apply it explicitly, and set
   color-scheme so scrollbars, form controls and the like follow. */
html {
  background-color: var(--colors-default-bg);
  color: var(--colors-default-text);
}
body {
  background-color: var(--colors-default-bg);
  color: var(--colors-default-text);
}
:root {
  color-scheme: light;
}
html[data-theme='dark'] {
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) {
    color-scheme: dark;
  }
}

/* --- Literal white surfaces -----------------------------------------------
   Twelve components set `backgroundColor: 'white'` instead of a semantic token
   (layout/Layout.tsx, the dialogs, the diagnostics cards…). They all compile to
   the single class .bg-c_white reading --colors-white, which also paints 29
   white *text* usages via .c_white — so the variable itself cannot be flipped
   without turning button labels dark. Re-point the background class alone.

   They map to box.bg (the raised AURA surface) rather than default.bg: most of
   them are cards and dialogs. The page shell ends up one step lighter than the
   body behind it, which reads correctly. */
html[data-theme='dark'] .bg-c_white {
  background-color: var(--colors-box-bg);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) .bg-c_white {
    background-color: var(--colors-box-bg);
  }
}

/* --- Display face ---------------------------------------------------------
   Panda's textStyles only set size and weight, so headings inherit --fonts-sans.
   The H primitive renders real h1/h2/h3 elements (primitives/H.tsx), so tagging
   them is enough — and safer than matching Panda's generated class names. */
h1, h2, h3 {
  font-family: var(--fonts-display);
  letter-spacing: -0.01em;
}

/* --- Logo -----------------------------------------------------------------
   Header.tsx renders the logo as <img src="/assets/logo.svg">, which cannot
   inherit currentColor, so swap the file itself per theme. */
.Header-logo {
  content: url('/assets/logo.svg');
}
html[data-theme='dark'] .Header-logo {
  content: url('/assets/logo-dark.svg');
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme='light']) .Header-logo {
    content: url('/assets/logo-dark.svg');
  }
}
/* No rule is needed for rooms: Conference.tsx renders <Screen header={false}>,
   so the header — and the logo — are absent once a call starts. Note that
   index.html puts data-lk-theme on <html> permanently, so that attribute can
   never be used to detect "in a room"; .lk-room-container is the real marker. */

/* --- Theme toggle ---------------------------------------------------------
   Injected by sealion-theme.js. Hidden inside a room, where Visio forces its
   own dark chrome and the control would be meaningless. */
#sealion-theme-toggle {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--colors-box-border);
  border-radius: var(--radii-full, 9999px);
  background: var(--colors-box-bg);
  color: var(--colors-default-text);
  cursor: pointer;
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.12);
  transition: background-color 120ms ease, border-color 120ms ease;
}
#sealion-theme-toggle:hover {
  background: var(--colors-control-hover);
  border-color: var(--colors-control-border);
}
#sealion-theme-toggle:focus-visible {
  outline: 2px solid var(--colors-focus-ring);
  outline-offset: 2px;
}
#sealion-theme-toggle svg {
  width: 1.15rem;
  height: 1.15rem;
}
html:has([data-lk-theme]) #sealion-theme-toggle {
  display: none;
}

/* --- Colours that bypass the token system ---------------------------------
   A handful of components hard-code a literal instead of a token, so nothing
   above can reach them. Panda turns each literal into a deterministic atomic
   class, which is what these rules target. Verified against the compiled
   index-*.css; re-check after a big upstream bump.

   .c_#0063CB / .bg-c_#E8EDFF  DSFR blue "Beta" badge
                               (settings/.../RowWrapper.tsx, recording/RecordingDownload.tsx)
   .bg-c_rgba(22,22,34,0.9)    old purple-dark overlay
                               (participantTile/.../FullScreenShareWarning.tsx)

   Not covered: getParticipantColor.ts falls back to rgb(87, 44, 216) as an
   inline style, which CSS cannot override. It is unreachable in practice — the
   backend always sends a per-participant HSL colour in the LiveKit token
   (core/utils.py generate_color). */
.c_\#0063CB {
  color: #b45100;
}
html[data-theme='dark'] .c_\#0063CB {
  color: #e67e22;
}
.bg-c_\#E8EDFF {
  background-color: #ffede0;
}
html[data-theme='dark'] .bg-c_\#E8EDFF {
  background-color: #543117;
}
.bg-c_rgba\(22\,_22\,_34\,_0\.9\) {
  background-color: rgb(29 29 29 / 0.92);
}

/* --- Brand accents --------------------------------------------------------- */
::selection {
  background: #e67e22;
  color: #1d1d1d;
}


/* Tooltips.
 *
 * Upstream draws them with a fixed dark background (primaryDark.100, #2a2a2a)
 * and takes the text colour from gray.100. Our dark theme inverts the grey
 * scale, so gray.100 becomes #2a2a2a too and every tooltip in the app renders
 * black on black — the box appears, empty. Pinning the text colour fixes both
 * themes at once, since the background is the same dark value in each. */
[role='tooltip'] {
  color: #f4f4f4;
}