/* GENERATED — do not edit. Source: packages/ui/tokens.css. Run `npm run sync:ui`. */
/* ──────────────────────────────────────────────────────────────────────────
   TEAMABLE — design tokens. ONE source of truth.

   Canonical file: packages/ui/tokens.css
   Copies are written into each app's asset directory by `npm run sync:ui`
   (scripts/sync-ui.mjs) because the three apps deploy to three separate
   origins — a cross-origin @import would cost a round trip before first
   paint. `npm run check` fails if a copy has drifted. Edit only this file.

   The look: Replit-shaped IDE chrome. Monospace default, flat surfaces,
   hairline borders, 4px radii, a single terminal-green accent. Blue, amber
   and red keep their syntax meanings and are never decorative.

   Dark is the default. If the OS prefers light and the user has not chosen,
   the light set applies. data-theme="dark"|"light" always wins, and the
   choice is remembered in localStorage under `teamable-theme`.
   ────────────────────────────────────────────────────────────────────────── */
:root{
  color-scheme:dark;
  --ac:#3fbf74;          /* terminal green — prompts, primary, cursor */
  --ac-dim:#2b7f51;
  --ac-wash:rgba(63,191,116,.14);
  --blue:#4c8fff;        /* links, info */
  --blue-dim:#2d4d80;
  --amber:#d99e35;       /* warnings, counts */
  --amber-dim:#6b5320;
  --red:#e0574a;
  --violet:#9a7fff;      /* secondary syntax */

  --bg:#0b0d10;          /* app chrome: title bar, rail, status */
  --bg-2:#0f1216;        /* panel body */
  --term:#08090c;        /* terminal well — deepest surface */
  --surface:#13171c;     /* cards, rows */
  --surface-2:#1a1f26;   /* hover, inputs */
  --line:#23292f;
  --line-soft:#1a1f25;
  --text:#dfe4ea;
  --text-2:#96a0ab;
  --text-3:#7d8894;
  --on-ac:#06170e;       /* text on a filled accent */
  --shadow:0 8px 26px -10px rgba(0,0,0,.8);

  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --sans:Inter,-apple-system,"Segoe UI",system-ui,sans-serif;
  --r:4px;
}

/* light values, shared by the OS preference and the explicit opt-in */
:root[data-theme="light"],
:root[data-theme="auto"]{ color-scheme:light; }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){
    color-scheme:light;
    --ac:#12844c; --ac-dim:#8fd4b0; --ac-wash:rgba(18,132,76,.12);
    --blue:#2361cc; --blue-dim:#a9c4ef;
    --amber:#9a6a11; --amber-dim:#e3cb93;
    --red:#c23b2e; --violet:#6a4ddb;

    --bg:#eceef1; --bg-2:#ffffff; --term:#eef1f5;
    --surface:#ffffff; --surface-2:#eef0f3;
    --line:#d3d7dd; --line-soft:#e4e7eb;
    --text:#10141a; --text-2:#4a525d; --text-3:#5f6873;
    --on-ac:#ffffff;
    --shadow:0 8px 26px -12px rgba(16,20,26,.28);
  }
}
:root[data-theme="light"]{
  --ac:#12844c; --ac-dim:#8fd4b0; --ac-wash:rgba(18,132,76,.12);
  --blue:#2361cc; --blue-dim:#a9c4ef;
  --amber:#9a6a11; --amber-dim:#e3cb93;
  --red:#c23b2e; --violet:#6a4ddb;

  --bg:#eceef1; --bg-2:#ffffff; --term:#eef1f5;
  --surface:#ffffff; --surface-2:#eef0f3;
  --line:#d3d7dd; --line-soft:#e4e7eb;
  --text:#10141a; --text-2:#4a525d; --text-3:#5f6873;
  --on-ac:#ffffff;
  --shadow:0 8px 26px -12px rgba(16,20,26,.28);
}

/* ── names the three app stylesheets already use ───────────────────────────
   Aliases, so component CSS written against the old clay system keeps
   working without an edit. Nothing below introduces a new colour: each one
   resolves to a token above, and therefore re-resolves per theme. */
:root{
  --ac-quiet:var(--ac-wash);
  --ac-line:var(--ac-dim);

  --ok:var(--ac);        /* success reads as the accent, like a passing test */
  --warn:var(--amber);
  --info:var(--blue);
  --bad:var(--red);
  --cyan:var(--blue);
  --lime:var(--ac);
  --rose:var(--red);
  --kiss-1:var(--ac);
  --kiss-2:var(--ac-dim);
  --kiss-3:var(--text-3);
  --grad:var(--ac);      /* a flat fill, not a gradient — kept for its name */

  /* small radii only: 4px everywhere, 6px for the command palette */
  --r-sm:3px;
  --r-lg:4px;
  --r-xl:6px;
  --r-pal:6px;
}

/* one extra surface step, the primary-hover shade, and the modal scrim.
   The scrim stays dark in both themes — it is shade over the page, and a
   pale one would not read as "the thing behind is out of reach". */
:root{ --surface-3:#222831; --ac-hover:#55cd8a; --scrim:rgba(5,7,9,.62); }
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]){ --surface-3:#e2e6ea; --ac-hover:#0d6b3d; --scrim:rgba(16,20,26,.42); }
}
:root[data-theme="light"]{ --surface-3:#e2e6ea; --ac-hover:#0d6b3d; --scrim:rgba(16,20,26,.42); }

/* ── media ─────────────────────────────────────────────────────────────────
   A render canvas is dark in both themes — a 3D scene lit for a white page
   is not a thing. So the canvas surface, the veil over it and the text that
   sits on top do NOT follow the theme, and are the same in both. Keeping
   them here rather than as literals in a component is what makes that a
   decision instead of an oversight. */
:root{
  --media:#0c0c0e;                     /* the canvas itself */
  --media-2:rgba(255,255,255,.07);     /* a control resting on it */
  --media-3:rgba(255,255,255,.14);     /* the same control, hovered */
  --media-line:rgba(255,255,255,.1);
  --media-veil:rgba(8,10,12,.82);      /* flat, never a gradient */
  --on-media:#e8e8ea;
  --on-media-2:#d0d2d6;
  --on-media-3:#9a9aa2;
}

/* ── the theme control ─────────────────────────────────────────────────────
   The word on the control is the mode the user chose (auto / light / dark)
   and only JS knows that. The icon is which mode RESOLVED, and that is a
   media query — so it is drawn here rather than in script. A control whose
   icon depended on JS hearing a `prefers-color-scheme` change event would
   sit there showing the wrong sun the moment that event was missed. */
[data-theme-toggle] .theme-ico::before{ content:"\263E"; }  /* moon */
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) [data-theme-toggle] .theme-ico::before{ content:"\2600"; }  /* sun */
}
:root[data-theme="light"] [data-theme-toggle] .theme-ico::before{ content:"\2600"; }
:root[data-theme="dark"] [data-theme-toggle] .theme-ico::before{ content:"\263E"; }

::selection{ background:var(--ac-wash); }