/*
 * tokens.css — design tokens + global element resets.
 *
 * Source of truth for colours, spacing, radii, shadows, typography.
 * Every other stylesheet should reference these via var(--st-*).
 *
 * v13.8.10: extracted from lib/view.php (formerly inline <style>) so
 * the redesign work in v13.9.0 has a single, navigable file to edit
 * instead of a 1500-line PHP-embedded stylesheet.
 *
 * v13.9.0: extended with proper scales (spacing, type, shadow,
 * transitions, layout dimensions). All v13.8.10 tokens preserved
 * as-is for back-compat; new tokens are additive. Existing pages
 * render unchanged.
 */
:root {
  /* ─── Brand ──────────────────────────────────────────────────── */
  --st-primary:          #0F5E5A;
  --st-primary-hover:    #0B4744;
  --st-primary-soft:     #E6F0EF;

  /* ─── Surfaces ───────────────────────────────────────────────── */
  --st-bg:               #FFFFFF;
  --st-bg-soft:          #F7F7F8;
  --st-bg-card:          #FFFFFF;
  --st-bg-sidebar:       #FAFAF9;        /* v13.9: sidebar background */
  --st-bg-elevated:      #FFFFFF;        /* v13.9: alias for cards */

  /* ─── Lines ──────────────────────────────────────────────────── */
  --st-border:           #E5E7EB;
  --st-border-strong:    #D1D5DB;
  --st-border-soft:      rgba(17, 24, 39, 0.06);

  /* ─── Text ───────────────────────────────────────────────────── */
  --st-text:             #111827;
  --st-text-muted:       #6B7280;
  --st-text-soft:        #9CA3AF;

  /* ─── State ──────────────────────────────────────────────────── */
  --st-danger:           #B91C1C;
  --st-danger-soft:      #FEE2E2;
  --st-warn:             #B45309;
  --st-warn-soft:        #FEF3C7;
  --st-ok:               #047857;
  --st-ok-soft:          #D1FAE5;

  /* ─── Geometry: radii ────────────────────────────────────────── */
  --st-radius-pill:      9999px;
  --st-radius:           12px;
  --st-radius-sm:        8px;
  --st-radius-lg:        16px;
  --st-radius-xl:        20px;

  /* ─── Geometry: shadows ──────────────────────────────────────── */
  /* v13.9 introduces layered card shadows — soft tonal lift instead
     of hard borders. Linear / Vercel / Notion technique. */
  --st-shadow-sm:        0 1px 2px rgba(17, 24, 39, 0.04);
  --st-shadow:           0 4px 12px rgba(17, 24, 39, 0.06);
  --st-shadow-card:      0 1px 3px rgba(17, 24, 39, 0.04),
                         0 1px 2px rgba(17, 24, 39, 0.06);
  --st-shadow-lift:      0 4px 12px rgba(17, 24, 39, 0.08),
                         0 2px 4px rgba(17, 24, 39, 0.04);
  --st-shadow-popover:   0 8px 24px rgba(17, 24, 39, 0.12);
  --st-shadow-modal:     0 24px 48px rgba(17, 24, 39, 0.16),
                         0 12px 24px rgba(17, 24, 39, 0.08);

  /* ─── Geometry: spacing ──────────────────────────────────────── */
  --st-space-0:          0;
  --st-space-1:          0.25rem;
  --st-space-2:          0.5rem;
  --st-space-3:          0.75rem;
  --st-space-4:          1rem;
  --st-space-5:          1.25rem;
  --st-space-6:          1.5rem;
  --st-space-8:          2rem;
  --st-space-10:         2.5rem;
  --st-space-12:         3rem;

  /* ─── Typography: font ───────────────────────────────────────── */
  --st-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
             Arial, "Noto Sans", system-ui, sans-serif;
  --st-font-mono: "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* ─── Typography: scale ──────────────────────────────────────── */
  --st-text-xs:          0.75rem;
  --st-text-sm:          0.8125rem;
  --st-text-base:        0.9375rem;
  --st-text-md:          1rem;
  --st-text-lg:          1.125rem;
  --st-text-xl:          1.25rem;
  --st-text-2xl:         1.5rem;
  --st-text-3xl:         1.875rem;
  --st-text-4xl:         2.25rem;

  /* ─── Typography: weights + leading ──────────────────────────── */
  --st-weight-normal:    400;
  --st-weight-medium:    500;
  --st-weight-semi:      600;
  --st-weight-bold:      700;
  --st-leading-tight:    1.2;
  --st-leading-snug:     1.4;
  --st-leading-normal:   1.5;
  --st-leading-relaxed:  1.65;

  /* ─── Motion ─────────────────────────────────────────────────── */
  --st-ease:             cubic-bezier(0.2, 0.9, 0.3, 1);
  --st-ease-out:         cubic-bezier(0, 0, 0.2, 1);
  --st-duration-fast:    120ms;
  --st-duration:         180ms;
  --st-duration-slow:    240ms;

  /* ─── Layout: chrome dimensions ──────────────────────────────── */
  --st-sidebar-w:           240px;
  --st-sidebar-w-collapsed: 64px;
  --st-mobile-tab-h:        56px;
  --st-topbar-h:            60px;
}

* { box-sizing: border-box; }
html, body { background: var(--st-bg); }
body {
  font-family: var(--st-font);
  font-size: var(--st-text-base);
  color: var(--st-text);
  line-height: var(--st-leading-normal);
  -webkit-font-smoothing: antialiased;
}

/* Sensible heading defaults that don't fight with Tailwind utilities */
h1, h2, h3, h4 {
  color: var(--st-text);
  letter-spacing: -0.01em;
  line-height: var(--st-leading-tight);
}