/* Design tokens · single source of truth for spacing, radii, shadows, type, color.
   Loaded BEFORE admin.css and classroom.css so individual stylesheets consume
   the variables. Replacing magic numbers as we touch each component.

   v70 design foundation extends this with: per-module hue accents, spring easings,
   warm off-white bg, Fraunces serif for "moments", and density CSS variables. */

/* Fraunces serif for KPI big numbers + hero titles only.
   Inter is loaded by the page-level CSS. We keep this scoped to avoid loading
   weights we won't use. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700;9..144,800&display=swap');

:root {
  /* Spacing scale · 4-px grid */
  --sp-0: 0;
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;
  --sp-8: 64px;

  /* Border radius */
  --r-1: 4px;
  --r-2: 8px;
  --r-3: 12px;
  --r-4: 16px;
  --r-5: 24px;
  --r-pill: 999px;

  /* Shadow */
  --shadow-xs: 0 1px 2px rgba(15,23,42,0.06);
  --shadow-sm: 0 2px 8px -2px rgba(15,23,42,0.08), 0 1px 2px rgba(15,23,42,0.04);
  --shadow-md: 0 8px 24px -8px rgba(15,23,42,0.16), 0 2px 6px -2px rgba(15,23,42,0.06);
  --shadow-lg: 0 24px 60px -16px rgba(15,23,42,0.4);

  /* Type ramp */
  --type-xs:   0.72rem;
  --type-sm:   0.82rem;
  --type-base: 0.92rem;
  --type-md:   1rem;
  --type-lg:   1.15rem;
  --type-xl:   1.4rem;
  --type-2xl:  1.75rem;
  --type-3xl:  2.2rem;
  --type-4xl:  3rem;

  /* Semantic color (WCAG AA against light bg) */
  --c-text-strong: #0f172a;
  --c-text:        #1e293b;
  --c-text-soft:   #475569;
  --c-text-muted:  #64748b;
  --c-text-on-dark: #f8fafc;

  --c-bg:        #f6f7fb;
  --c-bg-card:   #ffffff;
  --c-bg-soft:   #f1f5f9;
  --c-bg-dark:   #0f172a;

  --c-border:     #e2e8f0;
  --c-border-strong: #cbd5e1;

  --c-amber-50:  #fef3c7;
  --c-amber-100: #fde68a;
  --c-amber-500: #f59e0b;
  --c-amber-600: #d97706;
  --c-amber-700: #b45309;

  --c-good:      #10b981;
  --c-warn:      #f59e0b;
  --c-bad:       #ef4444;
  --c-info:      #3b82f6;

  /* Animation */
  --motion-fast:    100ms;
  --motion-normal:  200ms;
  --motion-slow:    400ms;
  --easing-out:     cubic-bezier(0.16, 1, 0.3, 1);
  --easing-snap:    cubic-bezier(0.34, 1.56, 0.64, 1);

  /* v70 — spring + standard ease per design brief */
  --motion-enter:   220ms;
  --motion-exit:    150ms;
  --easing-spring:  cubic-bezier(0.34, 1.56, 0.64, 1); /* entrances */
  --easing-std:     cubic-bezier(0.4, 0, 0.2, 1);      /* exits */

  /* v70 — warm content background (replaces pure white in content area).
     Sidebar/admin chrome keeps its dark navy. */
  --c-bg-warm:      #FBF9F4;
  --c-bg-warm-soft: #F5F2EA;

  /* v70 — display serif for "moments" (KPI big numbers, page hero titles).
     Body/UI stays on Inter. */
  --font-serif: 'Fraunces', 'DM Serif Display', Georgia, serif;

  /* v70 — per-module hue tokens.
     Each module gets: -50 (tint bg), -500 (accent), -700 (text on light).
     Used by sidebar left-bar accent and module-tinted CTAs. */
  --hue-dashboard-50:  #f0f9ff;  --hue-dashboard-500:  #0ea5e9;  --hue-dashboard-700:  #0369a1; /* sky */
  --hue-inbox-50:      #fffbeb;  --hue-inbox-500:      #f59e0b;  --hue-inbox-700:      #b45309; /* amber */
  --hue-people-50:     #f5f3ff;  --hue-people-500:     #8b5cf6;  --hue-people-700:     #6d28d9; /* violet */
  --hue-programs-50:   #ecfdf5;  --hue-programs-500:   #10b981;  --hue-programs-700:   #047857; /* emerald */
  --hue-messaging-50:  #eff6ff;  --hue-messaging-500:  #3b82f6;  --hue-messaging-700:  #1d4ed8; /* blue */
  --hue-money-50:      #f0fdf4;  --hue-money-500:      #22c55e;  --hue-money-700:      #15803d; /* green */
  --hue-content-50:    #fff1f2;  --hue-content-500:    #f43f5e;  --hue-content-700:    #be123c; /* rose */
  --hue-reports-50:    #f0fdfa;  --hue-reports-500:    #14b8a6;  --hue-reports-700:    #0f766e; /* teal */
  --hue-observability-50: #fff7ed; --hue-observability-500: #f97316; --hue-observability-700: #c2410c; /* orange */
  --hue-settings-50:   #f8fafc;  --hue-settings-500:   #64748b;  --hue-settings-700:   #334155; /* slate */

  /* v70 — density variables. Default = comfortable. Override on <html data-density="compact">. */
  --density-row-py:   12px;
  --density-row-px:   16px;
  --density-gap:      12px;
  --density-card-p:   16px;
  --density-fs:       0.92rem;

  /* Wave Y2 · Multi-tenant brand tokens. Defaults equal the existing amber
     palette so apex (no subdomain) visits look identical. /assets/js/brand-loader.js
     overrides these on :root when an org brand resolves. */
  --brand-primary:      var(--c-amber-500, #f59e0b);
  --brand-accent:       var(--c-amber-600, #d97706);
  --brand-display-name: "AI Kids Cafe";
}

/* Density: compact mode — set via Density.set('compact') in ui.js, persisted to localStorage. */
html[data-density='compact'] {
  --density-row-py:  6px;
  --density-row-px:  10px;
  --density-gap:     8px;
  --density-card-p:  12px;
  --density-fs:      0.86rem;
}

/* Accessibility · respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* Skeleton loader · drop in instead of "Loading…" text */
.skel {
  background: linear-gradient(90deg, #eef0f5 0%, #f7f8fc 50%, #eef0f5 100%);
  background-size: 200% 100%;
  animation: skel-shimmer 1400ms infinite linear;
  border-radius: var(--r-2, 8px);
  display: inline-block;
}
.skel--block { display: block; }
.skel--line { height: 14px; margin-bottom: 8px; }
.skel--title { height: 22px; width: 60%; margin-bottom: 16px; }
.skel--card {
  height: 80px; width: 100%; margin-bottom: 12px; border-radius: var(--r-3, 12px);
}
@keyframes skel-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}
.skel-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3, 12px); margin-top: var(--sp-3, 12px);
}
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
}

/* Shared button utilities · token-driven · usable from any page */
.btn-sm {
  padding: 6px 12px !important;
  font-size: var(--type-sm, 0.82rem) !important;
}
.btn-xl {
  padding: 14px 28px !important;
  font-size: var(--type-md, 1rem) !important;
}

/* Status pills · semantic */
.status-pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: var(--r-pill, 999px);
  font-family: var(--font-display, system-ui);
  font-weight: 700;
  font-size: var(--type-xs, 0.72rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.status-pill.paid,
.status-pill.attended      { background: #dcfce7; color: #14532d; }
.status-pill.welcomed,
.status-pill.demo          { background: var(--c-amber-50, #fef3c7); color: var(--c-amber-700, #b45309); }
.status-pill.refunded,
.status-pill.cancelled,
.status-pill.failed        { background: #fee2e2; color: #991b1b; }

/* Card utility · used by dashboard sections */
.dash-card {
  background: var(--c-bg-card, #fff);
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: var(--r-3, 12px);
  padding: var(--sp-4, 16px);
  margin-bottom: var(--sp-4, 16px);
}
.dash-card__head {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: var(--sp-3, 12px); margin-bottom: var(--sp-3, 12px);
  border-bottom: 1px solid var(--c-border, #e2e8f0);
}
.dash-card__head h2 {
  margin: 0;
  font-family: var(--font-display, system-ui);
  font-weight: 800;
  font-size: var(--type-md, 1rem);
}

/* KPI cards · used by Dashboard + drilldowns */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: var(--sp-3, 12px);
  margin-bottom: var(--sp-4, 16px);
}
.kpi-grid--compact { gap: var(--sp-2, 8px); }
.kpi-grid--compact .kpi-card { padding: var(--sp-3, 12px); }
.kpi-card {
  background: var(--c-bg-card, #fff);
  border: 1px solid var(--c-border, #e2e8f0);
  border-radius: var(--r-3, 12px);
  padding: var(--sp-4, 16px);
  display: flex; flex-direction: column; gap: 4px;
}
.kpi-label {
  font-size: var(--type-xs, 0.72rem);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--c-text-muted, #64748b);
  font-weight: 600;
}
.kpi-value {
  font-family: var(--font-display, system-ui);
  font-weight: 800;
  font-size: var(--type-xl, 1.4rem);
  color: var(--c-text-strong, #0f172a);
}
.kpi-foot { font-size: var(--type-xs, 0.72rem); }

/* =====================================================================
 * Wave Q1 · Functional Dark Mode
 *
 * Two attribute hooks on <html>, written by /assets/js/theme.js BEFORE paint:
 *   [data-theme="dark"]   → always dark
 *   [data-theme="auto"]   → follow prefers-color-scheme
 *   [data-theme="light"]  → always light (default — no overrides needed)
 *
 * We override the same semantic tokens that admin.css, classroom.css, and
 * styles.css already consume, so most surfaces adapt automatically without
 * per-component changes. Hue tints get darker, lower-saturation variants so
 * contrast remains WCAG AA against the dark surface.
 *
 * Tokens defined in styles.css (--ink-*, --bg-base, --bg-warm, --white, --border)
 * are remapped here too — those are used heavily on marketing pages.
 * ===================================================================== */

:root[data-theme="dark"] {
  /* Semantic text/bg — flip the script. */
  --c-text-strong: #f8fafc;
  --c-text:        #e2e8f0;
  --c-text-soft:   #cbd5e1;
  --c-text-muted:  #94a3b8;
  --c-text-on-dark: #f8fafc;

  --c-bg:        #0b1220;
  --c-bg-card:   #1e293b;
  --c-bg-soft:   #111827;
  --c-bg-dark:   #020617;

  --c-bg-warm:      #0f172a;
  --c-bg-warm-soft: #131c2e;

  --c-border:        #334155;
  --c-border-strong: #475569;

  /* Surface shadows lose visibility on dark — deepen them. */
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.45);
  --shadow-sm: 0 2px 8px -2px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.35);
  --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.65), 0 2px 6px -2px rgba(0,0,0,0.4);
  --shadow-lg: 0 24px 60px -16px rgba(0,0,0,0.8);

  /* Marketing palette overrides (defined in styles.css :root). */
  --ink-900: #f8fafc;
  --ink-800: #e2e8f0;
  --ink-700: #cbd5e1;
  --ink-600: #94a3b8;
  --ink-500: #94a3b8;
  --ink-400: #64748b;
  --ink-300: #475569;
  --ink-200: #334155;

  --white:    #1e293b;     /* "card surface" — many cards say background:var(--white) */
  --bg-base:  #0b1220;
  --bg-warm:  #0f172a;
  --border:   #334155;

  --cream-50:  #131c2e;
  --cream-100: #1e293b;
  --cream-200: #243046;

  /* Hue tokens — darker -50 tints; brighter -500 accents; lighter -700 text. */
  --hue-dashboard-50:  #0c1c2a;  --hue-dashboard-500:  #38bdf8;  --hue-dashboard-700:  #7dd3fc;
  --hue-inbox-50:      #2a1c05;  --hue-inbox-500:      #fbbf24;  --hue-inbox-700:      #fcd34d;
  --hue-people-50:     #1e1438;  --hue-people-500:     #a78bfa;  --hue-people-700:     #c4b5fd;
  --hue-programs-50:   #052e1f;  --hue-programs-500:   #34d399;  --hue-programs-700:   #6ee7b7;
  --hue-messaging-50:  #0b1e3a;  --hue-messaging-500:  #60a5fa;  --hue-messaging-700:  #93c5fd;
  --hue-money-50:      #062014;  --hue-money-500:      #4ade80;  --hue-money-700:      #86efac;
  --hue-content-50:    #2a0b13;  --hue-content-500:    #fb7185;  --hue-content-700:    #fda4af;
  --hue-reports-50:    #042822;  --hue-reports-500:    #2dd4bf;  --hue-reports-700:    #5eead4;
  --hue-observability-50: #2a1607; --hue-observability-500: #fb923c; --hue-observability-700: #fdba74;
  --hue-settings-50:   #131c2e;  --hue-settings-500:   #94a3b8;  --hue-settings-700:   #cbd5e1;

  /* Status pills are intentionally vivid — leave their bg as-is for instant
     recognition; only soften them slightly in dark mode. */
  --c-amber-50:  #2a1c05;
  --c-amber-100: #3a2807;
  --c-amber-500: #fbbf24;
  --c-amber-600: #fcd34d;
  --c-amber-700: #fde68a;

  --c-good:      #34d399;
  --c-warn:      #fbbf24;
  --c-bad:       #f87171;
  --c-info:      #60a5fa;

  /* Skeleton shimmer needs new mid-tones. */
  color-scheme: dark;
}

/* prefers-color-scheme follow when theme=auto. Inherits everything from the
   dark block via attribute selector. We don't use light-dark() because Safari
   ≤ 16 support is incomplete and FOUC matters more than brevity here. */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --c-text-strong: #f8fafc;
    --c-text:        #e2e8f0;
    --c-text-soft:   #cbd5e1;
    --c-text-muted:  #94a3b8;
    --c-text-on-dark: #f8fafc;

    --c-bg:        #0b1220;
    --c-bg-card:   #1e293b;
    --c-bg-soft:   #111827;
    --c-bg-dark:   #020617;

    --c-bg-warm:      #0f172a;
    --c-bg-warm-soft: #131c2e;

    --c-border:        #334155;
    --c-border-strong: #475569;

    --shadow-xs: 0 1px 2px rgba(0,0,0,0.45);
    --shadow-sm: 0 2px 8px -2px rgba(0,0,0,0.55), 0 1px 2px rgba(0,0,0,0.35);
    --shadow-md: 0 8px 24px -8px rgba(0,0,0,0.65), 0 2px 6px -2px rgba(0,0,0,0.4);
    --shadow-lg: 0 24px 60px -16px rgba(0,0,0,0.8);

    --ink-900: #f8fafc;
    --ink-800: #e2e8f0;
    --ink-700: #cbd5e1;
    --ink-600: #94a3b8;
    --ink-500: #94a3b8;
    --ink-400: #64748b;
    --ink-300: #475569;
    --ink-200: #334155;

    --white:    #1e293b;
    --bg-base:  #0b1220;
    --bg-warm:  #0f172a;
    --border:   #334155;

    --cream-50:  #131c2e;
    --cream-100: #1e293b;
    --cream-200: #243046;

    --hue-dashboard-50:  #0c1c2a;  --hue-dashboard-500:  #38bdf8;  --hue-dashboard-700:  #7dd3fc;
    --hue-inbox-50:      #2a1c05;  --hue-inbox-500:      #fbbf24;  --hue-inbox-700:      #fcd34d;
    --hue-people-50:     #1e1438;  --hue-people-500:     #a78bfa;  --hue-people-700:     #c4b5fd;
    --hue-programs-50:   #052e1f;  --hue-programs-500:   #34d399;  --hue-programs-700:   #6ee7b7;
    --hue-messaging-50:  #0b1e3a;  --hue-messaging-500:  #60a5fa;  --hue-messaging-700:  #93c5fd;
    --hue-money-50:      #062014;  --hue-money-500:      #4ade80;  --hue-money-700:      #86efac;
    --hue-content-50:    #2a0b13;  --hue-content-500:    #fb7185;  --hue-content-700:    #fda4af;
    --hue-reports-50:    #042822;  --hue-reports-500:    #2dd4bf;  --hue-reports-700:    #5eead4;
    --hue-observability-50: #2a1607; --hue-observability-500: #fb923c; --hue-observability-700: #fdba74;
    --hue-settings-50:   #131c2e;  --hue-settings-500:   #94a3b8;  --hue-settings-700:   #cbd5e1;

    --c-amber-50:  #2a1c05;
    --c-amber-100: #3a2807;

    --c-good:      #34d399;
    --c-warn:      #fbbf24;
    --c-bad:       #f87171;
    --c-info:      #60a5fa;

    color-scheme: dark;
  }
}

/* Skeleton loader · darker shimmer to stay visible on dark surfaces. */
:root[data-theme="dark"] .skel,
:root[data-theme="auto"] .skel {
  background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%);
}
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] .skel {
    background: linear-gradient(90deg, #1e293b 0%, #334155 50%, #1e293b 100%);
  }
}

/* Status pills · keep their bright accent foreground readable. */
:root[data-theme="dark"] .status-pill.paid,
:root[data-theme="dark"] .status-pill.attended {
  background: #052e1f; color: #86efac;
}
:root[data-theme="dark"] .status-pill.welcomed,
:root[data-theme="dark"] .status-pill.demo {
  background: #2a1c05; color: #fcd34d;
}
:root[data-theme="dark"] .status-pill.refunded,
:root[data-theme="dark"] .status-pill.cancelled,
:root[data-theme="dark"] .status-pill.failed {
  background: #2a0b13; color: #fda4af;
}