/**
 * CloudOpsGPT design tokens — UI-1C.1
 *
 * CANONICAL SOURCE for Website + Portal + Admin.
 * Runtime is NOT connected to this file.
 *
 * Scope: Website · Customer Portal · Admin Control Plane only.
 * Values: docs/UI-1-IMPLEMENTATION-BLUEPRINT.md (UI-1B approved).
 *
 * Do not invent parallel token systems. Sync Admin copies via:
 *   Website/frontend/scripts/sync-cog-tokens.sh
 */

:root {
  /* ── Brand ─────────────────────────────────────────────── */
  --cog-brand: #22d3ee;
  --cog-brand-hover: #67e8f9;
  --cog-brand-muted: rgba(34, 211, 238, 0.12);

  /* ── Neutrals (ops / Portal default) ───────────────────── */
  --cog-bg: #0b0f14;
  --cog-bg-marketing: #0f172a;
  --cog-bg-admin: #020617;
  --cog-surface: #111827;
  --cog-surface-elevated: #1e293b;
  --cog-border: #1e293b;
  --cog-border-strong: #334155;
  --cog-text: #e2e8f0;
  --cog-text-muted: #94a3b8;
  --cog-text-subtle: #64748b;

  /* ── Semantic ──────────────────────────────────────────── */
  --cog-success: #34d399;
  --cog-warning: #fbbf24;
  --cog-danger: #f87171;
  --cog-info: #22d3ee;

  /* ── Typography ────────────────────────────────────────── */
  --cog-font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --cog-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  --cog-text-body: 0.875rem;        /* 14px — Admin / marketing body */
  --cog-text-body-dense: 0.8125rem; /* 13px — Portal default */
  --cog-text-label: 0.625rem;       /* 10px */
  --cog-text-caption: 0.75rem;      /* 12px */
  --cog-text-button: 0.8125rem;     /* 13px */
  --cog-text-title: 1.25rem;        /* 20px */
  --cog-text-display: clamp(2rem, 4vw, 3.5rem);
  --cog-font-weight-label: 600;
  --cog-font-weight-button: 500;
  --cog-letter-spacing-label: 0.04em;
  --cog-line-height-body: 1.5;
  --cog-line-height-dense: 1.4;

  /* ── Spacing (4px grid; space-1 … space-12) ─────────────── */
  --cog-space-1: 4px;
  --cog-space-2: 8px;
  --cog-space-3: 12px;
  --cog-space-4: 16px;
  --cog-space-5: 20px;
  --cog-space-6: 24px;
  --cog-space-7: 28px;
  --cog-space-8: 32px;
  --cog-space-9: 36px;
  --cog-space-10: 40px;
  --cog-space-11: 44px;
  --cog-space-12: 48px;
  --cog-control-h: 32px;
  --cog-control-h-mobile: 40px;

  /* ── Radius ────────────────────────────────────────────── */
  --cog-radius-control: 8px;
  --cog-radius-chip: 6px;
  --cog-radius-card: 12px;
  --cog-radius-marketing: 16px;
  --cog-radius-marketing-lg: 24px;

  /* ── Elevation (border-first; restrained shadow) ───────── */
  --cog-elev-0: none;
  --cog-elev-1: 0 1px 2px rgba(0, 0, 0, 0.24);

  /* ── Motion ────────────────────────────────────────────── */
  --cog-duration: 150ms;
  --cog-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/**
 * Optional surface density hooks (consumed in UI-1C.2–C.4).
 * Linking this file alone must not restyle pages until classes use these vars.
 */
body.portal {
  --cog-density-body: var(--cog-text-body-dense);
  --cog-density-line-height: var(--cog-line-height-dense);
}

body.admin-cp {
  --cog-density-body: var(--cog-text-body);
  --cog-density-line-height: var(--cog-line-height-dense);
}