/*
  PredictHIM — Canonical Design Token Layer
  ==========================================
  Single source of truth for all design primitives across the app.

  Usage:
    Flask templates:  imported via templates/base.html (loaded before inline styles)
    Flask templates:  keep page-level CSS aligned with these tokens

  Naming convention: --ph-<category>-<variant>
  All tokens are scoped to :root (dark-only app; no light-mode token layer needed).

  ── Cursor/Codex design targets ─────────────────────────────────────────────
    Minimal · dark · quiet technical interface
    No heavy shadows · no gradients · no marketing-style UI
    Geist + Geist Mono · flat surfaces · tight type
  ─────────────────────────────────────────────────────────────────────────────
*/

:root {

  /* ── Backgrounds ──────────────────────────────────────────────────────── */
  --ph-bg:               #0a0a0a;   /* page background */
  --ph-surface:          #121212;   /* card / panel surface */
  --ph-surface-elevated: #171717;   /* input / elevated surface */
  --ph-surface-overlay:  #1f1f1f;   /* overlay / deepest surface */

  /* ── Borders ──────────────────────────────────────────────────────────── */
  --ph-border-subtle:    #1f1f1f;   /* hairline dividers, ghost separators */
  --ph-border:           #262626;   /* default border — cards, inputs, rows */
  --ph-border-strong:    #333333;   /* strong border — focused states */

  /* ── Text ─────────────────────────────────────────────────────────────── */
  --ph-text-primary:     #f5f5f5;   /* headings, values, primary content */
  --ph-text-secondary:   #a3a3a3;   /* body copy, descriptions */
  --ph-text-muted:       #737373;   /* metadata, timestamps, placeholders */
  --ph-text-faint:       #525252;   /* labels at rest, section kickers */

  /* ── Accent / Status ─────────────────────────────────────────────────── */
  --ph-positive:         #22c55e;   /* success, healthy, active, CTA accent */
  --ph-positive-dim:     rgba(34, 197, 94, 0.10);
  --ph-positive-ring:    rgba(34, 197, 94, 0.20);

  --ph-warning:          #f59e0b;   /* warning, review-needed, amber states */
  --ph-warning-dim:      rgba(245, 158, 11, 0.10);

  --ph-danger:           #ef4444;   /* error, destructive, critical */
  --ph-danger-dim:       rgba(239, 68, 68, 0.10);

  --ph-info:             #3b82f6;   /* informational, neutral highlight */
  --ph-info-dim:         rgba(59, 130, 246, 0.10);

  /* ── Typography ───────────────────────────────────────────────────────── */
  --ph-font-sans:        'Geist', system-ui, sans-serif;
  --ph-font-mono:        'Geist Mono', monospace;

  /* Scale */
  --ph-text-display:     28px;    /* page title */
  --ph-text-section:     18px;    /* section heading */
  --ph-text-base:        14px;    /* body */
  --ph-text-small:       12px;    /* meta / timestamps */
  --ph-text-kicker:      10px;    /* mono uppercase eyebrow label */

  /* Weights */
  --ph-weight-normal:    400;
  --ph-weight-medium:    500;
  --ph-weight-semibold:  600;
  --ph-weight-bold:      700;

  /* Line heights */
  --ph-leading-tight:    1.1;     /* display headings */
  --ph-leading-normal:   1.6;     /* body copy */
  --ph-leading-relaxed:  1.65;    /* long-form descriptions */

  /* Letter spacing */
  --ph-tracking-display: -0.025em;  /* page titles */
  --ph-tracking-section: -0.015em;  /* section headings */
  --ph-tracking-kicker:   0.18em;   /* mono uppercase kicker */

  /* ── Spacing (4px base grid) ──────────────────────────────────────────── */
  --ph-space-1:    4px;
  --ph-space-2:    8px;
  --ph-space-3:   12px;
  --ph-space-4:   16px;
  --ph-space-5:   20px;
  --ph-space-6:   24px;
  --ph-space-8:   32px;
  --ph-space-10:  40px;
  --ph-space-12:  48px;
  --ph-space-14:  56px;

  /* ── Radius ───────────────────────────────────────────────────────────── */
  --ph-radius-sm:    4px;
  --ph-radius-md:    8px;
  --ph-radius-lg:   12px;
  --ph-radius-xl:   16px;
  --ph-radius-2xl:  24px;
  --ph-radius-pill: 999px;

  /* ── Transitions ──────────────────────────────────────────────────────── */
  --ph-duration-fast:   0.12s;
  --ph-duration-base:   0.20s;
  --ph-ease-default:    ease;
  --ph-transition-base: var(--ph-duration-base) var(--ph-ease-default);

}

/* ── Layout rhythm ────────────────────────────────────────────────────────── */
/*
  In Flask, outer padding comes from .lv-content (40px top / 32px sides).
  These classes only constrain content width and center within that padding.

  ph-page    : data / list views (overview, intelligence, audit, studio) — max-width 1200px
  ph-focused : focused / execution views (single-record, flows) — max-width 840px
*/
.ph-page {
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.ph-focused {
  max-width: 840px;
  margin-left: auto;
  margin-right: auto;
}