/* -------------------------------------------------------- */
/* 🔹 App Theme                                             */
/* -------------------------------------------------------- */
/* Spacing, radius, animation and layout                     */
/* Mirrors app_theme.dart                                    */


/* -------------------------------------------------------- */
/* 🔹 Radius                                                */
/* -------------------------------------------------------- */

:root {
  --radius: 12px;
  --radius-small: 6px;
  --radius-pill: 999px;
}


/* -------------------------------------------------------- */
/* 🔹 Animation                                             */
/* -------------------------------------------------------- */

:root {
  --animation-fast: 200ms;
  --animation-curve: cubic-bezier(0.4, 0, 0.2, 1);
}


/* -------------------------------------------------------- */
/* 🔹 Spacing                                               */
/* -------------------------------------------------------- */

:root {
  --space-xxs: 2px;
  --space-xs: 4px;
  --space-s: 8px;
  --space-m: 12px;
  --space-l: 16px;
  --space-lxl: 20px;
  --space-xl: 24px;
  --space-xxl: 28px;
  --space-xxxl: 32px;
}


/* -------------------------------------------------------- */
/* 🔹 Semantic Spacing                                      */
/* -------------------------------------------------------- */

:root {
  --spacing-between-cards: var(--space-m);

  /* Website-specific — sections need far more air than a phone screen */
  --website-section-spacing: 64px;
}


/* -------------------------------------------------------- */
/* 🔹 Padding                                               */
/* -------------------------------------------------------- */

:root {
  --card-padding: var(--space-l);
}


/* -------------------------------------------------------- */
/* 🔹 Content Constraints                                   */
/* -------------------------------------------------------- */

:root {
  --max-content-width: 1080px;
  --max-content-width-narrow: 680px;
}