/* =====================================================================
   Design Tokens — a-chieve Prototype

   :root            → system-wide tokens (neutral scale, status, shadows)
   .collab-portal   → school CI brand layer (Teacher portal, paid sponsor)
                      override here per school: .collab-portal { --ci-brand: #school; }
   .admin-portal    → a-chieve core brand (admin.css)
   Student portal   → Tailwind achieve.* classes only
   ===================================================================== */

:root {
  /* Typography */
  --font-title: "FC Subject Rounded", "Noto Sans Thai", ui-sans-serif, system-ui, sans-serif;

  /* Neutral scale */
  --ci-neutral-50: #f8fafc;
  --ci-neutral-100: #f1f5f9;
  --ci-neutral-200: #e2e8f0;
  --ci-neutral-400: #94a3b8;
  --ci-neutral-500: #64748b;
  --ci-neutral-600: #475569;
  --ci-neutral-700: #334155;
  --ci-neutral-900: #020617;

  /* Semantic status */
  --ci-success: #2f8a4f;
  --ci-success-soft: #f3f8f4;
  --ci-warning: #c59a17;
  --ci-warning-soft: #fff7ed;
  --ci-cyan: #13a3b8;
  --ci-cyan-soft: #ecfeff;
  --ci-blue: #1d4ed8;
  --ci-blue-soft: #eff6ff;

  /* Shadows */
  --ci-shadow-soft: 0 5px 12px rgba(45, 23, 54, 0.045);
  --ci-shadow-card: 0 6px 16px rgba(45, 23, 54, 0.08);
  --ci-shadow-drawer: -14px 0 34px rgba(45, 23, 54, 0.12);

  /* Tooltip */
  --ci-tooltip-bg: #0f172a;
}

/* School CI layer — independent from core system.
   Schools override this block to inject their own brand. */
.collab-portal {
  /* Brand — school Corporate Identity (purple = prototype default) */
  --ci-brand: #4A235A;
  --ci-brand-hover: #3a1b47;
  --ci-brand-soft: #f5eff7;
  --ci-brand-tint: #eadff0;
  --ci-brand-muted: #7a5688;
  --ci-brand-border: #c5a0d0;

  /* Ink & text */
  --ci-ink: #2d1736;
  --ci-text: #1f2937;
  --ci-muted: #64748b;

  /* Borders */
  --ci-line: #d9c8de;
  --ci-line-soft: #eee4f1;

  /* Backgrounds */
  --ci-page-bg: #f7fbff;
  --ci-header-bg: #f7fbff;
  --ci-surface: #ffffff;
  --ci-surface-muted: #f8fafc;

  /* Header chrome (collab: thick brand-color bottom border) */
  --ci-header-border: var(--ci-brand);
  --ci-header-border-width: 3px;

  /* Interactive */
  --ci-progress: var(--ci-brand);
  --ci-focus: var(--ci-brand);
}