/* Zabaqist · Mint Tea palette + Moroccan zellige system
   ────────────────────────────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700&display=swap');

:root, [data-variant="A"] {
  /* A · Ivory — lightest, Brilliant-inspired */
  --zb-cream:        oklch(0.99 0.005 85);    /* near-white */
  --zb-cream-2:      oklch(0.97 0.01 85);     /* card hover */
  --zb-cream-3:      oklch(0.92 0.015 85);    /* divider */
  --zb-mint:         oklch(0.50 0.10 165);    /* a touch brighter */
  --zb-mint-deep:    oklch(0.38 0.09 165);
  --zb-mint-soft:    oklch(0.88 0.04 165);
  --zb-mint-tint:    oklch(0.96 0.02 165);
  --zb-gold:         oklch(0.76 0.13 78);
  --zb-gold-deep:    oklch(0.62 0.13 68);
  --zb-gold-soft:    oklch(0.96 0.04 82);
  --zb-ink:          oklch(0.22 0.02 165);
  --zb-ink-2:        oklch(0.45 0.02 165);
  --zb-ink-3:        oklch(0.65 0.015 165);
  --zb-rose:         oklch(0.62 0.14 25);
  --zb-rose-soft:    oklch(0.95 0.03 25);
  --zb-pattern-opacity: 0.07;
}

[data-variant="B"] {
  /* B · Mint Wash — kept warmth, +brightness */
  --zb-cream:        oklch(0.98 0.018 155);   /* mint-tinted cream */
  --zb-cream-2:      oklch(0.95 0.025 155);
  --zb-cream-3:      oklch(0.90 0.03 155);
  --zb-mint:         oklch(0.46 0.09 165);
  --zb-mint-deep:    oklch(0.34 0.08 165);
  --zb-mint-soft:    oklch(0.86 0.05 165);
  --zb-mint-tint:    oklch(0.94 0.03 165);
  --zb-gold:         oklch(0.74 0.13 75);
  --zb-gold-deep:    oklch(0.60 0.13 65);
  --zb-gold-soft:    oklch(0.94 0.05 80);
  --zb-ink:          oklch(0.24 0.025 165);
  --zb-ink-2:        oklch(0.44 0.025 165);
  --zb-ink-3:        oklch(0.62 0.02 165);
  --zb-rose:         oklch(0.62 0.14 25);
  --zb-rose-soft:    oklch(0.93 0.04 25);
  --zb-pattern-opacity: 0.10;
}

[data-variant="C"] {
  /* C · Paper & Ink — pure white, deeper teal, editorial */
  --zb-cream:        oklch(1.00 0 0);         /* pure white */
  --zb-cream-2:      oklch(0.97 0.005 220);
  --zb-cream-3:      oklch(0.91 0.008 220);
  --zb-mint:         oklch(0.40 0.09 175);    /* deeper teal */
  --zb-mint-deep:    oklch(0.28 0.08 175);
  --zb-mint-soft:    oklch(0.86 0.04 175);
  --zb-mint-tint:    oklch(0.95 0.02 175);
  --zb-gold:         oklch(0.72 0.13 70);
  --zb-gold-deep:    oklch(0.56 0.14 60);
  --zb-gold-soft:    oklch(0.96 0.04 78);
  --zb-ink:          oklch(0.18 0.015 220);
  --zb-ink-2:        oklch(0.42 0.015 220);
  --zb-ink-3:        oklch(0.62 0.012 220);
  --zb-rose:         oklch(0.60 0.14 22);
  --zb-rose-soft:    oklch(0.95 0.03 22);
  --zb-pattern-opacity: 0.05;
}

:root {

  --zb-shadow-sm: 0 1px 2px rgba(20,40,30,0.04), 0 1px 1px rgba(20,40,30,0.03);
  --zb-shadow-md: 0 2px 4px rgba(20,40,30,0.05), 0 6px 18px rgba(20,40,30,0.06);
  --zb-shadow-lg: 0 6px 12px rgba(20,40,30,0.08), 0 18px 40px rgba(20,40,30,0.10);

  --zb-radius-xs: 6px;
  --zb-radius-sm: 10px;
  --zb-radius-md: 14px;
  --zb-radius-lg: 20px;
  --zb-radius-xl: 28px;

  --zb-font-display: 'Instrument Serif', 'Times New Roman', serif;
  --zb-font-ui: 'Inter Tight', system-ui, -apple-system, sans-serif;
  --zb-font-mono: 'JetBrains Mono', ui-monospace, monospace;

  --zb-pattern-opacity: 0.10;
}

[data-theme="dark"] {
  --zb-cream:        oklch(0.18 0.02 165);
  --zb-cream-2:      oklch(0.22 0.025 165);
  --zb-cream-3:      oklch(0.28 0.03 165);
  --zb-mint:         oklch(0.72 0.10 165);
  --zb-mint-deep:    oklch(0.82 0.10 165);
  --zb-mint-soft:    oklch(0.30 0.05 165);
  --zb-mint-tint:    oklch(0.24 0.03 165);
  --zb-gold:         oklch(0.78 0.13 80);
  --zb-gold-deep:    oklch(0.72 0.13 75);
  --zb-gold-soft:    oklch(0.30 0.06 75);
  --zb-ink:          oklch(0.96 0.01 85);
  --zb-ink-2:        oklch(0.78 0.015 85);
  --zb-ink-3:        oklch(0.60 0.015 85);
  --zb-rose:         oklch(0.72 0.14 25);
  --zb-rose-soft:    oklch(0.32 0.06 25);
}

/* Base reset for in-frame screens */
.zb {
  font-family: var(--zb-font-ui);
  color: var(--zb-ink);
  background: var(--zb-cream);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
}
.zb *, .zb *::before, .zb *::after { box-sizing: border-box; }
.zb button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; padding: 0; }
.zb input { font-family: inherit; color: inherit; }
.zb h1, .zb h2, .zb h3, .zb h4, .zb p { margin: 0; }

.zb-display { font-family: var(--zb-font-display); font-weight: 400; letter-spacing: -0.01em; }
.zb-mono { font-family: var(--zb-font-mono); font-feature-settings: "ss01"; }

/* Zellige pattern — applied as background-image at .pattern-bg */
.zb-pattern {
  background-image: var(--zb-pattern-url);
  background-size: 96px 96px;
  background-repeat: repeat;
  opacity: var(--zb-pattern-opacity);
  pointer-events: none;
}

/* Buttons */
.zb-btn {
  font-family: var(--zb-font-ui);
  font-weight: 600;
  font-size: 15px;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--zb-radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  letter-spacing: -0.005em;
  transition: transform .08s, box-shadow .12s, background .12s;
}
.zb-btn:active { transform: translateY(1px); }
.zb-btn-primary {
  background: var(--zb-mint);
  color: var(--zb-cream);
  box-shadow: 0 2px 0 var(--zb-mint-deep), var(--zb-shadow-sm);
}
.zb-btn-primary:hover { background: var(--zb-mint-deep); }
.zb-btn-ghost {
  background: transparent;
  color: var(--zb-ink);
  border: 1.5px solid var(--zb-cream-3);
}
.zb-btn-ghost:hover { background: var(--zb-cream-2); }
.zb-btn-gold {
  background: var(--zb-gold);
  color: oklch(0.20 0.03 75);
  box-shadow: 0 2px 0 var(--zb-gold-deep), var(--zb-shadow-sm);
}
.zb-btn-gold:hover { background: var(--zb-gold-deep); color: var(--zb-cream); }

/* Pill */
.zb-pill {
  display: inline-flex; align-items: center; gap: 6px;
  height: 26px; padding: 0 10px;
  border-radius: 13px;
  background: var(--zb-mint-tint);
  color: var(--zb-mint-deep);
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.01em;
}
[data-theme="dark"] .zb-pill { color: var(--zb-mint); }
.zb-pill-gold { background: var(--zb-gold-soft); color: var(--zb-gold-deep); }

/* Card */
.zb-card {
  background: var(--zb-cream);
  border: 1px solid var(--zb-cream-3);
  border-radius: var(--zb-radius-lg);
  box-shadow: var(--zb-shadow-sm);
}
[data-theme="dark"] .zb-card { background: var(--zb-cream-2); }

/* Input */
.zb-input {
  height: 48px;
  padding: 0 16px;
  border-radius: var(--zb-radius-md);
  border: 1.5px solid var(--zb-cream-3);
  background: var(--zb-cream);
  font-size: 16px;
  font-family: var(--zb-font-ui);
  color: var(--zb-ink);
  outline: none;
  transition: border-color .12s, box-shadow .12s;
  width: 100%;
}
.zb-input:focus {
  border-color: var(--zb-mint);
  box-shadow: 0 0 0 3px var(--zb-mint-tint);
}

/* Subtle striped image placeholder */
.zb-img-placeholder {
  background:
    repeating-linear-gradient(135deg,
      var(--zb-mint-tint) 0 12px,
      var(--zb-cream-2) 12px 24px);
  display: flex; align-items: center; justify-content: center;
  color: var(--zb-ink-3);
  font-family: var(--zb-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: var(--zb-radius-md);
}

/* Animations */
@keyframes zb-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}
@keyframes zb-fade-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes zb-spin {
  to { transform: rotate(360deg); }
}
.zb-fade-in { animation: zb-fade-in .28s ease-out both; }