/* ========================================================================
 * Atelier Observatory — Base Styles & Resets
 *
 * Global resets and foundational styles for the Atelier surface. Scoped
 * to the .atelier-root container so nothing leaks into the Boutique
 * storefront.
 *
 * Design principles:
 *   - Flat editorial aesthetic: NO glassmorphism, NO blurs, NO gradients
 *     (except product image placeholders)
 *   - Desktop-first, minimum 1280px viewport
 *   - Warm cream/sand/espresso palette only
 *   - Crisp 1px borders, solid backgrounds, clear hierarchy
 *
 * Requirements: 15.6 (flat aesthetic, no glassmorphism/blurs/gradients)
 *               22.1 (code organization under /src/atelier/)
 * ======================================================================== */

@import './tokens.css';
@import './fonts.css';

/* -----------------------------------------------------------------------
 * Atelier root container — scopes all observatory styles
 * ----------------------------------------------------------------------- */

.atelier-root {
  background: var(--at-cream-1);
  color: var(--at-ink-1);
  font-family: var(--at-sans);
  font-size: var(--at-body-size);
  line-height: var(--at-body-leading);
  min-height: 100vh;
  min-width: 1280px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* -----------------------------------------------------------------------
 * Flat aesthetic enforcement — override any inherited storefront styles
 * that use glassmorphism, blurs, or gradients within the Atelier.
 * ----------------------------------------------------------------------- */

.atelier-root *,
.atelier-root *::before,
.atelier-root *::after {
  /* Strip inherited backdrop-filter / blur from storefront globals */
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Re-enable box-sizing reset */
.atelier-root *,
.atelier-root *::before,
.atelier-root *::after {
  box-sizing: border-box;
}

/* -----------------------------------------------------------------------
 * Typography resets within Atelier
 * ----------------------------------------------------------------------- */

.atelier-root h1,
.atelier-root h2,
.atelier-root h3,
.atelier-root h4,
.atelier-root h5,
.atelier-root h6 {
  margin: 0;
  font-weight: 400;
  /* Do not set font-family here — it overrides Tailwind `font-display`
     (Fraunces / boutique hero headline stack) on EditorialTitle and
     other headings. Unstyled headings inherit --at-sans from .atelier-root. */
  color: var(--at-ink-1);
}

.atelier-root p {
  margin: 0;
}

.atelier-root a {
  color: var(--at-red-1);
  text-decoration: none;
}

.atelier-root a:hover {
  text-decoration: underline;
}

.atelier-root button {
  font-family: var(--at-sans);
  cursor: pointer;
  border: none;
  background: none;
  padding: 0;
  color: inherit;
}

.atelier-root code,
.atelier-root pre,
.atelier-root kbd {
  font-family: var(--at-mono);
  font-feature-settings: 'calt' 1, 'liga' 1;
}

/* Match Daylight `.dl-code-block` (daylight-components.css) — dark ink
 * canvas + accent-soft default text so Atelier telemetry SQL matches
 * Architecture / Markdown surfaces that already use `.dl-code-block`. */
.atelier-root pre {
  font-family: var(--at-mono);
  font-size: 13px;
  line-height: 1.6;
  background: var(--dl-ink);
  color: var(--dl-accent-soft);
  border-radius: var(--dl-r-lg);
  padding: var(--dl-s-5);
  border: none;
  overflow-x: auto;
  white-space: pre;
}

.atelier-root code {
  font-size: var(--at-mono-size);
}

/* Inline code within prose */
.atelier-root p > code,
.atelier-root li > code {
  background: var(--at-cream-2);
  padding: 1px 6px;
  border-radius: 3px;
}

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

/* Two-column shell: 240px sidebar + flexible canvas */
.atelier-frame {
  display: grid;
  grid-template-columns: var(--at-sidebar-width) 1fr;
  min-height: 100vh;
}

/* Canvas area (right of sidebar) */
.atelier-canvas {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-y: auto;
}

/* Surface content area (below top bar) */
.atelier-surface {
  flex: 1;
  padding: 32px 40px;
}

/* -----------------------------------------------------------------------
 * Scrollbar — warm, minimal, matching the cream palette
 * ----------------------------------------------------------------------- */

.atelier-root ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.atelier-root ::-webkit-scrollbar-track {
  background: transparent;
}

.atelier-root ::-webkit-scrollbar-thumb {
  background: var(--at-ink-5);
  border-radius: 3px;
}

.atelier-root ::-webkit-scrollbar-thumb:hover {
  background: var(--at-ink-4);
}

/* -----------------------------------------------------------------------
 * Selection color — warm, on-brand
 * ----------------------------------------------------------------------- */

.atelier-root ::selection {
  background: var(--at-red-soft);
  color: var(--at-ink-1);
}

/* -----------------------------------------------------------------------
 * Focus styles — accessible, on-brand
 * ----------------------------------------------------------------------- */

.atelier-root :focus-visible {
  outline: 2px solid var(--at-red-1);
  outline-offset: 2px;
}

/* -----------------------------------------------------------------------
 * Reduced motion — respect user preference
 * ----------------------------------------------------------------------- */

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

/* -----------------------------------------------------------------------
 * Pulsing dot animation — used by StatusDot (live) and Observatory
 * ----------------------------------------------------------------------- */

@keyframes at-pulse-dot {
  0%, 100% { opacity: 0.5; transform: scale(0.85); }
  50%      { opacity: 1;   transform: scale(1.1); }
}

/* -----------------------------------------------------------------------
 * Skeleton pulse animation — used by loading placeholders
 * ----------------------------------------------------------------------- */

@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.7; }
}

.atelier-root .at-pulse-live {
  animation: at-pulse-dot 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .atelier-root .at-pulse-live {
    animation: none;
    opacity: 1;
  }
}

/* Telemetry timeline — "Trace this pick" pulse (matches workshop panel-flash) */
.atelier-root [data-telemetry-panel][data-flash='true'] {
  animation: at-telemetry-panel-flash 800ms ease-out;
}
@keyframes at-telemetry-panel-flash {
  0% {
    box-shadow: 0 0 0 0 rgba(154, 52, 18, 0);
    border-color: var(--at-rule-1);
  }
  30% {
    box-shadow: 0 0 0 6px rgba(154, 52, 18, 0.28);
    border-color: var(--at-red-1);
  }
  100% {
    box-shadow: 0 2px 8px rgba(31, 20, 16, 0.06);
    border-color: var(--at-rule-1);
  }
}
@media (prefers-reduced-motion: reduce) {
  .atelier-root [data-telemetry-panel][data-flash='true'] {
    animation: none;
    border-color: var(--at-red-1);
  }
}
