/* ─────────────────────────────────────────────────────────────
   Levanta Paid Placements — Design Tokens
   Single source of truth for visual values. Authored to match
   design-system/tokens/*.md. Don't inline raw values in screens.
   ───────────────────────────────────────────────────────────── */

:root {
  /* ── Color: Surfaces ─────────────────────────────────────── */
  --color-surface-page: #F5F5F5;
  --color-surface-raised: #FFFFFF;
  --color-surface-sunken: #FAFAFA;
  --color-surface-brand: #0A2105;
  --color-surface-brand-gradient: linear-gradient(180deg, #3D784F 0%, #2D5542 100%);

  /* ── Color: Ink ──────────────────────────────────────────── */
  --color-ink-default: #0A0A0A;
  --color-ink-muted: #525252;
  --color-ink-subtle: #737373;
  --color-ink-inverse: #FFFFFF;
  --color-ink-inverse-muted: rgba(255, 255, 255, 0.7);

  /* ── Color: Borders ──────────────────────────────────────── */
  --color-border-default: #E5E5E5;
  --color-border-strong: #D4D4D4;
  --color-border-brand: rgba(255, 255, 255, 0.1);

  /* ── Color: Brand ramp ───────────────────────────────────── */
  --color-brand-50: #F0F7F2;
  --color-brand-100: #D7E8DD;
  --color-brand-500: #3D784F;
  --color-brand-700: #2D5542;
  --color-brand-900: #15321F;
  --color-brand-950: #0A2105;

  /* ── Color: Status ───────────────────────────────────────── */
  --color-status-success: #16A34A;
  --color-status-success-soft: #DCFCE7;
  --color-status-warning: #CA8A04;
  --color-status-warning-soft: #FEF9C3;
  --color-status-warning-tint: #FDE68A;
  --color-status-danger: #DC2626;
  --color-status-danger-soft: #FEE2E2;
  --color-status-danger-tint: #FECACA;
  --color-status-info: #2563EB;
  --color-status-info-soft: #DBEAFE;

  /* ── Color: Tooltip ──────────────────────────────────────── */
  --color-tooltip-surface: #12182D;
  --color-tooltip-ink: #FFFFFF;

  /* ── Typography: Family ──────────────────────────────────── */
  --font-family-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-family-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* ── Typography: Weights ─────────────────────────────────── */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;

  /* ── Typography: Scale (size / line-height) ──────────────── */
  --type-display-size: 36px;        --type-display-leading: 44px;
  --type-heading-lg-size: 28px;     --type-heading-lg-leading: 36px;
  --type-heading-md-size: 22px;     --type-heading-md-leading: 30px;
  --type-heading-sm-size: 18px;     --type-heading-sm-leading: 26px;
  --type-body-lg-size: 16px;        --type-body-lg-leading: 24px;
  --type-body-md-size: 14px;        --type-body-md-leading: 20px;
  --type-body-sm-size: 13px;        --type-body-sm-leading: 18px;
  --type-label-md-size: 14px;       --type-label-md-leading: 20px;
  --type-label-sm-size: 12px;       --type-label-sm-leading: 16px;
  --type-mono-sm-size: 13px;        --type-mono-sm-leading: 18px;

  /* ── Typography: Tracking ────────────────────────────────── */
  --font-tracking-tight: -0.01em;
  --font-tracking-normal: 0;
  --font-tracking-wide: 0.04em;

  /* ── Spacing ─────────────────────────────────────────────── */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-24: 96px;

  /* ── Density (table/list row vertical padding) ───────────── */
  --density-comfortable: 16px;
  --density-standard: 12px;
  --density-compact: 8px;

  /* ── Container widths ────────────────────────────────────── */
  --container-narrow: 640px;
  --container-default: 1024px;
  --container-wide: 1280px;

  /* ── Radius ──────────────────────────────────────────────── */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ── Elevation ───────────────────────────────────────────── */
  --elevation-xs: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --elevation-sm: 0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  --elevation-md: 0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --elevation-lg: 0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* ── Motion (used by components.css) ─────────────────────── */
  --motion-fast: 120ms;
  --motion-base: 180ms;
  --motion-slow: 240ms;
  --motion-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

  /* ── Focus ring (a11y) ───────────────────────────────────── */
  --focus-ring-color: var(--color-brand-700);
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
}