/* ============================================================
   SalonFlow — Spacing, radii, shadows
   Mirrors SwiftUI padding/cornerRadius/shadow values used across
   the app (.salonCard, list cards, chips, sidebar tiles, buttons).
   ============================================================ */

:root {
  /* ---- Spacing scale (SwiftUI spacing/padding values) ---- */
  --space-2:  2px;
  --space-4:  4px;
  --space-6:  6px;
  --space-8:  8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-14: 14px;   /* common grid gap */
  --space-16: 16px;   /* default card padding */
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;   /* page padding */
  --space-28: 28px;
  --space-32: 32px;
  --space-40: 40px;

  /* ---- Corner radii (cornerRadius: …, style: .continuous) ---- */
  --r-tile:   8px;    /* sidebar icon tiles */
  --r-chip:   10px;   /* info-banner / inner task card */
  --r-field:  12px;   /* text fields */
  --r-button: 14px;   /* primary gradient button */
  --r-card:   14px;   /* list / feature cards (systemBackground) */
  --r-metric: 16px;   /* dashboard metric cards */
  --r-surface: 18px;  /* .salonCard default */
  --r-hero:   36px;   /* live-display gradient hero */
  --r-pill:   999px;  /* capsule chips, badges, section pills */
  --r-logo-ratio: 0.26; /* @kind other */

  /* ---- Shadows (restrained Apple elevation, not web drop shadows) ---- */
  /* .salonCard: hairline border + whisper shadow */
  --shadow-card:   0 2px 5px rgba(0, 0, 0, 0.04);
  /* list / feature cards */
  --shadow-list:   0 2px 6px rgba(0, 0, 0, 0.05);
  /* subtlest — resolved rows, pills */
  --shadow-subtle: 0 1px 4px rgba(0, 0, 0, 0.04);
  /* primary gradient button glow (violet) */
  --shadow-button: 0 4px 8px rgba(127, 50, 231, 0.30);
  /* logo mark drop glow */
  --shadow-logo:   0 8px 22px rgba(127, 50, 231, 0.42);
  /* live-display gradient hero glow */
  --shadow-hero:   0 18px 48px rgba(127, 50, 231, 0.55);

  /* Hairline card border */
  --border-hairline: 0.5px solid rgba(0, 0, 0, 0.04); /* @kind other */

  /* ---- Motion (easeOut, short) ---- */
  --ease-out: cubic-bezier(0.16, 0.84, 0.44, 1); /* @kind other */
  --dur-press: 0.12s; /* @kind other */
  --press-scale: 0.99; /* @kind other */
  --press-opacity: 0.85; /* @kind other */
}

/* ---- The canonical SalonFlow card surface (.salonCard equivalent) ---- */
.salon-card {
  background: var(--surface-card);
  border-radius: var(--r-surface);
  border: var(--border-hairline);
  box-shadow: var(--shadow-card);
  padding: var(--space-16);
}