/* ======================================================================
   Pulse AI (/ai) — global design tokens + base.
   Ported from the design team's mockup (Pulse AI/styles.css production :root).
   Source Sans Pro is provided by the host Pulse shell; this sheet defines the
   custom properties every <ai-*> Lit component references via var(--...).
   Custom properties pierce shadow DOM, so this is the single token source.
   ====================================================================== */

:root {
  --font-sans: "SourceSansPro", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-sans);
  --font-mono: ui-monospace, SFMono-Regular, Menlo, monospace;

  --ink-900: #00193D;
  --ink-800: #292929;
  --ink-700: #4B4B4B;
  --ink-600: #6B6B6B;
  --ink-500: #808080;
  --ink-400: #A9A9A9;
  --ink-300: #C7C7C7;
  --ink-200: #E9E9E9;
  --ink-100: #F7F7F7;
  --ink-050: #FCFCFC;
  --white: #FFFFFF;

  --pulse-50:  #EBF3FF;
  --pulse-75:  #CCE1FC;
  --pulse-100: #A2C4F2;
  --pulse-200: #6CA2EB;
  --pulse-300: #2362BA;
  --pulse-400: #134791;
  --pulse-500: #134791;

  --soti-red: #B60005;
  --success:  #00AE00;

  --accent: var(--pulse-300);
  --accent-soft: var(--pulse-50);
  --accent-hover: var(--pulse-400);
  --on-accent: #FFFFFF;

  --fg-1: var(--ink-900);
  --fg-2: var(--ink-700);
  --fg-3: var(--ink-500);
  --fg-4: var(--ink-400);

  --bg-page: var(--white);

  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-2xl: 24px;
  --r-pill: 999px;

  --shadow-1: 0 1px 2px 0 rgba(17,17,37,0.06);
  --shadow-2: 0 4px 14px -2px rgba(41,41,41,0.10), 0 2px 6px -2px rgba(41,41,41,0.06);
  --shadow-3: 0 8px 20px 6px rgba(41,41,41,0.12);
  --shadow-focus: 0 0 0 3px rgba(56,127,227,0.30);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 120ms;
  --dur-med:  200ms;
  --dur-slow: 320ms;

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semibold: 600;
  --weight-bold:    700;
  --weight-black:   900;
}

html.dark {
  --bg-page: #14171C;
  --white:   #1B2027;
  --ink-900: #F2F5F9;
  --ink-800: #E4E9F0;
  --ink-700: #C5CDD8;
  --ink-600: #9AA4B2;
  --ink-500: #828D9C;
  --ink-400: #6B7585;
  --ink-300: #4A5260;
  --ink-200: #2C333D;
  --ink-100: #1F252D;
  --ink-050: #1C222A;
  --pulse-50:  #182A40;
  --pulse-75:  #2A405F;
  --pulse-100: #2A405F;
  --pulse-300: #387FE3;
  --pulse-400: #2362BA;
  --pulse-500: #6CA2EB;
  --soti-red:  #F2554B;
  --shadow-1: 0 1px 2px 0 rgba(0,0,0,0.45);
  --shadow-2: 0 6px 18px -4px rgba(0,0,0,0.55);
  --shadow-3: 0 12px 30px 4px rgba(0,0,0,0.6);
  --shadow-focus: 0 0 0 3px rgba(56,127,227,0.40);
}

.ai-fullscreen {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 72px);
  min-height: 0;
  background: var(--bg-page);
}

@media (prefers-reduced-motion: reduce) {
  .ai-fullscreen *,
  .ai-fullscreen *::before,
  .ai-fullscreen *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}