/* ============================================================
   MHD Detailing — Radii, spacing & elevation tokens
   Cards are OUTLINED (1px border), not shadowed. Radii are
   generous: 12px on controls, 16px on cards & images.
   ============================================================ */
:root {
  /* --- Corner radii --- */
  --radius-button: 0.75rem;   /* 12px — buttons */
  --radius-badge: 0.375rem;   /* 6px  — tags / badges */
  --radius-input: 0.75rem;    /* 12px — inputs, selects, textareas */
  --radius-checkbox: 0.25rem; /* 4px  — checkbox */
  --radius-card: 1rem;        /* 16px — cards */
  --radius-image: 1rem;       /* 16px — images */
  --radius-carousel: 0.5rem;  /* 8px  — carousel viewport */
  --radius-full: 9999px;      /* pills / avatars */

  /* --- Borders --- */
  --border-width: 1px;
  --border-width-card: 1px;
  --border-width-divider: 1px;

  /* --- Spacing scale (rem) --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-28: 7rem;
  --space-30: 7.5rem;

  /* --- Section rhythm (vertical padding per breakpoint) --- */
  --section-py: var(--space-16);     /* mobile  */
  --section-py-md: var(--space-24);  /* tablet  */
  --section-py-lg: var(--space-28);  /* desktop */

  /* --- Layout --- */
  --page-gutter: 5%;                 /* horizontal page inset */
  --container-max: 80rem;            /* 1280px content cap */

  /* --- Elevation: this brand uses outline, not shadow.
         These soft shadows are reserved for floating UI only
         (dropdowns, dialogs, toasts). --- */
  --shadow-sm: 0 1px 2px rgb(3 3 3 / 0.20);
  --shadow-md: 0 8px 24px rgb(3 3 3 / 0.28);
  --shadow-lg: 0 24px 60px rgb(3 3 3 / 0.40);

  /* --- Motion (source uses calm 200ms ease-in-out) --- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); /* @kind other */
  --duration-fast: 150ms; /* @kind other */
  --duration-base: 200ms; /* @kind other */
}