/**
 * Simple Notes - Bento Architecture & Kinetic Motifs
 */

.bento-stage {
  position: relative;
  z-index: 2;
  max-width: 1360px;
  margin: 0 auto;
  padding: 56px 24px 72px;
}

.bento-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}

/* Bento Span Utilities */
.col-span-12 { grid-column: span 12; }
.col-span-8  { grid-column: span 8; }
.col-span-7  { grid-column: span 7; }
.col-span-6  { grid-column: span 6; }
.col-span-5  { grid-column: span 5; }
.col-span-4  { grid-column: span 4; }
.col-span-3  { grid-column: span 3; }

/* Base Bento Card */
.b-card {
  position: relative;
  border-radius: var(--radius-bento);
  overflow: hidden;
  transition: transform var(--duration-normal) var(--ease-spring),
              border-color var(--duration-normal) var(--ease-spring),
              box-shadow var(--duration-normal) var(--ease-spring);
}

/* Tri-Tone Surface System */
/* Surface 1: Warm Paper */
.card-paper {
  background-color: var(--card-paper);
  color: var(--card-paper-ink);
  border: 1px solid var(--card-paper-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
}

/* Surface 2: Brutalist Architectural Grey */
.card-brutalist {
  background-color: var(--card-brutalist);
  color: var(--card-brutalist-ink);
  border: 1px solid var(--card-brutalist-border);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

/* Surface 3: Deep Matte Charcoal */
.card-charcoal {
  background-color: var(--card-charcoal);
  color: var(--text-cream);
  border: 1px solid var(--card-charcoal-border);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
}

.card-charcoal-elevated {
  background-color: var(--card-charcoal-elevated);
}

/* Fluted Divider Background */
.fluted-divider-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    90deg,
    transparent,
    transparent 47px,
    rgba(10, 10, 10, 0.05) 48px,
    transparent 49px
  );
}

/* Micro Typography Tokens */
.micro-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.micro-num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-dim);
}

/* Responsive Rules from Specification */
@media (max-width: 1024px) {
  .col-span-8, .col-span-7, .col-span-6, .col-span-5, .col-span-4, .col-span-3 {
    grid-column: span 12;
  }
}

@media (max-width: 680px) {
  .bento-stage {
    padding: 32px 16px 56px;
  }
}