/* ===================================
   SANDBOX — Visual Experiments
   ===================================
   This file belongs to sandbox.html only.
   Changes here do NOT affect any other page.
   =================================== */

/* Sandbox is always dark — uses Layer 1 base token --color-neutral-900 directly */

/* ===================================
   SANDBOX LAYOUT
   =================================== */

.sandbox {
  padding-top: var(--space-24);
  min-height: 100vh;
  position: relative;
}

/* Layer 1 (bottom): tiled background image — fixed to viewport */
.sandbox::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url('../assets/images/sandbox/seaweed+nudibranch_tile_seamless.png');
  background-repeat: repeat;
  background-size: auto;
  pointer-events: none;
  z-index: var(--z-base);
}

/* Layer 2: dark overlay + vignette */
.sandbox::before {
  content: '';
  position: fixed;
  inset: 0;
  background:
    radial-gradient(ellipse at center, transparent 25%, color-mix(in srgb, var(--color-neutral-900) 90%, transparent) 100%),
    color-mix(in srgb, var(--color-neutral-900) 80%, transparent);
  pointer-events: none;
  z-index: calc(var(--z-base) + 1);
}

/* Layer 3: page content and footer — above fixed overlay */
.sandbox__container,
#footer-placeholder {
  position: relative;
  z-index: calc(var(--z-base) + 2);
}

.sandbox__container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

/* Glass modifier — apply to sections that should have the frosted background */
.sandbox__section--glass {
  position: relative;
  z-index: calc(var(--z-base) + 2);
  background: var(--color-neutral-900-45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Sandbox is always dark — hide the theme toggle injected by the navbar.
   The navbar sits outside <main class="sandbox">, so we use :has() to
   scope to pages that contain the sandbox. */
body:has(.sandbox) .theme-toggle,
body:has(.sandbox) .nav__mobile-theme-row {
  display: none;
}

/* ===================================
   SANDBOX HEADER
   =================================== */

.sandbox__header {
  padding: var(--space-24) 0 var(--space-20);
  text-align: center;
}

.sandbox__label {
  display: inline-block;
  padding: var(--space-1) var(--space-4);
  background: var(--color-orange);
  color: var(--color-neutral-900);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--radius-full);
  margin-bottom: var(--space-6);
}

.sandbox__title {
  font-size: clamp(3rem, 7vw, 6rem);
  font-weight: 800;
  color: var(--color-text-primary);
  line-height: 1.0;
  margin-bottom: var(--space-6);
}

.sandbox__subtitle {
  font-size: var(--text-xl);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0 auto;
  max-width: 52ch;
}

.sandbox__hero-note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: var(--space-6) auto 0;
  max-width: 52ch;
  opacity: 0.65;
}

.sandbox__hero-link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity var(--transition-fast);
}

.sandbox__hero-link:hover {
  opacity: 1;
}

/* ===================================
   SECTIONS
   =================================== */

.sandbox__section {
  padding: var(--space-20) 0;
}


.sandbox__section-title {
  font-size: var(--text-2xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-8);
}

.sandbox__group-title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: var(--space-4);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sandbox__group-title--spaced {
  margin-top: var(--space-8);
}

/* ===================================
   TOKEN GRIDS
   =================================== */

.sandbox__token-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-4);
}

/* Prevent grid items from overflowing their column — default min-width: auto
   allows items to exceed 1fr. Setting 0 forces them to respect column width. */
.sandbox__token-grid > * {
  min-width: 0;
}


.sandbox__token-grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.sandbox__token-grid--2 {
  grid-template-columns: 1fr 1fr;
}

/* Variant label — sits above a card inside a multi-card grid cell */
.sandbox__card-variant-label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: var(--space-3);
}

@media (max-width: 900px) {
  .sandbox__token-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .sandbox__token-grid--2 {
    grid-template-columns: 1fr;
  }
  .sandbox__token-grid--3 {
    grid-template-columns: 1fr 1fr;
  }
  .sandbox__section {
    padding: var(--space-12) 0;
  }
  .sandbox__header {
    padding: var(--space-16) 0 var(--space-12);
  }
  .sandbox__subtitle {
    font-size: var(--text-lg);
  }
}


@media (max-width: 540px) {
  .sandbox__token-grid {
    grid-template-columns: 1fr 1fr;
  }
  /* Re-assert modifiers — base class above overrides them via cascade */
  .sandbox__token-grid--2,
  .sandbox__token-grid--3 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 380px) {
  .sandbox__token-grid,
  .sandbox__token-grid--2,
  .sandbox__token-grid--3 {
    grid-template-columns: 1fr;
  }
  .sandbox__container {
    padding: 0 var(--space-3);
  }
  .sandbox__subtitle {
    font-size: var(--text-base);
  }
}

@media (max-width: 300px) {
  .sandbox__container {
    padding: 0 var(--space-2);
  }
}

/* ===================================
   COLOUR CARDS
   Mirrors the palette page layout — always dark on this page
   =================================== */

.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

.color-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}


.color-card__info {
  padding: var(--space-4);
}

.color-card__name {
  font-weight: 600;
  margin-bottom: var(--space-2);
  color: var(--color-text-primary);
  font-size: var(--text-base);
}

.color-card__value {
  font-family: var(--font-family-mono);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
  cursor: pointer;
  transition: color var(--transition-fast);
  user-select: none;
}

.color-card__value:hover,
.color-card__value.is-copied {
  color: var(--color-blue);
}

.color-card__variable {
  font-family: var(--font-family-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-style: italic;
  cursor: pointer;
  transition: color var(--transition-fast);
  user-select: none;
}

.color-card__variable:hover,
.color-card__variable.is-copied {
  color: var(--color-orange);
}

/* Swatches use base-layer tokens — they resolve to the canonical hex regardless of theme */
.color-swatch--orange       { background: var(--color-orange); }
.color-swatch--blue         { background: var(--color-blue); }
.color-swatch--neutral-50   { background: var(--color-neutral-50); }
.color-swatch--neutral-900  { background: var(--color-neutral-900); }

.color-swatch {
  height: 120px;
  width: 100%;
  border-bottom: 2px solid var(--color-border);
}

@media (max-width: 768px) {
  .color-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .color-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .color-swatch {
    height: 80px;
  }
}

/* ===================================
   CARDS
   =================================== */

.sandbox__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
  box-shadow: var(--shadow-sm);
}

.sandbox__card--highlight {
  background: color-mix(in srgb, var(--color-blue) 10%, transparent);
  border-color: color-mix(in srgb, var(--color-blue) 25%, transparent);
}

.sandbox__card--accent {
  border-left: 4px solid var(--color-orange);
}

.sandbox__card-title {
  font-size: var(--text-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin-bottom: var(--space-2);
  margin-top: 0;
}

.sandbox__card-text {
  margin: 0;
  color: var(--color-text-muted);
}

/* ===================================
   FONT SHOWCASE
   =================================== */

.sandbox__font-showcase {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  margin-bottom: var(--space-4);
}

.sandbox__font-card {
  background: var(--color-neutral-900-60);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-8);
}

.sandbox__font-specimen {
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.1;
  margin-bottom: var(--space-5);
}

.sandbox__font-specimen--inter  { font-family: 'Inter', sans-serif; }
.sandbox__font-specimen--outfit { font-family: 'Outfit', sans-serif; }

.sandbox__font-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.sandbox__font-name {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-text-primary);
}

.sandbox__font-use {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

@media (max-width: 600px) {
  .sandbox__font-showcase {
    grid-template-columns: 1fr;
  }
}

/* ===================================
   TYPOGRAPHY SAMPLES
   =================================== */

.sandbox__type-sample {
  margin: 0 0 var(--space-4);
  color: var(--color-text-primary);
  line-height: 1.2;
  font-family: var(--font-family-heading);
  text-align: center;
}

.sandbox__type-sample:last-child {
  margin-bottom: 0;
}

.sandbox__type-sample--7xl  { font-size: clamp(3rem, 7vw, 6rem);  font-weight: 800; line-height: 1.1; margin-bottom: var(--space-8); }
.sandbox__type-sample--6xl  { font-size: clamp(2rem,   6vw, 3.75rem); font-weight: 800; line-height: 1.1; }
.sandbox__type-sample--5xl  { font-size: clamp(1.75rem, 5vw, 3rem);   font-weight: 800; line-height: 1.1; }
.sandbox__type-sample--4xl  { font-size: clamp(1.5rem,  4vw, 2.25rem); font-weight: 700; margin-bottom: var(--space-6); }
.sandbox__type-sample--3xl  { font-size: clamp(1.375rem, 3vw, 1.875rem); font-weight: 700; }
.sandbox__type-sample--2xl  { font-size: clamp(1.25rem, 2.5vw, 1.5rem); font-weight: 600; margin-bottom: var(--space-5); }
.sandbox__type-sample--xl   { font-size: clamp(1.125rem, 2vw, 1.25rem); font-weight: 600; }
.sandbox__type-sample--lg   { font-size: var(--text-lg); }
.sandbox__type-sample--base { font-size: var(--text-base); }
.sandbox__type-sample--sm   { font-size: var(--text-sm); }
.sandbox__type-sample--xs   { font-size: var(--text-xs); }

/* Prose-weight samples — switch to body font with relaxed line-height and comfortable reading width */
.sandbox__type-sample--prose {
  font-family: var(--font-family-body);
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 68ch;
  margin-left: auto;
  margin-right: auto;
}

/* ===================================
   PROSE DEMO — links & emphasis
   =================================== */

.sandbox__prose-demo {
  max-width: 68ch;
  margin: 0 auto;
  text-align: left;
}

.sandbox__prose-demo p {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--color-text-secondary);
  margin-bottom: var(--space-4);
}

.sandbox__prose-demo p:last-child {
  margin-bottom: 0;
}

.sandbox__demo-link {
  color: var(--color-link-on-dark);
  text-decoration: none;
  text-underline-offset: 3px;
  transition: text-decoration-color var(--transition-fast);
}

.sandbox__demo-link:hover {
  text-decoration: underline;
}

/* ===================================
   BUTTONS ROW
   =================================== */

.sandbox__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
}

.sandbox__row--centered {
  justify-content: center;
}

/* Strip component-specific margins from elements placed inside sandbox rows */
.sandbox__row .hero__badge,
.sandbox__row .blog-card__badge,
.sandbox__row .news-card__badge {
  margin-bottom: 0;
}

/* Full-width button modifier — used in the pricing card demo */
.sandbox__btn--full {
  width: 100%;
  justify-content: center;
}

/* Feature card sandbox override — the real component uses wide-grid padding/min-height
   that overscales in the compact 1/3-column sandbox grid */
.sandbox .feature {
  padding: var(--space-8);
  min-height: 0;
}

/* Equal-height card rows — cells are flex columns so the card (last child) fills the
   remaining height after the group title, stretching all cards to match the tallest */
.sandbox__token-grid--equal-height > div {
  display: flex;
  flex-direction: column;
}

.sandbox__token-grid--equal-height > div > *:last-child {
  flex: 1;
}

.sandbox__token-grid--spaced {
  margin-top: var(--space-12);
}

/* ===================================
   BRAND ASSET GRID
   =================================== */

.sandbox__asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-6);
  margin-bottom: var(--space-8);
}

/* Explicit 3-column layout for logo cards */
.sandbox__asset-grid--3col {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 720px) {
  .sandbox__asset-grid,
  .sandbox__asset-grid--3col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 420px) {
  .sandbox__asset-grid,
  .sandbox__asset-grid--3col {
    grid-template-columns: 1fr;
  }
}

/* ===================================
   BRAND ASSET CARD
   =================================== */

.sandbox-asset-card {
  background: var(--color-neutral-900-60);
  border: 1px solid var(--color-blue-20);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-md);
}

/* Preview area — background variants */
.sandbox-asset-card__preview {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  min-height: 160px;
}

.sandbox-asset-card__preview--dark-bg {
  background: var(--color-neutral-900-85);
}

.sandbox-asset-card__preview--light-bg {
  background: var(--color-neutral-50);
  border-bottom: 1px solid var(--color-blue-25);
}


.sandbox-asset-card__image {
  max-width: 100%;
  max-height: 120px;
  object-fit: contain;
}

.sandbox-asset-card__body {
  padding: var(--space-4) var(--space-5) 0;
  display: flex;
  align-items: baseline;
  gap: var(--space-3);
}

.sandbox-asset-card__name {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  flex: 1;
}

.sandbox-asset-card__format {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-orange);
  font-family: var(--font-family-mono);
}

.sandbox-asset-card__actions {
  padding: var(--space-3) var(--space-5) var(--space-5);
  display: flex;
  gap: var(--space-2);
  margin-top: auto;
  flex-wrap: wrap;
}

.sandbox-asset-card__download {
  flex: 1;
  min-width: 80px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: color-mix(in srgb, var(--color-blue) 30%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-blue) 55%, transparent);
  color: var(--color-text-on-dark);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-size: var(--text-xs);
  font-weight: 600;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.sandbox-asset-card__download:hover {
  background: color-mix(in srgb, var(--color-blue) 50%, transparent);
  border-color: var(--color-blue);
  color: var(--color-text-on-dark);
}

.sandbox-asset-card__download-icon {
  flex-shrink: 0;
}