/* ── csa-tokens.css — rev_1159 ───────────────────────────────────────────────
   THE design-token layer. Every visual constant in Cassandra resolves here.
   Loaded BEFORE cassandra-theme.css on every page, so themes can override any
   token by redeclaring it under their [data-theme] selector.

   WHY this file exists
   ───────────────────
   Before rev_1159 the palette lived only in cassandra-theme.css and the
   non-colour constants (font sizes, spacing, radii, shadows) lived nowhere —
   they were typed inline, per app, hundreds of times. The People-app rebuild
   (rev_1161) is the first consumer of a real token system; this file is that
   system. Nothing here changes how anything looks at rev_1159: the colour
   values are copied verbatim from the existing dark-minimal theme, and the
   type/space/radius scales simply NAME the values already in use.

   NAMING LAW
   ──────────
   - Colour   : --csa-*          (existing names kept; new semantic aliases added)
   - Type     : --csa-f-*        (font size), --csa-lh-*  (line height)
   - Space    : --csa-s-*        (4px multiples)
   - Radius   : --csa-r-*
   - Elevation: --csa-shadow-*
   - Z-layers : --csa-z-*        (already existed since rev_937 — kept as-is)

   NEVER hardcode a hex, a px font-size, or a px gap in app CSS again. If a
   value isn't here, add it here first.

   ACCENT NOTE (Vincent, 2026-07-24)
   ─────────────────────────────────
   Cassandra's accent is green (#1d9e75). The design mocks used a warm orange.
   Switching the platform accent is a deliberate call, not a side effect of the
   token refactor — so rev_1159 keeps green. To try orange later, change ONLY
   the four --csa-accent* lines under each theme; everything downstream follows.
   ────────────────────────────────────────────────────────────────────────── */

:root {

  /* ═══ TYPOGRAPHY ═════════════════════════════════════════════════════════
     A 7-step scale. Ratio ~1.2. Chosen to match what the apps already use, so
     naming them changes nothing visually.
       xs  10.5 — micro-labels, uppercase section keys, chip text
       sm  12   — secondary text, table cells, hints
       md  13   — DEFAULT body size across Cassandra
       lg  15   — card titles, emphasised rows
       xl  18   — panel titles, brand wordmark
       2xl 22   — page titles inside an app
       3xl 28   — hero / launcher headings                                    */
  --csa-f-2xs:  9.5px;    /* rev_1164: badge/counter text — the 9-10px band the
                             apps were already using in a dozen variants */
  --csa-f-xs:   10.5px;
  --csa-f-sm:   12px;
  --csa-f-md:   13px;
  --csa-f-lg:   15px;
  --csa-f-xl:   18px;
  --csa-f-2xl:  22px;
  --csa-f-3xl:  28px;

  /* Line heights. tight for headings, normal for UI, loose for prose blocks. */
  --csa-lh-tight:  1.25;
  --csa-lh-normal: 1.5;
  --csa-lh-loose:  1.7;

  /* Weights — only three are ever needed. */
  --csa-fw-normal: 400;
  --csa-fw-medium: 500;
  --csa-fw-bold:   600;

  /* Letter-spacing for the uppercase micro-label pattern used everywhere. */
  --csa-ls-label: .06em;
  --csa-ls-wide:  .08em;

  /* Monospace stack for code / IDs / storage paths. */
  --csa-font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;


  /* ═══ SPACING ════════════════════════════════════════════════════════════
     4px multiples. Use these for padding, gap, margin — never raw px.        */
  --csa-s-1:  4px;
  --csa-s-2:  8px;
  --csa-s-3:  12px;
  --csa-s-4:  16px;
  --csa-s-5:  20px;
  --csa-s-6:  24px;
  --csa-s-8:  32px;
  --csa-s-10: 40px;
  --csa-s-12: 48px;

  /* Page gutters — the horizontal inset an app's content keeps from the edge. */
  --csa-gutter:       24px;
  --csa-gutter-tight: 16px;


  /* ═══ RADIUS ═════════════════════════════════════════════════════════════ */
  --csa-r-xs:   4px;    /* rev_1164: tight chips, inline code, mini-badges     */
  --csa-r-sm:   6px;    /* inputs, chips, small buttons                       */
  --csa-r-md:   8px;    /* cards, buttons, panels — the default              */
  --csa-r-lg:   12px;   /* modals, large containers                          */
  --csa-r-xl:   16px;   /* hero surfaces                                     */
  --csa-r-full: 9999px; /* pills, avatars                                    */


  /* ═══ ELEVATION ══════════════════════════════════════════════════════════
     Three tiers only. 1 = resting card, 2 = hover/dropdown, 3 = modal.       */
  --csa-shadow-1: 0 1px 2px rgba(0,0,0,.30);
  --csa-shadow-2: 0 4px 12px rgba(0,0,0,.40);
  --csa-shadow-3: 0 12px 32px rgba(0,0,0,.50);


  /* ═══ MOTION ═════════════════════════════════════════════════════════════ */
  --csa-t-fast:   .12s;
  --csa-t-normal: .2s;
  --csa-t-slow:   .35s;
  --csa-ease:     cubic-bezier(.4, 0, .2, 1);


  /* ═══ Z-LAYERS — one addition ════════════════════════════════════════════
     rev_937 defined raise / sticky / overlay / toast in cassandra-theme.css.
     planner.css referenced a fifth, --csa-z-pop, that was never declared — it
     only worked because of an inline `,60` fallback. Defining it properly so
     the phantom stops being load-bearing. Sits between raise (dropdowns inside
     content) and sticky (toolbars): a popover that must clear sibling content
     but never the topbar. */
  --csa-z-pop: 60;

  /* ═══ LAYOUT CONSTANTS ═══════════════════════════════════════════════════ */
  /* Measured from topbar.js, not invented — 64px desktop, collapsing to 52px
     at phone width (rev_1160). */
  --csa-topbar-h:        64px;
  --csa-topbar-h-mobile: 52px;
  --csa-content-max:   1400px; /* max readable width for centred app content  */
  --csa-modal-max:     1200px; /* wide detail overlays (People, Artworks)     */
  --csa-modal-max-sm:  620px;  /* confirmations, small forms                  */

  /* Responsive breakpoint the apps agree on. Mobile below this. */
  --csa-bp-mobile: 760px;


  /* ═══ SEMANTIC COLOUR ALIASES ════════════════════════════════════════════
     The existing --csa-bg / --csa-bg2 / --csa-bg3 names describe DEPTH, not
     PURPOSE. These aliases give the same values a purpose-name so new code
     reads better. Both sets stay valid — no migration needed.

       surface-0 = page background        (was --csa-bg)
       surface-1 = resting card          (was --csa-bg2 / --csa-card)
       surface-2 = nested card, chip bg  (was --csa-bg3)
       line      = default hairline      (was --csa-border)
       line-2    = emphasised hairline   (was --csa-border2)

     Defined per theme below so they follow the theme, not this block.        */
}


/* ═══ DARK-MINIMAL — semantic aliases ══════════════════════════════════════
   Values copied verbatim from cassandra-theme.css dark-minimal. Zero change. */
:root,
[data-theme="dark-minimal"] {
  --csa-surface-0: #111111;
  --csa-surface-1: #1c1c1c;
  --csa-surface-2: #262626;
  --csa-surface-3: #303030;   /* NEW tier — a third nesting level for the
                                 People-app overlay (card inside card inside
                                 modal). Sits between bg3 and border. */
  --csa-line:      #2e2e2e;
  --csa-line-2:    #3a3a3a;

  /* Status backgrounds as solid tints (the *-soft tokens are rgba overlays;
     these are opaque, for use on top of surface-1 where alpha would muddy). */
  --csa-ok-bg:     #0f2a1a;
  --csa-warn-bg:   #2a2414;
  --csa-info-bg:   #14202e;
  /* --csa-danger-bg + --csa-accent-bg already exist in the theme file. */
}

/* ═══ LIGHT-MINIMAL — semantic aliases ═════════════════════════════════════ */
[data-theme="light-minimal"] {
  --csa-surface-0: #f2f2f0;
  --csa-surface-1: #ffffff;
  --csa-surface-2: #e8e8e6;
  --csa-surface-3: #dededa;
  --csa-line:      #d4d4d2;
  --csa-line-2:    #c0c0be;

  --csa-ok-bg:     #e3f5ec;
  --csa-warn-bg:   #fbf2dc;
  --csa-info-bg:   #e6effb;

  /* Light theme needs softer shadows — dark shadows read as dirt on white. */
  --csa-shadow-1: 0 1px 2px rgba(0,0,0,.08);
  --csa-shadow-2: 0 4px 12px rgba(0,0,0,.12);
  --csa-shadow-3: 0 12px 32px rgba(0,0,0,.18);
}


/* ═══ PRIMITIVE UTILITY CLASSES ════════════════════════════════════════════
   A deliberately SMALL set — six primitives that cover most new UI. Apps keep
   their own component CSS; these exist so a new panel doesn't need 40 lines of
   bespoke styling to look like Cassandra.

   All are prefixed .csa- and are safe to adopt incrementally. Nothing existing
   uses these class names (verified by grep at rev_1159), so adding them
   changes nothing until a template opts in.                                  */

/* ── Button ───────────────────────────────────────────────────────────────── */
.csa-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--csa-s-2);
  background:transparent;
  border:1px solid var(--csa-line);
  color:var(--csa-text);
  border-radius:var(--csa-r-md);
  padding:8px 14px;
  font:inherit; font-size:var(--csa-f-md);
  cursor:pointer;
  transition:background var(--csa-t-fast) var(--csa-ease),
             border-color var(--csa-t-fast) var(--csa-ease),
             color var(--csa-t-fast) var(--csa-ease);
}
.csa-btn:hover{ background:var(--csa-hover); border-color:var(--csa-line-2); }
.csa-btn:focus-visible{ outline:2px solid var(--csa-accent); outline-offset:2px; }
.csa-btn:disabled{ opacity:.45; cursor:default; }
.csa-btn:disabled:hover{ background:transparent; border-color:var(--csa-line); }

/* Primary. Three selectors because admin.html already ships two legacy
   spellings in markup (.csa-btn-primary and .csa-btn.primary) — aliasing them
   here means those buttons finally render correctly instead of falling through
   to the browser default. See the rev_1159 note at the bottom of this file. */
.csa-btn--primary,
.csa-btn-primary,
.csa-btn.primary{
  background:var(--csa-accent); border-color:var(--csa-accent);
  color:var(--csa-on-accent); font-weight:var(--csa-fw-bold);
}
.csa-btn--primary:hover,
.csa-btn-primary:hover,
.csa-btn.primary:hover{ background:var(--csa-accent-hover); border-color:var(--csa-accent-hover); }

.csa-btn--ghost{ border-color:transparent; color:var(--csa-muted); }
.csa-btn--ghost:hover{ color:var(--csa-text); background:var(--csa-hover); border-color:transparent; }

.csa-btn--danger{ color:var(--csa-danger-text); border-color:var(--csa-danger); }
.csa-btn--danger:hover{ background:var(--csa-danger); color:#fff; border-color:var(--csa-danger); }

.csa-btn--sm{ padding:4px 10px; font-size:var(--csa-f-sm); }
.csa-btn--block{ width:100%; }

/* ── Pill / chip ──────────────────────────────────────────────────────────── */
.csa-pill{
  display:inline-flex; align-items:center; gap:var(--csa-s-1);
  padding:3px 10px;
  border-radius:var(--csa-r-full);
  background:var(--csa-surface-2);
  border:1px solid var(--csa-line);
  font-size:var(--csa-f-xs);
  color:var(--csa-text);
  white-space:nowrap;
}
.csa-pill--accent{ background:var(--csa-accent-bg); color:var(--csa-accent-text); border-color:var(--csa-accent); }
.csa-pill--ok    { background:var(--csa-ok-bg);     color:var(--csa-success);      border-color:var(--csa-success); }
.csa-pill--warn  { background:var(--csa-warn-bg);   color:var(--csa-warning-text); border-color:var(--csa-warning); }
.csa-pill--info  { background:var(--csa-info-bg);   color:var(--csa-info);         border-color:var(--csa-info); }
.csa-pill--danger{ background:var(--csa-danger-bg); color:var(--csa-danger-text);  border-color:var(--csa-danger); }
.csa-pill--muted { color:var(--csa-muted); }

/* ── Card ─────────────────────────────────────────────────────────────────── */
.csa-card{
  background:var(--csa-surface-1);
  border:1px solid var(--csa-line);
  border-radius:var(--csa-r-md);
  padding:var(--csa-s-4);
}
.csa-card--nested{ background:var(--csa-surface-2); }
.csa-card--hover:hover{ border-color:var(--csa-line-2); box-shadow:var(--csa-shadow-1); }
.csa-card--interactive{ cursor:pointer; }
.csa-card--interactive:hover{ border-color:var(--csa-accent); }

.csa-card__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--csa-s-2);
  margin-bottom:var(--csa-s-3);
}
.csa-card__title{
  font-size:var(--csa-f-xs);
  text-transform:uppercase;
  letter-spacing:var(--csa-ls-label);
  color:var(--csa-muted);
  font-weight:var(--csa-fw-bold);
  margin:0;
}

/* ── Tabs ─────────────────────────────────────────────────────────────────── */
.csa-tabs{
  display:flex; gap:2px; flex-wrap:wrap;
  border-bottom:1px solid var(--csa-line);
}
.csa-tab{
  background:transparent; border:none;
  padding:10px 14px;
  font:inherit; font-size:var(--csa-f-md);
  color:var(--csa-muted);
  cursor:pointer;
  border-bottom:2px solid transparent;
  display:inline-flex; align-items:center; gap:var(--csa-s-1);
  transition:color var(--csa-t-fast) var(--csa-ease);
}
.csa-tab:hover{ color:var(--csa-text); }
.csa-tab.is-on{ color:var(--csa-accent-text); border-bottom-color:var(--csa-accent); }
.csa-tab__count{
  font-size:var(--csa-f-xs);
  padding:1px 7px;
  background:var(--csa-surface-2);
  border-radius:var(--csa-r-full);
  color:var(--csa-muted);
}
.csa-tab.is-on .csa-tab__count{ background:var(--csa-accent-bg); color:var(--csa-accent-text); }

/* ── Field (label + value, read mode) ─────────────────────────────────────── */
.csa-fld{ display:flex; flex-direction:column; gap:2px; padding:var(--csa-s-1) 0; }
.csa-fld__key{
  font-size:var(--csa-f-xs);
  text-transform:uppercase;
  letter-spacing:var(--csa-ls-label);
  color:var(--csa-muted);
}
.csa-fld__val{ font-size:var(--csa-f-md); color:var(--csa-text); }
.csa-fld__val--muted{ color:var(--csa-muted); font-style:italic; }
.csa-fld__val a{ color:var(--csa-accent-text); text-decoration:none; }
.csa-fld__val a:hover{ text-decoration:underline; }
.csa-fld-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:var(--csa-s-2) var(--csa-s-5);
}

/* ── Section header inside a panel ────────────────────────────────────────── */
.csa-sec{ margin-bottom:var(--csa-s-5); }
.csa-sec__head{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--csa-s-2);
  margin-bottom:var(--csa-s-2);
}
.csa-sec__title{
  margin:0;
  font-size:var(--csa-f-xs);
  text-transform:uppercase;
  letter-spacing:var(--csa-ls-label);
  color:var(--csa-muted);
  font-weight:var(--csa-fw-bold);
}
.csa-sec__action{
  background:transparent; border:none;
  color:var(--csa-muted);
  font:inherit; font-size:var(--csa-f-xs);
  cursor:pointer; padding:2px 4px; border-radius:var(--csa-r-sm);
}
.csa-sec__action:hover{ color:var(--csa-text); background:var(--csa-hover); }

/* ── Search bar ───────────────────────────────────────────────────────────── */
.csa-search{
  display:flex; align-items:center; gap:var(--csa-s-3);
  padding:12px 14px;
  background:var(--csa-surface-1);
  border:1px solid var(--csa-line);
  border-radius:var(--csa-r-md);
}
.csa-search:focus-within{ border-color:var(--csa-accent); }
.csa-search input{
  flex:1; min-width:0;
  background:transparent; border:none; outline:none;
  color:var(--csa-text);
  font:inherit; font-size:var(--csa-f-md);
}
.csa-search input::placeholder{ color:var(--csa-hint); }
.csa-search kbd{
  font-size:var(--csa-f-xs);
  font-family:var(--csa-font-mono);
  color:var(--csa-muted);
  background:var(--csa-surface-0);
  padding:2px 6px;
  border:1px solid var(--csa-line);
  border-radius:4px;
}

/* ── Empty state ──────────────────────────────────────────────────────────── */
.csa-empty{
  padding:var(--csa-s-5);
  color:var(--csa-muted);
  font-size:var(--csa-f-md);
  text-align:center;
  border:1px dashed var(--csa-line);
  border-radius:var(--csa-r-md);
}

/* ── Divider ──────────────────────────────────────────────────────────────── */
.csa-rule{ border:none; border-top:1px solid var(--csa-line); margin:var(--csa-s-3) 0; }

/* ── Avatar ───────────────────────────────────────────────────────────────── */
.csa-avatar{
  display:inline-flex; align-items:center; justify-content:center;
  width:36px; height:36px;
  border-radius:var(--csa-r-full);
  background:var(--csa-surface-2);
  border:1px solid var(--csa-line);
  color:var(--csa-muted);
  font-size:var(--csa-f-sm);
  font-weight:var(--csa-fw-bold);
  overflow:hidden;
  flex-shrink:0;
}
.csa-avatar img{ width:100%; height:100%; object-fit:cover; }
.csa-avatar--sm{ width:28px; height:28px; font-size:var(--csa-f-xs); }
.csa-avatar--lg{ width:52px; height:52px; font-size:var(--csa-f-lg); }
.csa-avatar--xl{ width:96px; height:96px; font-size:26px; }
.csa-avatar--accent{ background:var(--csa-accent-bg); color:var(--csa-accent-text); border-color:var(--csa-accent); }

/* ── Grid helpers ─────────────────────────────────────────────────────────── */
.csa-grid-auto{ display:grid; grid-template-columns:repeat(auto-fill, minmax(280px, 1fr)); gap:var(--csa-s-3); }
.csa-grid-auto--sm{ grid-template-columns:repeat(auto-fill, minmax(200px, 1fr)); }
.csa-grid-auto--lg{ grid-template-columns:repeat(auto-fill, minmax(340px, 1fr)); }

/* ── Screen-reader-only ───────────────────────────────────────────────────── */
.csa-sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}


/* ═══ REV_1159 — the one intentional visual change ═════════════════════════
   Everything in this file was designed to be visually inert: colour values are
   copied verbatim from the existing dark-minimal theme, and the type / space /
   radius scales only NAME values already in use.

   ONE exception, deliberately taken:

   `.csa-btn` was used bare in 33 places in admin.html (plus admin-legacy.html)
   but NO stylesheet ever defined it — those buttons have been rendering as raw
   browser-default buttons. Defining `.csa-btn` here styles them correctly for
   the first time. Two legacy spellings (`.csa-btn-primary`, `.csa-btn.primary`)
   are aliased onto the primary variant for the same reason.

   Colliding names avoided rather than fought:
     .csa-field   -> owned by csa-fields.js (label+input). Ours is .csa-fld.
     .csa-divider -> owned by scene.html (<div>). Ours is .csa-rule.

   Everything else (.csa-pill, .csa-card, .csa-tab, .csa-sec, .csa-search,
   .csa-empty, .csa-avatar, .csa-grid-auto) is unused in existing markup - those
   rules are dormant until a template opts in. Verified by grep at rev_1159.
   ------------------------------------------------------------------------- */