/**
 * 🌞 Sunday App Framework — Console Primitives
 *
 * Why this exists:
 * - Many consoles/pages use lightweight semantic classes like:
 *     .sunday-container, .sunday-grid, .sunday-card, .sunday-btn, .sunday-input, .sunday-badge
 * - If a new Console forgets to include the right stylesheet, pages render "unstyled".
 *
 * This file is the **standard include** for all Consoles (bundled + external),
 * so `sunday-*` pages always render correctly.
 *
 * Tokens used:
 * - Prefer semantic aliases: --bg, --card, --surface, --ink, --text, --muted, --line, --accent, --brand
 * - Fall back to explicit tokens: --sunday-*
 */

:root {
  --_sunday-bg: var(--bg, var(--sunday-bg, #0b0c10));
  --_sunday-surface: var(--surface, var(--sunday-surface, #0f131c));
  --_sunday-card: var(--card, var(--sunday-card, #141820));
  --_sunday-text: var(--ink, var(--text, var(--sunday-text, #e9f3ff)));
  --_sunday-muted: var(--muted, var(--sunday-text-muted, #9bb1c7));
  --_sunday-line: var(--line, var(--sunday-line, #1e2636));
  --_sunday-accent: var(--accent, var(--sunday-accent, #7ce3ff));
  --_sunday-brand: var(--brand, var(--sunday-brand, #8b5cf6));
  --_sunday-radius-md: var(--radius-md, var(--sunday-radius-md, 10px));
  --_sunday-radius-lg: var(--radius-lg, var(--sunday-radius-lg, 14px));
  --_sunday-radius-full: var(--radius-full, var(--sunday-radius-full, 9999px));
  --_sunday-space-2: var(--space-2, var(--sunday-space-2, 8px));
  --_sunday-space-3: var(--space-3, var(--sunday-space-3, 12px));
  --_sunday-space-4: var(--space-4, var(--sunday-space-4, 16px));
  --_sunday-space-6: var(--space-6, var(--sunday-space-6, 24px));
  --_sunday-shadow-sm: var(--shadow-sm, var(--sunday-shadow-sm, 0 2px 4px rgba(0,0,0,.1)));
  --_sunday-shadow-md: var(--shadow-md, var(--sunday-shadow-md, 0 4px 12px rgba(0,0,0,.15)));
  --_sunday-container-max: var(--sunday-container-max, 1400px);
}

.sunday-container {
  max-width: var(--_sunday-container-max);
  margin: 0 auto;
}

.sunday-grid {
  display: grid;
  gap: var(--_sunday-space-4);
}

.sunday-card {
  background: var(--_sunday-card);
  border: 1px solid var(--_sunday-line);
  border-radius: var(--_sunday-radius-lg);
  padding: var(--_sunday-space-4);
  box-shadow: var(--_sunday-shadow-sm);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.sunday-card:hover {
  border-color: color-mix(in srgb, var(--_sunday-accent) 45%, var(--_sunday-line));
  box-shadow: var(--_sunday-shadow-md);
}

.sunday-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--_sunday-space-2);
  padding: var(--_sunday-space-2) var(--_sunday-space-4);
  border-radius: var(--_sunday-radius-md);
  border: 1px solid var(--_sunday-line);
  background: var(--_sunday-surface);
  color: var(--_sunday-text);
  font-size: var(--sunday-text-sm, 13px);
  font-weight: 650;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, opacity 0.15s ease;
  white-space: nowrap;
}

.sunday-btn:hover {
  border-color: color-mix(in srgb, var(--_sunday-accent) 45%, var(--_sunday-line));
  background: color-mix(in srgb, var(--_sunday-card) 65%, transparent);
}

.sunday-btn:active {
  transform: translateY(1px);
}

.sunday-btn[disabled],
.sunday-btn[aria-disabled="true"] {
  opacity: 0.55;
  cursor: not-allowed;
}

.sunday-input {
  padding: var(--_sunday-space-2) var(--_sunday-space-3);
  font-size: var(--sunday-text-sm, 13px);
  color: var(--_sunday-text);
  background: var(--_sunday-surface);
  border: 1px solid var(--_sunday-line);
  border-radius: var(--_sunday-radius-md);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.sunday-input::placeholder {
  color: var(--_sunday-muted);
}

.sunday-input:focus {
  outline: none;
  border-color: var(--_sunday-accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--_sunday-accent) 22%, transparent);
}

.sunday-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--_sunday-radius-full);
  border: 1px solid color-mix(in srgb, var(--_sunday-accent) 30%, var(--_sunday-line));
  background: color-mix(in srgb, var(--_sunday-accent) 14%, transparent);
  color: var(--_sunday-text);
  font-size: var(--sunday-text-xs, 11px);
  font-weight: 700;
}

.sunday-card code,
.sunday-badge code {
  font-size: var(--sunday-text-xs, 11px);
  padding: 2px 6px;
  border-radius: var(--_sunday-radius-md);
  background: color-mix(in srgb, var(--_sunday-surface) 70%, transparent);
  border: 1px solid var(--_sunday-line);
  color: var(--_sunday-text);
}