/*
 * Design tokens. Keep in sync with packages/ui/src/styles/tokens.css (same values, used by the React app).
 * Names describe the role, not the colour. Colours used only once or twice stay literal in the component's CSS.
 * Dark values live under [data-theme='dark'] (set on <html> by the web app, see web/src/lib/theme.ts). Pages that
 * never set it (marketing) stay light; [data-theme='light'] scopes an element back to light inside a dark page.
 */
:root,
[data-theme='light'] {
  color-scheme: light;

  /* Brand / primary blue */
  --color-primary: #1868db;
  --color-primary-hover: #1558bc;
  --color-primary-dark: #123263;
  --color-primary-light: #357de8;
  --color-primary-soft: #8fb8f6;
  --color-primary-faint: #cfe1fd;
  --color-selected: #e9f2fe;
  --color-primary-tint: #f0f6ff;
  /* Deep brand blue for gradients and filled panels; the same in both themes. */
  --color-primary-deep: #123263;
  /* Brand panels (For you hero, sign-in panel): gradient from -> mid -> deep, with on-brand text on top */
  --color-brand-from: #357de8;
  --color-brand-mid: #1558bc;
  --color-on-brand-muted: #cfe1fd;
  --color-on-brand-soft: #8fb8f6;
  --color-on-brand: #e9f2fe;

  /* Text */
  --color-text: #292a2e;
  --color-text-subtle: #505258;
  --color-text-subtlest: #6b6e76;
  --color-text-secondary: #44546f;
  --color-text-disabled: #8c8f97;
  --color-icon-disabled: #b7b9be;
  --color-text-inverse: #ffffff;

  /* Surfaces and borders */
  --color-surface: #ffffff;
  --color-surface-sunken: #f7f8f9;
  --color-neutral: #f1f2f4;
  --color-neutral-hover: #e7e8ea;
  --color-neutral-bold: #41444f;
  --color-border: #dddee1;
  --color-border-input: #c7c9ce;
  /* Popovers, menus and dialogs that float above the page */
  --color-surface-raised: #ffffff;
  /* Dark chips on a light page (toasts, tooltips, the selection bar): white text on top */
  --color-surface-inverse: #292a2e;
  /* Behind video and media, and the stripe of empty video placeholders; dark in both themes */
  --color-media: #292a2e;
  --color-media-stripe: #44546f;
  /* Behind a playing or loading video, and its letterbox: black in both themes */
  --color-media-backdrop: #000000;
  /* Modal backdrops */
  --color-overlay: rgba(41, 43, 49, 0.35);

  /* Status */
  --color-danger: #ae2e24;
  --color-danger-bold: #c9372c;
  --color-danger-subtle: #ffeceb;
  --color-danger-border: #f2b8b3;
  --color-record: #e2483d;
  --color-success: #216e4e;
  --color-success-bold: #1f845a;
  --color-success-icon: #22a06b;
  --color-success-subtle: #dcfff1;
  --color-warning: #7f5f01;
  --color-warning-bold: #533f04;
  --color-warning-subtle: #fff7d6;
  --color-warning-faint: #fff7db;
  --color-warning-icon: #f5b400;
  --color-orange: #c25100;
  --color-paypal: #ffc439;
  --color-paypal-hover: #f2b524;
  --color-paypal-text: #003087;

  /* Transcript search */
  --color-search-match: #ffedb5;
  --color-search-text: #292a2e;
  --color-search-current: #ffab00;
  --color-search-current-text: #292a2e;

  /* Type */
  --font-sans: Inter, system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
}

[data-theme='dark'] {
  color-scheme: dark;

  --color-primary: #2f7de8;
  --color-primary-hover: #4a90f0;
  --color-primary-dark: #85b8ff;
  --color-primary-light: #579dff;
  --color-primary-soft: #6a9fe6;
  --color-primary-faint: #1f3a63;
  --color-selected: #1c2b41;
  --color-primary-tint: #172436;
  --color-brand-from: #2763c8;
  --color-brand-mid: #1a4a94;

  --color-text: #dee4ea;
  --color-text-subtle: #b6c2cf;
  --color-text-subtlest: #9fadbc;
  --color-text-secondary: #a3b0c2;
  --color-text-disabled: #738496;
  --color-icon-disabled: #596773;
  --color-text-inverse: #ffffff;

  --color-surface: #1d2125;
  --color-surface-sunken: #161a1d;
  --color-neutral: #2c333a;
  --color-neutral-hover: #38414a;
  --color-border: #38414a;
  --color-border-input: #4b5561;
  --color-surface-raised: #282e33;
  --color-surface-inverse: #454f59;
  --color-overlay: rgba(0, 0, 0, 0.6);

  --color-danger: #f87168;
  --color-danger-bold: #e2483d;
  --color-danger-subtle: #42221f;
  --color-danger-border: #6b2f2a;
  --color-success: #4bce97;
  --color-success-bold: #1f845a;
  --color-success-icon: #2abb7f;
  --color-success-subtle: #1c3329;
  --color-warning: #f5cd47;
  --color-warning-bold: #f8e6a0;
  --color-warning-subtle: #332e1b;
  --color-warning-faint: #2e2a1a;
  --color-orange: #fea362;
  --color-search-match: #59471b;
  --color-search-text: #fff0bc;
  --color-search-current: #f5cd47;
  --color-search-current-text: #292a2e;
}