/* ─────────────────────────────────────────────────────────────
   atelier.css — subiectul3.ro design system (lime theme)
   ─────────────────────────────────────────────────────────────*/

/* ── FONTS ── */
@import url('https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;600;700&family=Source+Serif+4:ital,opsz,wght@0,8..60,400;0,8..60,500;0,8..60,600;1,8..60,400;1,8..60,500;1,8..60,600&family=JetBrains+Mono:wght@400;500;700&display=swap');

/* ── TOKENS ── */
:root {
  /* Paper / surface */
  --paper:    #f5f2e9;
  --paper-2:  #ece7d6;
  --paper-3:  #fbf8ef;

  /* Ink / text */
  --ink:      #0f1428;
  --ink-2:    #2c334a;
  --ink-3:    #6e7588;

  /* Borders */
  --border:   #d8d2bf;
  --border-2: #c4bda7;

  /* Accent (lime) */
  --accent:       oklch(0.86 0.18 128);
  --accent-ink:   #1a2a05;
  --accent-soft:  oklch(0.86 0.18 128 / 0.18);

  /* Secondary warm (coral) */
  --warm:       oklch(0.72 0.15 35);
  --warm-soft:  oklch(0.72 0.15 35 / 0.14);

  /* Status */
  --red:    oklch(0.62 0.20 28);
  --amber:  oklch(0.78 0.14 78);
  --green:  oklch(0.62 0.14 150);

  /* Semantic shortcuts */
  --red-soft:   oklch(0.62 0.20 28 / 0.14);
  --amber-soft: oklch(0.78 0.14 78 / 0.14);
  --green-soft: oklch(0.62 0.14 150 / 0.14);

  /* Shadows */
  --shadow-card:  0 24px 60px rgba(15, 20, 40, 0.08);
  --shadow-cta:   0 8px 24px var(--accent-soft);
  --shadow-feat:  0 24px 60px rgba(15, 20, 40, 0.18);

  /* Typography */
  --font-display: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body:    "Inter Tight", "Inter", system-ui, sans-serif;
  --font-serif:   "Source Serif 4", "Times New Roman", serif;
  --font-mono:    "JetBrains Mono", ui-monospace, monospace;

  /* Scale */
  --text-h1-xl: 116px;
  --text-h1:    76px;
  --text-h1-sm: 56px;
  --text-h2:    44px;
  --text-h3:    32px;
  --text-lead:  18px;
  --text-base:  17px;
  --text-md:    14px;
  --text-sm:    13px;
  --text-xs:    11px;
  --text-2xs:   10px;
}

/* ── OPENTYPE ── */
html { font-feature-settings: "ss01", "cv11"; }

/* ── UTILITY CLASSES ── */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 0.92;
}

.serif-italic {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 500;
}

.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Lime highlight bar under serif-italic emphasis */
.halo {
  position: relative;
  display: inline;
}
.halo::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 6px;
  width: 100%;
  height: 14px;
  background: var(--accent);
  opacity: 0.55;
  z-index: -1;
  pointer-events: none;
}

/* ── PULSE DOT ANIMATION ── */
@keyframes atelier-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}
.pulse-dot { animation: atelier-pulse 2s infinite; }

/* ── PLAN BADGES ── */
.badge-plan {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
}
.badge-plan-free     { background: var(--paper-2); color: var(--ink-3); }
.badge-plan-sprint   { background: var(--amber-soft); color: var(--amber); }
.badge-plan-bac2026  { background: var(--accent-soft); color: var(--accent-ink); }
.badge-plan-profesor { background: rgba(15,20,40,.08); color: var(--ink-2); }

/* ── STATUS CHIPS ── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--paper-3);
  color: var(--ink-2);
}
.chip-accent { background: var(--accent); color: var(--accent-ink); border-color: transparent; }
.chip-ink    { background: var(--ink); color: var(--paper); border-color: transparent; }