/* ============================================================
   AURA — SPACING · RADIUS · ELEVATION
   Generous air, large radii, soft elevation. Every card should
   read as a single calm surface — never busy, never edgy.
   ============================================================ */

:root {
  /* ---- Spacing scale (generous; 4px base, but we live in the big end) ---- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 40px;
  --space-8: 56px;
  --space-9: 72px;

  --card-pad: var(--space-6);     /* interior padding (32px) — 40px was too tight for big numbers on narrow cards */
  --card-gap: var(--space-5);     /* gap between stacked timeline cards */
  --screen-pad: var(--space-8);   /* breathing room around the canvas */

  /* ---- Radius (large + soft) ---- */
  --radius-card: 34px;
  --radius-inner: 22px;   /* inset media inside a card */
  --radius-control: 18px;
  --radius-pill: 999px;

  /* ---- Elevation: soft, diffuse, never harsh ---- */
  --shadow-card:
    0 1px 0 0 var(--hairline) inset,
    0 18px 40px -24px oklch(0 0 0 / 0.55),
    0 4px 12px -8px oklch(0 0 0 / 0.45);
  --shadow-now:                                /* active "now" card lifts a touch more */
    0 1px 0 0 var(--hairline-strong) inset,
    0 28px 60px -28px oklch(0 0 0 / 0.62),
    0 8px 20px -10px oklch(0 0 0 / 0.50);

  /* ---- Glass (used sparingly on media-backed cards) ---- */
  --glass-blur: 20px;
  --glass-fill: oklch(0.22 0.013 265 / 0.55);
  --glass-border: oklch(1 0 0 / 0.10);

  /* ---- Active-card accent bloom ---- */
  --bloom: radial-gradient(120% 90% at 80% -10%, var(--accent-glow), transparent 60%);
}

/* Lighter, airier elevation for the light theme. */
[data-theme="light"] {
  --shadow-card:
    0 1px 0 0 oklch(1 0 0 / 0.6) inset,
    0 12px 30px -18px oklch(0.3 0.03 265 / 0.28),
    0 3px 10px -6px oklch(0.3 0.03 265 / 0.18);
  --shadow-now:
    0 1px 0 0 oklch(1 0 0 / 0.8) inset,
    0 22px 48px -22px oklch(0.3 0.03 265 / 0.32),
    0 6px 16px -8px oklch(0.3 0.03 265 / 0.22);
  --glass-fill: oklch(0.99 0.003 255 / 0.6);
  --glass-border: oklch(0.2 0.02 265 / 0.10);
}