/* ScoutLogic Sidekick design tokens. Source: ScoutLogic Design System. */
/* Values only, no @import: the Chrome extension imports this file and bundles Outfit itself.
   The web app loads Outfit in layouts/_head. */
:root {
  --sl-vermillion: #F73000; /* accent: logo, strokes, callouts, primary buttons. Never a large surface. */
  --sl-pitch: #000000;
  --sl-lavender: #E6E0F0;   /* default page background */
  --sl-white: #FFFFFF;
  --sl-smoke: #F2F4F6;
  --sl-salt: #FCE3E5;       /* error background */
  --sl-pistachio: #B3F9BA;  /* success background */
  --sl-pine: #003427;       /* success/info text */
  --sl-sky: #C3ECFB;        /* info background */
  --sl-mango: #FFB91B;      /* Sidekick icon tile, insert chip, warning */
  --sk-lavender-shade: #C9C1D8;
  --sk-muted: #555555;      /* secondary text and uppercase labels on white */
  --sk-ink-soft: #333333;   /* body copy inside cards */
  --font-sans: "Outfit", system-ui, sans-serif; /* weights 400/500/600/700 only */
  --radius-card: 25px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --stroke: 2px solid var(--sl-pitch);
  --stroke-subtle: 1.5px solid rgba(0,0,0,.12);
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  /* Roles: what the web UI and the side panel paint with. These, and only these, change in dark mode.
     The brand values above never do, because the in-page launcher reads them and must stay light to
     sit on TazWorks, a light page, whatever the OS says. */
  --ui-page: var(--sl-lavender);
  --ui-surface: var(--sl-white);
  --ui-subtle: var(--sl-smoke);
  --ui-ink: var(--sl-pitch);
  --ui-ink-soft: var(--sk-ink-soft);
  --ui-muted: var(--sk-muted);
  --ui-border: var(--sl-pitch);
  --ui-rule: rgb(0 0 0 / .12);
  --ui-danger: var(--sl-salt);
  --ui-success: var(--sl-pistachio);
  --ui-success-ink: var(--sl-pine);
  --ui-stroke: 2px solid var(--ui-border);
  --ui-stroke-subtle: 1.5px solid var(--ui-rule);
}

/* Follows the OS setting; there is no in-app toggle. Outlines turn lavender so the brand's outlined look
   survives on a dark page. Mango and vermillion keep their values: text on them is always pitch or white. */
@media (prefers-color-scheme: dark) {
  :root {
    --ui-page: #16131C;
    --ui-surface: #221E2A;
    --ui-subtle: #2E2938;
    --ui-ink: #F4F1F8;
    --ui-ink-soft: #D6D0E0;
    --ui-muted: #A9A2B6;
    --ui-border: var(--sl-lavender);
    --ui-rule: rgb(255 255 255 / .14);
    --ui-danger: #4B1D23;
    --ui-success: #173B2A;
    --ui-success-ink: var(--sl-pistachio);
  }
}

/* In Tailwind's base layer so utilities (text-lavender on a link) can override them. Unlayered, they would win.
   color-scheme is on html, not :root, so it never reaches the launcher's shadow root. */
@layer base {
  html { color-scheme: light dark; }
  body { margin: 0; background: var(--ui-page); color: var(--ui-ink); font-family: var(--font-sans); }
  a { color: var(--sl-vermillion); }
  a:hover { opacity: .7; }
  :focus-visible { outline: 2px solid var(--sl-vermillion); outline-offset: 2px; }
}