/**
 * LG Studio proprietary icon system
 * Canonical geometry: /assets/icons/lg-studio/*.svg
 * Do not optimize or alter SVG paths.
 */

.lg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.5rem;   /* 24px — small feature default */
  height: 1.5rem;
  color: #15130F;
  --lg-icon-accent: #C96E53;
  --lg-icon-surface: #F7F2E9;
  line-height: 0;
  vertical-align: middle;
}

.lg-icon svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* Size scale */
.lg-icon--xs { width: 1rem; height: 1rem; }           /* 16px — metadata / connective */
.lg-icon--sm { width: 1.25rem; height: 1.25rem; }     /* 20px — inline / list */
.lg-icon--md { width: 1.5rem; height: 1.5rem; }       /* 24px */
.lg-icon--lg { width: 2rem; height: 2rem; }           /* 32px — framework */
.lg-icon--xl { width: 2.25rem; height: 2.25rem; }     /* 36px — signature method */

/* Surface adaptation — cream / paper */
[data-surface="paper"] .lg-icon,
.ee-section .lg-icon,
.ee-section--soft .lg-icon,
.ee-hero .lg-icon,
.ee-colophon .lg-icon {
  color: #15130F;
  --lg-icon-surface: #F7F2E9;
}

/* Surface adaptation — ink / dark */
[data-surface="ink"] .lg-icon,
.ee-section--dark .lg-icon {
  color: #F3EEE5;
  --lg-icon-surface: #0A0A09;
}

/* Soft cream panels that are not #F7F2E9 */
.ee-section--soft .lg-icon {
  --lg-icon-surface: #E7DFD2;
}

/* Connective arrow (journey punctuation) */
.lg-icon--arrow {
  width: 1rem;
  height: 1rem;
  color: #5C5348;
}

[data-surface="ink"] .lg-icon--arrow {
  color: rgba(243, 238, 229, 0.72);
}

.ee-journey-sep .lg-icon {
  width: 1rem;
  height: 1rem;
  color: #5C5348;
}