/* Anok Hair Braiding — Brand Tokens */

@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400;0,6..96,500;0,6..96,600;0,6..96,700;0,6..96,800;1,6..96,400;1,6..96,500&family=Italiana&family=Inter:wght@300;400;500;600;700&display=swap');

:root {
  /* Color */
  --anok-blanc: #F8F1EA;          /* warm cream */
  --anok-blanc-deep: #F1E6DC;     /* deeper cream */
  --anok-petale: #EFD4D0;         /* petal blush */
  --anok-poudre: #F2D7DA;         /* powder pink */
  --anok-rose: #C97E84;           /* dusty rose */
  --anok-rose-deep: #7A3340;      /* signature deep rose */
  --anok-bordeaux: #4E1F28;       /* darker accent */
  --anok-encre: #1B1414;          /* ink black */
  --anok-noir: #2A1F22;           /* warm black */
  --anok-or: #B8915A;             /* champagne gold */
  --anok-or-clair: #D9B886;       /* light gold */
  --anok-feuille: #6B7A56;        /* foliage green (subtle accent) */

  /* Type */
  --font-display: 'Bodoni Moda', 'Didot', 'Bodoni 72', serif;
  --font-italic: 'Italiana', 'Bodoni Moda', serif;
  --font-body: 'Inter', -apple-system, system-ui, sans-serif;

  /* Spacing */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 40px;
  --space-2xl: 64px;
  --space-3xl: 96px;
}

/* Image placeholder — striped, monospace label */
.anok-placeholder {
  background:
    repeating-linear-gradient(
      45deg,
      var(--anok-petale) 0 12px,
      var(--anok-blanc-deep) 12px 24px
    );
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', 'Courier New', monospace;
  font-size: 11px;
  color: var(--anok-rose-deep);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  text-align: center;
  padding: 12px;
}
.anok-placeholder.dark {
  background:
    repeating-linear-gradient(
      45deg,
      var(--anok-noir) 0 12px,
      #3a2a2e 12px 24px
    );
  color: var(--anok-petale);
}

.anok-placeholder span {
  background: rgba(248, 241, 234, 0.85);
  padding: 4px 10px;
  border-radius: 1px;
}
.anok-placeholder.dark span {
  background: rgba(26, 20, 18, 0.7);
  color: var(--anok-petale);
}