/*
 * Jengu Platform Design Tokens
 *
 * Source of truth for the unified design system across cloud UI and the
 * static documentation site. Every page in either context references these
 * tokens via CSS variables.
 *
 * Tracked in jengu-platform#8 — phase 0a (token extraction, this file)
 * is shipped now; phase 0b (apply across the core shell) and phase 0c
 * (full page-by-page refactor) are tracked subtasks of the same issue.
 *
 * Tokens were extracted from the documentation HTML pages
 * (jengu-platform-overview.html, capability-status.html, etc.) which
 * established the look this design system unifies around.
 */

:root {
  /* ── Surfaces ─────────────────────────────────────── */
  --jengu-bg:           #faf9f6;   /* warm off-white page background */
  --jengu-surface:      #ffffff;   /* card / panel / modal surface */
  --jengu-surface-alt:  #f3f1ec;   /* subtle alt surface for headers, code */

  /* ── Borders ──────────────────────────────────────── */
  --jengu-border:        #e6e2d8;  /* default border tone */
  --jengu-border-strong: #cdc6b6;  /* hover / focus border tone */

  /* ── Text ─────────────────────────────────────────── */
  --jengu-text:        #1c1c1a;    /* primary body text */
  --jengu-text-muted:  #5a5953;    /* secondary text, captions */
  --jengu-text-on-dark: #fefdf8;   /* text used on dark backgrounds */

  /* ── Accent (deep teal) ───────────────────────────── */
  --jengu-accent:       #0e4f63;
  --jengu-accent-light: #2c7896;
  --jengu-accent-bg:    #e3eef2;   /* tinted background for accent regions */

  /* ── Health / status colors (used in capability status report) ── */
  --jengu-health-good:    #2d7a3d;
  --jengu-health-partial: #b88c1e;
  --jengu-health-gap:     #b8612b;
  --jengu-health-bad:     #b22d2d;
  --jengu-health-pending: #5a5953;

  /* ── Typography ───────────────────────────────────── */
  --jengu-font-serif: "Source Serif 4", "Source Serif Pro",
                       ui-serif, Georgia, "Times New Roman", serif;
  --jengu-font-sans:  "Inter", ui-sans-serif, system-ui, -apple-system,
                       "Segoe UI", sans-serif;
  --jengu-font-mono:  ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── Type scale (rems for accessibility) ───────────── */
  --jengu-text-xs:  0.75rem;       /* 12px */
  --jengu-text-sm:  0.875rem;      /* 14px */
  --jengu-text-base:1rem;          /* 16px */
  --jengu-text-lg:  1.0625rem;     /* 17px */
  --jengu-text-xl:  1.5rem;        /* 24px */
  --jengu-text-2xl: 1.875rem;      /* 30px */
  --jengu-text-3xl: 2.25rem;       /* 36px */

  /* ── Spacing scale (4-based) ──────────────────────── */
  --jengu-space-1:  0.25rem;
  --jengu-space-2:  0.5rem;
  --jengu-space-3:  0.75rem;
  --jengu-space-4:  1rem;
  --jengu-space-6:  1.5rem;
  --jengu-space-8:  2rem;
  --jengu-space-12: 3rem;
  --jengu-space-16: 4rem;

  /* ── Radii ────────────────────────────────────────── */
  --jengu-radius-sm: 4px;
  --jengu-radius:    8px;
  --jengu-radius-lg: 14px;
  --jengu-radius-xl: 999px;        /* pill */

  /* ── Shadows ──────────────────────────────────────── */
  --jengu-shadow-soft: 0 1px 2px rgba(20,20,18,.04),
                        0 4px 12px rgba(20,20,18,.04);
  --jengu-shadow-deep: 0 2px 4px rgba(20,20,18,.05),
                        0 12px 32px rgba(20,20,18,.08);

  /* ── Transition ───────────────────────────────────── */
  --jengu-transition: 150ms ease;
}

/* ── Body baseline — applied unless a page explicitly opts out ──────── */
body {
  background: var(--jengu-bg);
  color: var(--jengu-text);
  font-family: var(--jengu-font-serif);
  font-size: var(--jengu-text-lg);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--jengu-font-sans);
  letter-spacing: -0.01em;
  line-height: 1.25;
  font-weight: 600;
}

a {
  color: var(--jengu-accent);
  text-decoration: underline;
  text-decoration-color: rgba(14, 79, 99, 0.25);
  text-underline-offset: 3px;
  transition: color var(--jengu-transition),
              text-decoration-color var(--jengu-transition);
}
a:hover {
  color: var(--jengu-accent-light);
  text-decoration-color: var(--jengu-accent-light);
}

/* ── Health-color utility classes (for status reports etc) ──────────── */
.jengu-health-good    { color: var(--jengu-health-good); }
.jengu-health-partial { color: var(--jengu-health-partial); }
.jengu-health-gap     { color: var(--jengu-health-gap); }
.jengu-health-bad     { color: var(--jengu-health-bad); }
.jengu-health-pending { color: var(--jengu-health-pending); }

/* ── Responsive sidebar / content wrapper ────────────────────────────────────
 * The shell's sidebar (admin + docs) and the content-wrapper that offsets it
 * are normally driven by Alpine state (expanded vs collapsed). On narrow
 * viewports we override that state so the content area always has room to
 * breathe — fixed 14rem padding-left was leaving < 280px for content on a
 * 500px-wide window. Below md (768px) we force icon-only; below sm (480px)
 * we hide the sidebar entirely and let content take the full width.
 */
@media (max-width: 767px) {
    .app-sidebar { width: 4rem !important; }
    .app-content-wrapper { padding-left: 4rem !important; }
    /* Alpine still thinks the sidebar is expanded (its state is per-user
     * preference, not viewport-derived). At forced 4rem width every label
     * span gets clipped — hide them and force the section dividers to show
     * (Alpine has them x-show="!expanded"). The toggle button stays visible
     * so the collapse is reversible; only its label hides at this width. */
    .app-sidebar nav span { display: none !important; }
    .app-sidebar nav > div > div.border-t { display: block !important; }
    .app-sidebar > div.border-t > button > span { display: none !important; }
    .app-sidebar > div.border-t > button { justify-content: center !important; }
}
@media (max-width: 479px) {
    .app-sidebar { display: none !important; }
    .app-content-wrapper { padding-left: 0 !important; }
}