/* ==========================================================================
   Personal OS — Design Tokens
   Single source of truth for the visual language. Extracted from the
   original dashboard prototype's style guide (see docs/DESIGN-SYSTEM.md).
   Pages and components consume these variables; they never hardcode
   colors, fonts, radii, or shadows.
   ========================================================================== */

:root {
  /* ── Typography ──────────────────────────────────────────────────── */
  --font-body: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* ── Background layers ───────────────────────────────────────────── */
  --bg-page: #050506;
  --bg-wash-warm: rgba(224, 118, 88, 0.16);   /* orange radial, 82% / 14% */
  --bg-wash-cool: rgba(180, 180, 200, 0.06);  /* grey radial, 18% / 90% */

  /* ── Text ────────────────────────────────────────────────────────── */
  --text-primary: #fafafa;
  --text-secondary: #b8b6b0;
  --text-tertiary: #76746e;

  /* ── Semantic color roles ────────────────────────────────────────── */
  --success: #6be3a4;
  --success-glow: rgba(107, 227, 164, 0.4);
  --success-tint: rgba(107, 227, 164, 0.04);
  --warning: #f2c063;
  --warning-glow: rgba(242, 192, 99, 0.6);
  --warning-tint: rgba(242, 192, 99, 0.1);
  --danger: #ff6b6b;

  /* ── Surfaces (card "chassis") ───────────────────────────────────── */
  --surface-card: rgba(255, 255, 255, 0.04);
  --surface-row: rgba(255, 255, 255, 0.035);
  --surface-hairline: rgba(255, 255, 255, 0.06);
  --surface-border-strong: rgba(255, 255, 255, 0.1);
  --surface-checkbox-border: rgba(255, 255, 255, 0.18);
  --card-blur: blur(24px) saturate(1.2);
  --shadow-card: 0 12px 40px rgba(0, 0, 0, 0.45);

  /* ── Radii ───────────────────────────────────────────────────────── */
  --radius-card: 16px;
  --radius-control: 12px;
  --radius-pill: 999px;
  --radius-checkbox: 7px;

  /* ── Spacing / layout ────────────────────────────────────────────── */
  --card-padding: 20px;         /* spec range: 18–22px */
  --page-max-width: 1100px;

  /* ── Buttons ─────────────────────────────────────────────────────── */
  --btn-primary-bg: linear-gradient(180deg, #ffffff 0%, #e8e5dd 100%);
  --btn-primary-text: #0a0a0b;

  /* ── Headline gradient (masked into text) ────────────────────────── */
  --headline-gradient: linear-gradient(180deg, #ffffff 0%, #c7c4bc 120%);

  /* ── Motion ──────────────────────────────────────────────────────── */
  --ease-out-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-soft: cubic-bezier(0.55, 0, 0.55, 1);
  --ease-pop: cubic-bezier(0.34, 1.56, 0.64, 1);
}