/* src/shell/styles/shell-theme.css
   Scope: GLOBAL (Shell-wide)
   Purpose: Define theme tokens + base element defaults + composition utilities.
   Notes:
   - Do NOT consume --theme-scale globally. Plugins can opt-in to proportional scaling.
   - Keep this file decoration-free: tokens + sensible defaults only.
*/

/* -------------------------------------------------------------------------- */
/* Tokens (defaults)                                                          */
/* -------------------------------------------------------------------------- */
:root {
  /* Core colors */
  --theme-background: #000000;
  --theme-text:       #08FF00;
  --theme-ui:         #08FF00;

  /* Typography */
  --theme-font: ui-monospace, "Kode Mono", Consolas, "Courier New", monospace;

  /* Scale token (plugin-local consumption only) */
  --theme-scale: 1;
}

/* Prefer dark color scheme so scrollbars/forms match our background intent */
@media (prefers-color-scheme: dark) {
  :root { color-scheme: dark; }
}

/* -------------------------------------------------------------------------- */
/* Base element application (no decoration)                                   */
/* -------------------------------------------------------------------------- */
html, body {
  margin: 0;
  padding: 0;
  background: var(--theme-background);
  color: var(--theme-text);
  font-family: var(--theme-font);
  /* Keep root font-size stable. Plugins can scale their own subtrees. */
  font-size: 16px;
}

/* Typography resets: inherit font everywhere */
*, *::before, *::after {
  box-sizing: border-box;
  font: inherit;
  color: inherit;
}

/* Links follow text color; underline for affordance; no hover decoration */
a {
  color: inherit;
  text-decoration: underline;
}

/* Inputs/buttons use token colors; no extra styling */
button, input, select, textarea {
  background: transparent;
  color: inherit;
  border: 1px solid var(--theme-ui);
  outline: none;
}

/* Basic focus affordance (thin, token-colored) */
:focus-visible {
  outline: 1px solid var(--theme-ui);
  outline-offset: 2px;
}

/* Text selection for readability on black background */
::selection {
  background: var(--theme-ui);
  color: var(--theme-background);
}

/* Tables and lists: neutral, inherit-only */
table { border-collapse: collapse; }
th, td { padding: 0; }
ul, ol { margin: 0; padding-left: 1.25rem; }

/* Images/video: responsive by default without decoration */
img, video, canvas, svg {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Utility: visually-hidden (a11y) */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 1px 1px); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

/* -------------------------------------------------------------------------- */
/* Composition Utilities                                                      */
/* -------------------------------------------------------------------------- */

/* Shared 3-column row grid for Theme plugin (label | swatch | control) */
.theme-row {
  display: grid;
  grid-template-columns: 12ch 2.5rem 1fr;
  gap: 0.5rem; /* rem-based so it scales with organizer font-size */
  align-items: center;
}
.theme-row .lbl  { grid-column: 1; }
.theme-row .chip { grid-column: 2; }
.theme-row .ctrl { grid-column: 3; }

/* Saved list row: [trash] | [name-click-to-activate] */
.theme-saved-row {
  display: grid;
  grid-template-columns: 2.5rem 1fr; /* chip | name  (no px) */
  gap: 0.5rem; /* rem so it scales with organizer font-size */
  align-items: center;
}

/* Active theme (single-select). Inverted video using tokens only */
.theme-saved-row.is-active {
  background: var(--theme-text);
  color: var(--theme-background);
  outline: 2px solid var(--theme-ui);
  outline-offset: -2px;
}

/* Active row name: bold for emphasis */
.theme-saved-row.is-active .name {
  font-weight: bold;
}

/* Hold feedback: subtle visual during long-press */
.theme-saved-row [data-hold="true"] {
  opacity: 0.7;
  outline: 2px solid var(--theme-ui);
  outline-offset: 2px;
}

/* Utility: let a control span cols 2–3 in .theme-row without inline styles */
.ctrl--span2 { grid-column: 2 / span 2; }

/* Semantic hooks for a11y (no visual rules) */
.theme-saved-list[role="radiogroup"] {}
.theme-saved-row[role="radio"] {}

/* -------------------------------------------------------------------------- */
/* Generic Composition Utilities                                              */
/* -------------------------------------------------------------------------- */

/* Padded section wrapper */
.section-pad {
  padding: 1rem;
}

/* Vertical stacks */
.stack-sm {
  display: grid;
  gap: .5rem;
}

.stack-md {
  display: grid;
  gap: 1rem;
}

/* Inline action row */
.actions-inline {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}

/* Two-column row: label | control (Foundation-aligned 12ch labels) */
.row-2col {
  display: grid;
  grid-template-columns: 12ch 1fr;
  gap: .5rem;
  align-items: center;
}

/* Variant: narrower labels for compact forms */
.row-2col-narrow {
  display: grid;
  grid-template-columns: 8ch 1fr;
  gap: .5rem;
  align-items: center;
}

/* Three-column row: label | glyph/swatch | control */
.row-3col {
  display: grid;
  grid-template-columns: 12ch 2.5rem 1fr;
  gap: .5rem;
  align-items: center;
}

/* Optional helpers */
.fill {
  width: 100%;
}

.center {
  display: grid;
  place-items: center;
}

/* -------------------------------------------------------------------------- */
/* Generic Feedback Utilities                                                */
/* -------------------------------------------------------------------------- */

/* Loading state: dims content and blocks clicks */
.is-loading {
  opacity: .6;
  pointer-events: none;
}

/* Error message text (tone derived from UI token) */
.error-message {
  color: var(--theme-ui, #08FF00);
}

/* -------------------------------------------------------------------------- */
/* Account Plugin Composition Utilities - REMOVED IN BATCH 11                */
/* Rows now use generic composition utilities only                           */
/* All account-* classes removed from markup; can delete this section later  */
/* -------------------------------------------------------------------------- */

/* Removed in Batch 11 — replaced by .section-pad + .stack-md */
/* .account-section { display: grid; gap: 1rem; padding: 1rem; } */

/* Removed in Batch 11 — replaced by .row-2col-narrow (8ch variant) */
/* .account-form-row { display: grid; grid-template-columns: 8ch 1fr; gap: 0.5rem; align-items: center; } */

/* Removed in Batch 11 — replaced by .stack-sm */
/* .account-legal-group { display: grid; gap: 0.75rem; margin-top: 1rem; } */

/* Removed in Batch 11 — replaced by .actions-inline */
/* .account-actions { display: flex; gap: 0.5rem; margin-top: 1rem; } */

/* Removed in Batch 11 — error text now unstyled (can add generic .error-message later) */
/* .account-error { color: var(--theme-ui); padding: 0.5rem; margin-top: 0.5rem; border-left: 2px solid var(--theme-ui); font-size: 0.875rem; } */

/* Removed in Batch 11 — unused */
/* .account-success { color: var(--theme-ui); padding: 0.5rem; margin-top: 0.5rem; border-left: 2px solid var(--theme-ui); font-size: 0.875rem; } */

/* Removed in Batch 11 — button disabled state sufficient for loading feedback */
/* .account-loading { opacity: 0.5; pointer-events: none; } */