/*
  Production Warm Blue tokens. Light values match the approved visual system.
  Dark values reuse the product shell's existing dark palette (D02).
  No new dark hex values are introduced.

  Served at /assets/warm-blue/warm-blue-tokens.css in every runtime, including hosted mode.
*/

@font-face {
  font-family: "Source Sans 3";
  src: url("/assets/warm-blue/fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: block;
}

@font-face {
  font-family: "Source Serif 4";
  src: url("/assets/warm-blue/fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 900;
  font-style: normal;
  font-display: block;
}

:root {
  /* Colour: surfaces, text and primary roles. */
  --wb-color-canvas: #e7edf2;
  --wb-color-header: #dce5ed;
  --wb-color-interaction-surface: #d4dfe9;
  --wb-color-field-surface: #f0f4f5;
  --wb-color-text-primary: #243e52;
  --wb-color-text-secondary: #4e6472;
  --wb-color-action-primary: #476f8d;
  --wb-color-link: #365f7d;
  --wb-color-user-message: #cddfec;
  --wb-color-disclosure-background: #f3e4e1;
  --wb-color-disclosure-red: #8d4f48;

  /* Colour: interaction states, boundaries and disclosure. */
  --wb-color-action-hover: #3d617b;
  --wb-color-action-pressed: #335267;
  --wb-color-text-on-action: #faf8f4;
  --wb-color-border-subtle: #c8d3de;
  --wb-color-border-control: #687f90;
  --wb-color-focus: #2d5c7b;
  --wb-color-disabled-surface: #ccd8e0;
  --wb-color-disabled-text: #5a6b78;
  --wb-color-disclosure-border: #af766d;
  --wb-color-error-accent: var(--wb-color-disclosure-border);

  /* Colour: sheets reuse the existing palette under their own role. */
  --wb-color-sheet-surface: var(--wb-color-field-surface);
  --wb-sheet-shadow: -8px 0 24px rgb(36 62 82 / 0.08);

  /* Typography. */
  --wb-font-sans: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --wb-font-serif: "Source Serif 4", Georgia, serif;
  --wb-font-size-conversation: 1.125rem;
  --wb-line-height-conversation: 1.6;
  --wb-font-size-label: 1rem;
  --wb-line-height-label: 1.5;
  --wb-font-size-helper: 0.875rem;
  --wb-font-size-creation-heading: 2rem;
  --wb-font-size-creation-heading-narrow: 1.75rem;
  --wb-line-height-creation-heading: 1.25;
  --wb-font-size-identity: 1.5rem;
  --wb-font-size-identity-narrow: 1.375rem;
  --wb-line-height-identity: 1.3;
  --wb-font-weight-regular: 400;
  --wb-font-weight-display: 500;
  --wb-font-weight-strong: 600;
  --wb-letter-spacing-brand: 0.04em;

  /* Spacing: canonical 4 px scale. */
  --wb-space-1: 4px;
  --wb-space-2: 8px;
  --wb-space-3: 12px;
  --wb-space-4: 16px;
  --wb-space-5: 24px;
  --wb-space-6: 32px;
  --wb-space-7: 48px;
  --wb-space-8: 64px;

  /* Radii: inside the canonical section 48 ranges. */
  --wb-radius-action: 12px;
  --wb-radius-composer: 14px;
  --wb-radius-message: 14px;
  --wb-radius-upload: 16px;
  --wb-radius-round: 50%;

  /* Layout. */
  --wb-header-height: 60px;
  --wb-header-height-narrow: 52px;
  --wb-header-identity-height-narrow: 36px;
  --wb-brand-logo-height: 28px;
  --wb-brand-logo-height-narrow: 24px;
  --wb-brand-logo-filter: brightness(0.75) saturate(1.1);
  --wb-creation-lift: 100px;
  --wb-column-width: 800px;
  --wb-reading-width: 700px;
  --wb-user-message-max-width: 75%;
  --wb-user-message-max-width-narrow: 80%;
  --wb-upload-width: 600px;
  --wb-upload-height: 200px;
  --wb-upload-height-narrow: 160px;
  --wb-file-summary-width: 400px;
  --wb-creation-action-max-width: 400px;
  --wb-sheet-width: 440px;
  --wb-auth-width: 400px;
  --wb-activity-width: 240px;
  --wb-activity-height: 2px;
  --wb-action-height: 48px;
  --wb-action-min-width: 240px;
  --wb-target-size: 44px;
  --wb-send-size: 40px;
  --wb-icon-size: 20px;
  --wb-icon-stroke: 1.6;
  --wb-border-width: 1px;
  --wb-focus-width: 2px;
  --wb-focus-offset: 2px;
  --wb-underline-offset: 3px;
  --wb-composer-max-height: 240px;
  --wb-composer-max-height-narrow: 33dvh;
  --wb-safe-area-top: env(safe-area-inset-top, 0px);
  --wb-safe-area-bottom: env(safe-area-inset-bottom, 0px);

  /* Motion. */
  --wb-motion-duration: 180ms;
  --wb-motion-easing: ease;
  --wb-activity-duration: 2400ms;
  --wb-activity-easing: ease-in-out;
}

/*
  D02 dark mapping. Each value is copied from the product shell's retained dark palette:
  canvas --bg, header --panel, interaction --surface, field --surface-strong,
  text --text / --text-soft, action --btn-bg / --btn-text, link and focus --accent,
  borders --border / --drop-border, user message --accent-tint.
  Disclosure has no separate dark red in that palette, so its lead uses primary text
  and its surface uses the retained panel colour. That keeps contrast without a new hue.
*/
:root[data-theme="dark"] {
  --wb-color-canvas: #121a2b;
  --wb-color-header: #182135;
  --wb-color-interaction-surface: #1c2740;
  --wb-color-field-surface: #212d49;
  --wb-color-text-primary: #e6ecf9;
  --wb-color-text-secondary: #a3b0ca;
  --wb-color-action-primary: #8fb0e6;
  --wb-color-action-hover: #c2d5f5;
  --wb-color-action-pressed: #a9c3ef;
  --wb-color-text-on-action: #101a2c;
  --wb-color-link: #a9c3ef;
  --wb-color-user-message: #1f2b45;
  --wb-color-border-subtle: #2f3d59;
  --wb-color-border-control: #657fb0;
  --wb-color-focus: #a9c3ef;
  --wb-color-disabled-surface: #1c2740;
  --wb-color-disabled-text: #a3b0ca;
  --wb-color-disclosure-background: #182135;
  --wb-color-disclosure-red: #e6ecf9;
  --wb-color-disclosure-border: #657fb0;
  --wb-color-sheet-surface: #212d49;
  --wb-sheet-shadow: -8px 0 24px rgb(0 0 0 / 0.35);
}