/* Shared design tokens for iframe modules.
   Modules may override any variable locally. */

:root {
  /* Core palette (dark default — darker values per ADR-0210 visual standard) */
  --font-offset: 0px;

  --color-bg-primary: #1b1b1b;
  --color-bg-secondary: #111;
  --color-bg-tertiary: #222;

  /* Canvas surfaces (used by CAD-style modules) */
  --color-canvas-bg: #000;

  --color-border: #333;
  --color-border-hover: #444;

  --color-text-primary: #f5f5f5;
  --color-text-secondary: #999;
  --color-text-muted: #666;
  --color-danger-rgb: 127, 29, 29;
  --color-danger: rgb(var(--color-danger-rgb));

  /* Accent (blue) */
  --color-accent-rgb: 96, 165, 250;
  --color-accent: rgb(var(--color-accent-rgb));
  --color-accent-dim: rgba(var(--color-accent-rgb), 0.12);
  --color-accent-hover: #3b82f6;

  /* Persona gradient RGB (comma-separated) */
  --color-persona: 124, 179, 66;

  /* Shared spacing scale */
  --spacing-xxs: 2px;
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-sm-md: 10px;
  --spacing-md-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;

  /* Common radii */
  --radius-xs: 4px;
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;

  /* ── Status colors ── */
  --color-success-rgb: 16, 185, 129;
  --color-success: rgb(var(--color-success-rgb));
  --color-warning-rgb: 245, 158, 11;
  --color-warning: rgb(var(--color-warning-rgb));
  --color-info-rgb: 59, 130, 246;
  --color-info: rgb(var(--color-info-rgb));

  /* ── Icon palette ── */
  --color-icon-blue: #3B82F6;
  --color-icon-red: #DC2626;
  --color-icon-green: #22C55E;
  --color-icon-purple: #A855F7;
  --color-icon-orange: #F97316;
  --color-icon-yellow: #FBBF24;
  --color-icon-gray: #6B7280;

  /* ── Shadows ── */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);

  /* ── Surfaces ── */
  --color-surface-overlay: rgba(0, 0, 0, 0.5);
  --color-surface-hover: rgba(255, 255, 255, 0.04);
  --color-surface-active: rgba(255, 255, 255, 0.08);

  /* ── Layout ── */
  --panel-width: 280px;
  --toolbar-height: 48px;
  --sidebar-width: 60px;

  /* ── Input / control heights ── */
  --input-height-sm: 32px;
  --input-height: 40px;

  /* ── Z-index scale ── */
  --z-dropdown: 100;
  --z-modal: 200;
  --z-toast: 300;
  --z-tooltip: 400;

  /* ── Transitions ── */
  --transition-fast: 0.15s ease;
  --transition-normal: 0.25s ease;
  --transition-smooth: 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Help browsers theme native controls */
  color-scheme: dark;
}

/* ══════════════════════════════════════════════════════════════
   DARK PALETTE CONTRACT
   As of 2026-03-09, the dark default is the single source of truth.
   Values: primary #1b1b1b, secondary #111, tertiary #222,
   border #333, border-hover #444, text-primary #f5f5f5.

   Rules:
     1. Modules MUST NOT re-declare these tokens in their :root block.
        They inherit from tokens.css automatically.
     2. Module CSS may still declare module-specific tokens (accent, pin
        colors, domain-specific variables).
     3. Light mode overrides live in body.light-mode (or module-local
        equivalent) and mirror the lighter values (#fafafa / #fff / etc.).
     4. If a module needs a unique bg (e.g., canvas #000), use
        --color-canvas-bg or a module-scoped var — not --color-bg-primary.
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   TYPOGRAPHY SCALE CONTRACT
   Gold standard: account module. All modules should converge here.

   Font sizes (always wrap in calc for accessibility):
     calc(10px + var(--font-offset, 0px))  — micro labels, gauge-max
     calc(11px + var(--font-offset, 0px))  — descriptions, captions
     calc(12px + var(--font-offset, 0px))  — small labels, setting hints
     calc(13px + var(--font-offset, 0px))  — body text, buttons, inputs
     calc(14px + var(--font-offset, 0px))  — setting labels, emphasized body
     calc(16px + var(--font-offset, 0px))  — section titles
     calc(20px + var(--font-offset, 0px))  — page/modal headings

   Font weights:
     500 — medium (labels, setting names)
     600 — semi-bold (titles, buttons, links)
     700 — bold (gauge values, key metrics)

   Font family:
     -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif

   Rules:
     1. ALWAYS use calc(Npx + var(--font-offset, 0px)) — never bare px
     2. Floor is 10px — nothing smaller
     3. Stick to the 7 sizes above — no in-between values
     4. --font-offset classes (.font-medium, .font-large) handle a11y
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   PANEL TABS CONTRACT
   Gold standard: sitebuild module (.panel-tab pattern).
   Use for any single-select tab bar in sidebars or panels.

   Container: .panel-tabs
     display: flex;
     border-bottom: 1px solid var(--color-border);
     padding: 0 var(--spacing-xs);

   Tab button: .panel-tab
     flex: 1;
     padding: var(--spacing-md-sm) var(--spacing-sm);   (12px 8px)
     font-size: calc(13px + var(--font-offset, 0px));
     font-weight: 500;
     text-align: center;
     color: var(--color-text-muted);
     background: transparent;
     border: none;
     border-bottom: 2px solid transparent;
     cursor: pointer;
     transition: var(--transition-fast);

   Hover: .panel-tab:hover
     color: var(--color-text-primary);

   Active: .panel-tab.active
     color: var(--color-accent);
     border-bottom-color: var(--color-accent);

   Rules:
     1. Only ONE tab active at a time (single-select)
     2. Active state = accent text + 2px accent underline
     3. Inactive = muted text, no underline
     4. Tabs fill equal width (flex: 1)
   ══════════════════════════════════════════════════════════════ */

.panel-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border);
  padding: 0 4px;
  margin-bottom: 8px;
}

.panel-tab {
  flex: 1;
  padding: 12px 6px;
  font-size: calc(13px + var(--font-offset, 0px));
  font-weight: 500;
  text-align: center;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: 0.15s;
}

.panel-tab:hover {
  color: var(--color-text-primary);
}

.panel-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}

/* ══════════════════════════════════════════════════════════════
   INPUT / SELECT CONTRACT
   Two sizes for two contexts. No in-between.

   Compact (toolbar selects, filter dropdowns):
     padding: 6px 10px;  (no explicit height — padding-driven)
     font-size: calc(12px + var(--font-offset, 0px));
     font-weight: 500;
     background: var(--color-bg-secondary);
     border: 1px solid var(--color-border);
     border-radius: var(--radius-sm);
     color: var(--color-text-primary);

   Full (form inputs, settings selects, modal fields):
     padding: 10px 16px;  (no explicit height — padding-driven)
     font-size: calc(13px + var(--font-offset, 0px));
     font-weight: 500;
     background: var(--color-bg-secondary);
     border: 1px solid var(--color-border-hover);
     border-radius: var(--radius-sm);
     color: var(--color-text-primary);

   Shared behavior:
     :hover  → border-color: var(--color-accent);
     :focus  → outline: none; border-color: var(--color-accent);
     cursor: pointer (selects) / text (inputs)

   Rules:
     1. Toolbar / filter row → compact
     2. Settings / modals / forms → full
     3. Always weight 500
     4. Always calc() font-size with --font-offset
     5. NO explicit height — padding controls size
   ══════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════
   TOOLBAR COMPONENT RULES
   Gold standard: media/gallery module.
   Any module that loads tokens.css gets these for free.
   ══════════════════════════════════════════════════════════════ */

/* --- Layout --- */
.toolbar {
  display: flex;
  gap: 12px;
  padding: 12px 16px;
  background: var(--color-bg-secondary);
  border-bottom: 1px solid var(--color-border);
  align-items: center;
  flex-wrap: wrap;
}

.toolbar-group {
  display: flex;
  gap: 8px;
  align-items: center;
}

.toolbar-divider {
  width: 1px;
  height: 28px;
  background: var(--color-border);
  margin: 0 4px;
}

/* --- Compact select (toolbar context) --- */
.filter-select {
  position: relative;
  display: inline-block;
}
.filter-select-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  font-size: calc(12px + var(--font-offset, 0px));
  font-weight: 500;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
  white-space: nowrap;
  user-select: none;
}
.filter-select-toggle:hover { border-color: var(--color-border-hover); }
.filter-select.open .filter-select-toggle {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 2px var(--color-accent-dim);
}
.filter-select-arrow {
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid var(--color-text-muted);
  transition: transform 0.15s;
}
.filter-select.open .filter-select-arrow { transform: rotate(180deg); }

.filter-select-menu {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 100%;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 16px rgba(0,0,0,0.12);
  z-index: var(--z-dropdown, 100);
  display: none;
  padding: 4px 0;
  max-height: 400px;
  overflow-y: auto;
}
.filter-select.open .filter-select-menu { display: block; }

.filter-select-option {
  padding: 8px 12px;
  font-size: calc(12px + var(--font-offset, 0px));
  color: var(--color-text-primary);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.1s;
}
.filter-select-option:hover {
  background: var(--color-accent-dim);
}
.filter-select-option.selected {
  color: var(--color-accent);
  font-weight: 600;
  background: var(--color-accent-dim);
}

/* --- Compact search (toolbar context) --- */
.search-input {
  padding: 6px 12px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  color: var(--color-text-primary);
  font-size: calc(12px + var(--font-offset, 0px));
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-input:hover { border-color: var(--color-border-hover); }
.search-input:focus { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 2px var(--color-accent-dim); }

/* --- Buttons --- */
.btn {
  padding: 6px 16px;
  background: var(--color-accent);
  border: none;
  border-radius: var(--radius-sm);
  color: #fff;
  font-size: calc(12px + var(--font-offset, 0px));
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s;
}
.btn:hover { background: var(--color-accent-hover); }
.btn svg { width: 16px; height: 16px; }

.btn-secondary {
  background: var(--color-bg-tertiary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
}
.btn-secondary:hover { background: var(--color-border); }

/* --- Icon button (square, no text, ghost) --- */
.btn-icon {
  width: 32px;
  height: 32px;
  padding: 0;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
}
.btn-icon:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary);
}
.btn-icon svg {
  width: 16px;
  height: 16px;
}

/* --- Gear dropdown --- */
.gear-wrap { position: relative; }

.gear-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s;
}
.gear-btn:hover {
  color: var(--color-text-primary);
}

.gear-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  min-width: 160px;
  z-index: var(--z-dropdown, 100);
  display: none;
}
.gear-menu.visible { display: block; }

.gear-menu-item {
  padding: 10px 14px;
  font-size: calc(13px + var(--font-offset, 0px));
  color: var(--color-text-primary);
  cursor: pointer;
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
}
.gear-menu-item:hover { background: var(--color-bg-tertiary); }

/* ══════════════════════════════════════════════════════════════
   UTILITY CLASSES
   Reusable across all modules. Prefer these over inline styles.
   ══════════════════════════════════════════════════════════════ */

/* Layout */
.flex-spacer { flex: 1; }
.flex-row { display: flex; align-items: center; }
.flex-row-wrap { display: flex; align-items: center; flex-wrap: wrap; }
.gap-xs  { gap: var(--spacing-xs); }
.gap-sm  { gap: var(--spacing-sm); }
.gap-sm-md { gap: var(--spacing-sm-md); }
.gap-md  { gap: var(--spacing-md); }

/* Text */
.text-xs { font-size: calc(11px + var(--font-offset, 0px)); }
.text-sm { font-size: calc(12px + var(--font-offset, 0px)); }
.text-md { font-size: calc(14px + var(--font-offset, 0px)); }
.text-muted { color: var(--color-text-muted); }
.text-secondary { color: var(--color-text-secondary); }
.text-primary { color: var(--color-text-primary); }
.text-bold { font-weight: 600; }

/* Spacing */
.mt-xs  { margin-top: var(--spacing-xs); }
.mt-sm  { margin-top: var(--spacing-sm); }
.mt-md  { margin-top: var(--spacing-md); }
.mb-xs  { margin-bottom: var(--spacing-xs); }
.mb-sm  { margin-bottom: var(--spacing-sm); }
.mb-sm-md { margin-bottom: var(--spacing-sm-md); }
.mb-md  { margin-bottom: var(--spacing-md); }
.pt-md-sm { padding-top: var(--spacing-md-sm); }

/* Width */
.w-full { width: 100%; }

/* Visibility */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }

/* Modal sizes */
.modal-xs { max-width: 360px; }
.modal-sm { max-width: 420px; }
.modal-md { max-width: 500px; }
.modal-lg { max-width: 760px; }
.modal-xl { max-width: 860px; }

/* Checkbox inline label */
.check-label {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: calc(13px + var(--font-offset, 0px));
}

/* Divider (horizontal rule via border-top) */
.section-divider {
  margin-top: var(--spacing-md);
  padding-top: var(--spacing-md-sm);
  border-top: 1px solid var(--color-border);
}

/* --- Footer status bar --- */
.footer {
  background: var(--color-bg-secondary);
  border-top: 1px solid var(--color-border);
  padding: 6px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: calc(11px + var(--font-offset, 0px));
  color: var(--color-text-muted);
}

.footer-status {
  color: var(--color-text-secondary);
  font-weight: 500;
}

.footer-brand {
  opacity: 0.3;
}

:root.font-medium { --font-offset: 1px; }
:root.font-large { --font-offset: 2px; }

:root.light-mode,
body.light-mode {
  --color-bg-primary: #fafafa;
  --color-bg-secondary: #fff;
  --color-bg-tertiary: #f5f5f5;

  /* Canvas surfaces (used by CAD-style modules) */
  --color-canvas-bg: #f5f5f5;

  --color-border: #e0e0e0;
  --color-border-hover: #d0d0d0;

  --color-text-primary: #1a1a1a;
  --color-text-secondary: #666;
  --color-text-muted: #999;
  --color-danger-rgb: 127, 29, 29;
  --color-danger: rgb(var(--color-danger-rgb));

  /* Surfaces flip for light mode */
  --color-surface-hover: rgba(0, 0, 0, 0.03);
  --color-surface-active: rgba(0, 0, 0, 0.06);
  --color-surface-overlay: rgba(0, 0, 0, 0.4);

  color-scheme: light;
}