/*
 * GENERATED — do not edit.
 *
 *   node tools/site-theme.mjs        (npm run site:theme)
 *
 * Source: src/lib/themes.css. Every :root selector there is retargeted to
 * .ac-device here, so the nine provider palettes on the landing page are the
 * same nine the extension ships and cannot drift from them. The @property
 * registrations are kept, which is what makes the hero's morph interpolate
 * rather than snap.
 */

@property --bg {
  syntax: '<color>';
  inherits: true;
  initial-value: #131314;
}
@property --surface {
  syntax: '<color>';
  inherits: true;
  initial-value: #1e1f20;
}
@property --border {
  syntax: '<color>';
  inherits: true;
  initial-value: #2a2a2c;
}
@property --accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #8ab4f8;
}
@property --on-accent {
  syntax: '<color>';
  inherits: true;
  initial-value: #000000;
}
@property --text {
  syntax: '<color>';
  inherits: true;
  initial-value: #ececec;
}
@property --muted {
  syntax: '<color>';
  inherits: true;
  initial-value: #9aa0a6;
}
@property --radius {
  syntax: '<length>';
  inherits: true;
  initial-value: 20px;
}
@property --glow {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.ac-device {
  --font: system-ui, -apple-system, 'Segoe UI', sans-serif;
  --morph: 200ms;
  --fade: 90ms;
  --send-bg: var(--accent);

  
  --on-send: var(--on-accent);

  
  --elevate: #000000;

  
  --shadow-1: 0 1px 3px rgb(0 0 0 / 34%);
  --shadow-2: 0 4px 14px rgb(0 0 0 / 42%);
  --shadow-3:
    0 1px 2px rgb(0 0 0 / 26%),
    0 14px 40px rgb(0 0 0 / 44%);
  
  --ring: rgb(0 0 0 / 45%);
  --scrim: rgb(8 10 14 / 55%);

  
  --danger: #e5484d;

  
  --notice-bg: #78350f;
  --notice-error-bg: #7f1d1d;
  --notice-text: #ffffff;
  --notice-ghost: rgb(255 255 255 / 18%);
  --notice-ghost-hover: rgb(255 255 255 / 28%);

  
  --mark-chatgpt: #ffffff;
  --mark-claude: #d97757;
  --mark-deepseek: #4d6bfe;
  --mark-gemini: #4285f4;
  --mark-perplexity: #1fb8cd;
  --mark-grok: #ffffff;
  --mark-copilot: #0078d4;
  --mark-m365copilot: #0078d4;
  --mark-metaai: #0866ff;
}

.ac-device[data-provider='chatgpt'] {
  --bg: #000000;
  --surface: #303030;
  --border: #303030;
  --accent: #ffffff;
  --on-accent: #000000;
  --text: #ececec;
  --muted: #a1a1a1;
  --radius: 26px;
  --glow: 0;
}

.ac-device[data-provider='claude'] {
  --bg: #1a1a19;
  --surface: #1a1a19;
  --border: #3d3d3a;
  --accent: #d97757;
  --on-accent: #ffffff;
  --text: #f0eee6;
  --muted: #9a978d;
  --radius: 20px;
  --glow: 0;
  --font: Georgia, 'Times New Roman', serif;
}

.ac-device[data-provider='deepseek'] {
  --bg: #1c1c1c;
  --surface: #2a2a2c;
  --border: #2a2a2c;
  --accent: #4d6bfe;
  --on-accent: #ffffff;
  --text: #ececec;
  --muted: #9b9b9f;
  --radius: 20px;
  --glow: 0;
}

.ac-device[data-provider='gemini'] {
  --bg: #131314;
  --surface: #1e1f20;
  --border: #1e1f20;
  --accent: #4285f4;
  --on-accent: #ffffff;
  --text: #e3e3e3;
  --muted: #9aa0a6;
  --radius: 26px;
  --glow: 1;
}

.ac-device[data-provider='perplexity'] {
  --bg: #14171a;
  --surface: #1e2227;
  --border: #2c3238;
  --accent: #1fb8cd;
  --on-accent: #000000;
  --text: #e6edf3;
  --muted: #8b949e;
  --radius: 22px;
  --glow: 0;
}

.ac-device[data-provider='grok'] {
  --bg: #000000;
  --surface: #000000;
  --border: #2a2a2a;
  --accent: #ffffff;
  --on-accent: #000000;
  --text: #f5f5f5;
  --muted: #8b8b8b;
  --radius: 26px;
  --glow: 0;
}

.ac-device[data-provider='copilot'] {
  --bg: #0f1319;
  --surface: #18202c;
  --border: #232e3e;
  --accent: #0078d4;
  --on-accent: #ffffff;
  --text: #e2e8f0;
  --muted: #8492a6;
  --radius: 20px;
  --glow: 0;
}

.ac-device[data-provider='m365copilot'] {
  --bg: #1f1f1f;
  --surface: #2d2d2d;
  --border: #484644;
  --accent: #479ef5;
  --on-accent: #ffffff;
  --send-bg: #ffffff;
  --on-send: #1f1f1f;
  --text: #e8e6e3;
  --muted: #adadad;
  --radius: 28px;
  --glow: 0;
}

.ac-device[data-provider='metaai'] {
  --bg: #141414;
  --surface: #242424;
  --border: #333333;
  --accent: #1f7efd;
  --send-bg: linear-gradient(100deg, #1f7efd 0%, #5572ff 100%);
  --on-accent: #ffffff;
  --text: #f0f2f5;
  --muted: #8a8d91;
  --radius: 20px;
  --glow: 0;
}

.ac-device[data-theme='light'] {
  --elevate: #ffffff;

  
  --shadow-1: 0 1px 3px rgb(16 24 40 / 10%);
  --shadow-2: 0 4px 14px rgb(16 24 40 / 12%);
  --shadow-3:
    0 1px 2px rgb(16 24 40 / 6%),
    0 14px 40px rgb(16 24 40 / 14%);
  --ring: rgb(16 24 40 / 16%);

  
  --scrim: rgb(20 22 26 / 45%);

  --danger: #cd2b31;

  
  --notice-bg: #fdf0d5;
  --notice-error-bg: #fdd8d8;
  --notice-text: #7c2d12;
  --notice-ghost: rgb(0 0 0 / 8%);
  --notice-ghost-hover: rgb(0 0 0 / 15%);

  --mark-chatgpt: #0d0d0d;
  --mark-grok: #0f0f0f;
}

.ac-device[data-theme='light'][data-provider='chatgpt'] {
  --bg: #ffffff;
  --surface: #f4f4f4;
  --border: #e3e3e3;
  --accent: #0d0d0d;
  --on-accent: #ffffff;
  --text: #0d0d0d;
  --muted: #5d5d5d;
}

.ac-device[data-theme='light'][data-provider='claude'] {
  --bg: #faf9f5;
  --surface: #ffffff;
  --border: #ddd8cc;
  
  --accent: #b8593a;
  --on-accent: #ffffff;
  --text: #2f2f2c;
  --muted: #6b6a63;
}

.ac-device[data-theme='light'][data-provider='deepseek'] {
  --bg: #ffffff;
  --surface: #f3f5f7;
  --border: #dde1e6;
  
  --accent: #4359e8;
  --on-accent: #ffffff;
  --text: #1a1a1a;
  --muted: #5f6672;
}

.ac-device[data-theme='light'][data-provider='gemini'] {
  --bg: #ffffff;
  --surface: #f0f4f9;
  --border: #d8dee6;
  --accent: #1a73e8;
  --on-accent: #ffffff;
  --text: #1f1f1f;
  --muted: #5b5f63;
}

.ac-device[data-theme='light'][data-provider='perplexity'] {
  --bg: #fcfcf9;
  --surface: #ffffff;
  --border: #e2e2dc;
  --accent: #20808d;
  --on-accent: #ffffff;
  --text: #13343b;
  --muted: #5c5f5b;
}

.ac-device[data-theme='light'][data-provider='grok'] {
  --bg: #ffffff;
  --surface: #ffffff;
  --border: #e0e0e0;
  --accent: #0f0f0f;
  --on-accent: #ffffff;
  --text: #0f0f0f;
  --muted: #616161;
}

.ac-device[data-theme='light'][data-provider='copilot'] {
  --bg: #ffffff;
  --surface: #f3f6fb;
  --border: #d7dfea;
  --accent: #0067c0;
  --on-accent: #ffffff;
  --text: #1b1b1f;
  --muted: #565e6b;
}

.ac-device[data-theme='light'][data-provider='m365copilot'] {
  --bg: #faf9f8;
  --surface: #ffffff;
  --border: #d1cfcd;
  --accent: #0f6cbd;
  --on-accent: #ffffff;
  --send-bg: #1f1f1f;
  --on-send: #ffffff;
  --text: #242424;
  --muted: #5d5d5d;
}

.ac-device[data-theme='light'][data-provider='metaai'] {
  --bg: #ffffff;
  --surface: #f0f2f5;
  --border: #dcdfe4;
  
  --accent: #1c73e6;
  --send-bg: linear-gradient(100deg, #1c73e6 0%, #4a63ee 100%);
  --on-accent: #ffffff;
  --text: #1c1e21;
  --muted: #5e6167;
}

.ac-device {
  transition:
    --bg var(--morph) ease,
    --surface var(--morph) ease,
    --border var(--morph) ease,
    --accent var(--morph) ease,
    --on-accent var(--morph) ease,
    --text var(--morph) ease,
    --muted var(--morph) ease,
    --radius var(--morph) ease,
    --glow var(--morph) ease;
}

@media (prefers-reduced-motion: reduce) {
  .ac-device {
    --morph: 0ms;
    --fade: 0ms;
  }
}

/* The provider marks, for everything on the page outside the device. */
.marks-scope {
  --mark-chatgpt: #0d0d0d;
  --mark-claude: #d97757;
  --mark-deepseek: #4d6bfe;
  --mark-gemini: #4285f4;
  --mark-perplexity: #1fb8cd;
  --mark-grok: #0f0f0f;
  --mark-copilot: #0078d4;
  --mark-m365copilot: #0078d4;
  --mark-metaai: #0866ff;
}