/* ============================================================================
   Assistant UI theme — the shared design system for this portfolio's web UIs.
   ============================================================================

   A single stylesheet with no build step and no dependencies, in the same
   spirit as the rest of this project: drop it in, use the tokens, get a
   consistent product surface.

   HOW TO REUSE IT IN ANOTHER PROJECT
     1. copy this file next to your HTML
     2. <link rel="stylesheet" href="theme.css"> BEFORE your own <style>
     3. build with the tokens (var(--accent), var(--s-4), ...) and the
        primitives below (.btn, .field, .card, .chip, .pill, .empty)
     4. to rebrand, override only the --accent-* tokens in your own :root

   WHAT IS IN HERE
     tokens ....... colour (light + dark), space, type, radius, shadow, motion
     base ......... reset, document, typography, focus, scrollbars
     primitives ... button, field, card, chip, pill/status, badge, tabs,
                    empty state, overlay/modal, divider
     a11y ......... visible focus rings, reduced motion, colour-scheme

   THEMING
     Light and dark are both first-class. The OS preference is honoured via
     prefers-color-scheme, and an explicit choice wins through
     :root[data-theme="dark"] / [data-theme="light"], so a toggle can override
     the OS in both directions. Components read tokens only — never hardcode a
     colour in a component rule, or dark mode silently breaks.
   ========================================================================== */

/* ---------------------------------------------------------------- tokens */
:root {
  /* Surfaces and ink. The neutral carries a slight green bias so it sits with
     the teal accent instead of fighting it as a dead grey would. */
  --bg: #f5f7f5;
  --surface: #ffffff;
  --surface-2: #eff2f0;
  --surface-3: #e6ebe8;
  --border: #e1e6e3;
  --border-strong: #ccd5d0;
  --text: #1a211f;
  --text-muted: #63706b;
  --text-faint: #8b9793;

  /* Brand. Rebrand by overriding just these four. */
  --accent: #0e7569;
  --accent-hover: #0a6055;
  --accent-soft: #e2f0ee;
  --accent-ink: #ffffff;

  /* Semantic, kept separate from the accent so state never reads as brand. */
  --ok: #0f7a45;        --ok-soft: #e6f6ed;
  --warn: #9a6413;      --warn-soft: #fdf3e2;
  --danger: #b3261e;    --danger-soft: #fdeceb;
  --info: #35558f;      --info-soft: #eaf0fb;

  /* Deepened variants, hairlines and washes used by the dashboard layer. */
  --accent-deep: #0a5a50;
  --accent-line: #bfdcd7;
  --accent-glow: rgba(14, 117, 105, .10);
  --wash-2: rgba(53, 85, 143, .07);
  --lead-tint: #eef4f2;
  --ok-deep: #0b5f35;      --ok-line: #bfe3cd;
  --warn-deep: #7a4e0c;    --warn-line: #ecd9b4;
  --danger-deep: #8c1c16;  --danger-line: #f0c4c1;
  --info-deep: #26406e;    --info-line: #c4d3ee;

  /* Space: a 4px rhythm. Use these, not arbitrary pixels. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 48px;

  /* Type. Body sits at 14.5px, the density a working tool wants. */
  --font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Cascadia Code", "Cascadia Mono", Consolas, ui-monospace, monospace;
  --fs-xs: 11.5px; --fs-sm: 12.5px; --fs-base: 14.5px;
  --fs-md: 16px;   --fs-lg: 19px;   --fs-xl: 24px;
  --lh-tight: 1.25; --lh: 1.55;

  --r-sm: 6px; --r: 10px; --r-lg: 14px; --r-full: 999px;

  --shadow-1: 0 1px 2px rgba(16, 30, 26, .06);
  --shadow-2: 0 4px 14px rgba(16, 30, 26, .09);
  --shadow-3: 0 18px 50px rgba(16, 30, 26, .20);

  --dur: .16s;
  --ease: cubic-bezier(.2, .6, .3, 1);

  color-scheme: light;
}

/* Dark: the OS preference. Only tokens change — no component rule below is
   duplicated for dark, which is what keeps the two themes honest. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1512;
    --surface: #161d1a;
    --surface-2: #1c2521;
    --surface-3: #24302b;
    --border: #263029;
    --border-strong: #35443c;
    --text: #e6ecea;
    --text-muted: #97a5a0;
    --text-faint: #74827d;

    --accent: #4cb8a6;
    --accent-hover: #64c8b7;
    --accent-soft: rgba(76, 184, 166, .14);
    --accent-ink: #06231e;

    --ok: #4cc07d;        --ok-soft: rgba(76, 192, 125, .14);
    --warn: #d9a441;      --warn-soft: rgba(217, 164, 65, .14);
    --danger: #ef7f78;    --danger-soft: rgba(239, 127, 120, .14);
    --info: #7ba3e8;      --info-soft: rgba(123, 163, 232, .14);
    --accent-deep: #7fd6c6;
    --accent-line: rgba(76, 184, 166, .28);
    --accent-glow: rgba(76, 184, 166, .10);
    --wash-2: rgba(123, 163, 232, .07);
    --lead-tint: #1b2723;
    --ok-deep: #7ad39b;      --ok-line: rgba(76, 192, 125, .28);
    --warn-deep: #e8bf74;    --warn-line: rgba(217, 164, 65, .28);
    --danger-deep: #f5a6a1;  --danger-line: rgba(239, 127, 120, .28);
    --info-deep: #a6c2f0;    --info-line: rgba(123, 163, 232, .28);

    --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
    --shadow-2: 0 4px 14px rgba(0, 0, 0, .38);
    --shadow-3: 0 18px 50px rgba(0, 0, 0, .55);

    color-scheme: dark;
  }
}

/* An explicit choice beats the OS, in both directions. */
:root[data-theme="dark"] {
  --bg: #0f1512;
  --surface: #161d1a;
  --surface-2: #1c2521;
  --surface-3: #24302b;
  --border: #263029;
  --border-strong: #35443c;
  --text: #e6ecea;
  --text-muted: #97a5a0;
  --text-faint: #74827d;
  --accent: #4cb8a6;
  --accent-hover: #64c8b7;
  --accent-soft: rgba(76, 184, 166, .14);
  --accent-ink: #06231e;
  --ok: #4cc07d;        --ok-soft: rgba(76, 192, 125, .14);
  --warn: #d9a441;      --warn-soft: rgba(217, 164, 65, .14);
  --danger: #ef7f78;    --danger-soft: rgba(239, 127, 120, .14);
  --info: #7ba3e8;      --info-soft: rgba(123, 163, 232, .14);
  --accent-deep: #7fd6c6;
  --accent-line: rgba(76, 184, 166, .28);
  --accent-glow: rgba(76, 184, 166, .10);
  --wash-2: rgba(123, 163, 232, .07);
  --lead-tint: #1b2723;
  --ok-deep: #7ad39b;    --ok-line: rgba(76, 192, 125, .28);
  --warn-deep: #e8bf74;  --warn-line: rgba(217, 164, 65, .28);
  --danger-deep: #f5a6a1;  --danger-line: rgba(239, 127, 120, .28);
  --info-deep: #a6c2f0;  --info-line: rgba(123, 163, 232, .28);
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, .38);
  --shadow-3: 0 18px 50px rgba(0, 0, 0, .55);
  color-scheme: dark;
}

/* ------------------------------------------------------------------ base */
* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh);
  background: var(--bg);
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { line-height: var(--lh-tight); margin: 0; text-wrap: balance; }
p { margin: 0 0 var(--s-3); }
a { color: var(--accent); text-underline-offset: 2px; }
code, kbd, pre { font-family: var(--mono); }
hr, .divider { border: 0; border-top: 1px solid var(--border); margin: var(--s-4) 0; }

/* One focus treatment everywhere, and only for keyboard users. */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* Scrollbars that belong to the theme rather than the OS. */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: var(--border-strong); border-radius: var(--r-full);
  border: 3px solid transparent; background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background: var(--text-faint); background-clip: content-box; }

/* ------------------------------------------------------------ primitives */

/* Buttons. `.btn` is the base; the app's bare <button> inherits it too so
   existing markup keeps working without a class. */
button, .btn {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 7px 12px;
  cursor: pointer;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease);
}
button:hover, .btn:hover { border-color: var(--accent); color: var(--accent); }
button:active, .btn:active { transform: translateY(.5px); }
button:disabled, .btn:disabled { opacity: .55; cursor: not-allowed; }
button:disabled:hover, .btn:disabled:hover { border-color: var(--border); color: var(--text); }

button.primary, .btn-primary {
  background: var(--accent); border-color: var(--accent); color: var(--accent-ink);
  font-weight: 600;
}
button.primary:hover, .btn-primary:hover {
  background: var(--accent-hover); border-color: var(--accent-hover); color: var(--accent-ink);
}
button.ghost, .btn-ghost { background: transparent; border-color: transparent; color: var(--text-muted); }
button.ghost:hover, .btn-ghost:hover { background: var(--surface-2); color: var(--text); }
button.danger:hover, .btn-danger:hover { border-color: var(--danger); color: var(--danger); }

/* Form fields */
select, input[type=text], input[type=password], input[type=search], textarea, .field {
  font: inherit;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
select:hover, input:hover, textarea:hover { border-color: var(--border-strong); }
select:focus, input:focus, textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
::placeholder { color: var(--text-faint); }
label { display: block; font-size: var(--fs-sm); color: var(--text-muted); }

/* Card */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  box-shadow: var(--shadow-1);
}

/* Badge: quiet metadata */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-sm); color: var(--text-muted);
  background: var(--surface-2); border: 1px solid var(--border);
  padding: 3px 9px; border-radius: var(--r-full); white-space: nowrap;
}

/* Chip: a suggestion the user can click */
.chip {
  font-size: var(--fs-sm); color: var(--text-muted);
  background: var(--surface); border: 1px solid var(--border);
  padding: 6px 11px; border-radius: var(--r-full); cursor: pointer;
}
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }

/* Status pill. Semantic colour, never the brand accent. */
.pill, .status-chip {
  display: inline-block; font-size: var(--fs-xs); font-weight: 600;
  padding: 2px 9px; border-radius: var(--r-full);
  background: var(--surface-2); color: var(--text-muted);
}
.pill-info,    .status-chip.suggested { background: var(--info-soft);   color: var(--info); }
.pill-warn,    .status-chip.drafted   { background: var(--warn-soft);   color: var(--warn); }
.pill-warn-2,  .status-chip.revised   { background: var(--warn-soft);   color: var(--warn); }
.pill-ok,      .status-chip.approved,
.status-chip.published,
.status-chip.scheduled                { background: var(--ok-soft);     color: var(--ok); }
.pill-muted,   .status-chip.abandoned { background: var(--surface-3);   color: var(--text); }   /* faint was 2.5:1 */
.pill-danger                          { background: var(--danger-soft); color: var(--danger); }

/* Tabs */
.tabs { display: flex; border-bottom: 1px solid var(--border); }
.tabs button {
  flex: 1; border: 0; border-radius: 0; background: none;
  padding: 11px var(--s-1); color: var(--text-muted);
  border-bottom: 2px solid transparent; font-size: 13px;
}
.tabs button:hover { color: var(--text); background: var(--surface-2); }
.tabs button.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }

/* Empty state. Written as a ::before so it can be attached to a container the
   app clears with innerHTML = "" without any JS coordination. */
.empty, [data-empty]:empty::before {
  display: block;
  content: attr(data-empty);
  white-space: pre-line;
  color: var(--text-faint);
  font-size: var(--fs-sm);
  text-align: center;
  padding: var(--s-7) var(--s-4);
  line-height: 1.7;
}

/* Overlay / modal */
.overlay {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12, 20, 17, .5);
  backdrop-filter: blur(2px);
  animation: overlay-in var(--dur) var(--ease);
}
.overlay .card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s-7); width: 430px; max-width: calc(100vw - 32px);
  box-shadow: var(--shadow-3);
  animation: modal-in .22s var(--ease);
}
@keyframes overlay-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(8px) scale(.985); } }

.hidden { display: none !important; }

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