/*
 * TAG — the theme for TAG Staff (Paperclip).
 *
 * Paperclip's UI is Tailwind v4 over a shadcn token set: every colour on the
 * page resolves through a CSS custom property on `:root` (light) or `.dark`.
 * That is the seam, and it is the whole mechanism — this file is a second
 * stylesheet, loaded after theirs, that redefines those properties. No
 * application code, no configuration, no patch to their source.
 * ./README.md is the search for a supported theming API, what was found, and
 * why this is where it landed.
 *
 * Upstream's palette is a pure greyscale — `oklch(20.5% 0 0)` for `--primary`,
 * neutral greys for everything else — with one stray blue in the dark rail.
 * So almost every value below is a colour where there was none, rather than
 * one brand colour swapped for another.
 *
 * Values come from tag-mvp-ux — src/lib/theme/presets/sovereign-light.ts and
 * src/app/globals.css — by way of ../../trueforge/theme/tag-theme.css, so
 * /chat and /staff are the same TAG rather than two readings of it. Where a
 * TAG value could not carry text at 4.5:1 it is darkened along its own hue and
 * the reason is written next to it; check-contrast.py re-reads every one of
 * these pairs out of this file in CI.
 *
 * NO `!important` AND NONE IS NEEDED. TrueForge's tokens arrive as inline
 * styles, which is why its theme shouts; Paperclip's are ordinary declarations
 * in a stylesheet this one is loaded after, and `:root` beats `:root` on
 * source order alone. apply-theme.mjs asserts the load order it depends on.
 */

/* ------------------------------------------------------------------ light */

:root {
  --background: #FFFFFF;                  /* bgBase */
  --foreground: #1F2328;                  /* textPrimary */
  --card: #FFFFFF;
  --card-foreground: #1F2328;
  --popover: #FFFFFF;
  --popover-foreground: #1F2328;

  /* TAG teal #2D8F83 carries white at only 3.9:1, so anything that is a
     surface for text takes the brand's own darker teal (sovereign-light's
     primaryHover) at 5.7:1. The lighter teal stays where no text sits on it:
     the focus ring and the mark. */
  --primary: #247268;
  --primary-foreground: #FFFFFF;

  --secondary: #F0F2F5;                   /* bgHover */
  --secondary-foreground: #1F2328;
  --muted: #F6F8FA;                       /* bgSurface */
  --muted-foreground: #57606A;            /* 6.4:1 on white. textMuted #8C959F is 3.0:1 — a border, never text */
  --accent: #E6F1EF;                      /* a teal tint, for hover and selection */
  --accent-foreground: #1F2328;

  /* Upstream sets --destructive-foreground to the SAME value as --destructive,
     in both modes, so its own "text on a destructive fill" is invisible. Left
     alone this theme would inherit that; check-contrast.py asserts the pair. */
  --destructive: #B01D27;                 /* unmet #CF222E, darkened to carry white */
  --destructive-foreground: #FFFFFF;

  --border: #D0D7DE;
  /* A text field's edge is a UI component boundary: 3:1, not the 1.5:1 the
     brand's --border grey manages on white. This is sovereign-light's
     textMuted, the darkest grey TAG has that is still a grey. */
  --input: #8C959F;
  --ring: #2D8F83;                        /* 3.9:1 against both surfaces — a ring, not text */

  --scrollbar-thumb: #AFB8C1;             /* borderStrong */
  --scrollbar-thumb-hover: #8C959F;

  /* The rail. A DARK brand rail in light mode was tried and pulled back:
     /chat has one, and it is the surface where a product says whose it is —
     but Paperclip's shell is behind completed onboarding, which wants a model
     credential, so nothing in this work could put the rail on a screen and
     look at it. Inverting a surface nobody can see is how you ship ink the
     same colour as its background. So the rail stays the same polarity as the
     page and takes TAG's own surface greys; ./README.md § What is not
     verified says what somebody with an onboarded instance should try next. */
  --sidebar: #F6F8FA;                     /* bgSurface, as --muted */
  --sidebar-foreground: #1F2328;
  --sidebar-accent: #E6F1EF;              /* the same teal tint as --accent, so a hovered row matches the page */
  --sidebar-accent-foreground: #1F2328;
  --sidebar-border: #D0D7DE;

  /* Charts. Upstream's five are a greyscale ramp, which is unreadable as a
     series. Teal through coral: TAG's two brand hues, ordered so the first two
     are distinguishable in greyscale as well.

     These are read by NAME from the application — `cssVar:"--chart-1"` — and
     never through var() in the stylesheet, which is why apply-theme.mjs looks
     for a token in both places before it will believe anything reads it. */
  --chart-1: #247268;
  --chart-2: #3BA396;
  --chart-3: #0C6476;
  --chart-4: #DC785D;                     /* TAG coral #E07A5F is 2.95:1 on white — just under what a mark needs. 2% darker, same hue */
  --chart-5: #8C959F;
}

/* ------------------------------------------------------------------- dark */
/* Not an afterthought: tag.company is dark, and this is a page somebody has
   open all day. Values are globals.css's :root — TAG's own dark. */

.dark {
  --background: #0D1117;                  /* bgBase */
  --foreground: #E6EDF3;
  --card: #161B22;                        /* bgSurface — separates from the page, unlike upstream's identical pair */
  --card-foreground: #E6EDF3;
  --popover: #161B22;
  --popover-foreground: #E6EDF3;

  /* Inverted on purpose: a bright teal with a dark label reads better on
     #0D1117 than white on teal, which is 3.9:1 either way round. */
  --primary: #3BA396;                     /* globals.css primaryHover */
  --primary-foreground: #04211E;

  --secondary: #21262D;                   /* bgHover */
  --secondary-foreground: #E6EDF3;
  --muted: #21262D;
  --muted-foreground: #8B949E;            /* 6.2:1 on bgBase */
  --accent: #1C3B37;
  --accent-foreground: #E6EDF3;

  --destructive: #F85149;
  --destructive-foreground: #2B0705;

  --border: #30363D;
  --input: #6E7681;                       /* globals.css textMuted */
  --ring: #3BA396;

  --scrollbar-thumb: #484F58;
  --scrollbar-thumb-hover: #6E7681;

  --sidebar: #161B22;
  --sidebar-foreground: #E6EDF3;
  --sidebar-accent: #1C3B37;
  --sidebar-accent-foreground: #E6EDF3;
  --sidebar-border: #30363D;

  /* Dark-only tokens upstream declares here and nowhere else: the detail panel
     and the agent bubble. Left at upstream's values they would be the old
     neutral greys against these surfaces. */
  --side-panel-bg: #0D1117;
  --side-panel-fg: #E6EDF3;
  --streamlined-task-detail-bg: #0D1117;
  --bubble-agent: #161B22;

  --chart-1: #3BA396;
  --chart-2: #2D8F83;
  --chart-3: #6FD3C6;
  --chart-4: #E07A5F;
  --chart-5: #8B949E;
}