/* Dee's Portfolio — Spacing, radius & layout tokens */

:root {
  /* ---- Corner radii ----
     UI style is "elevate"; cards are "flat" with a generous 16px radius. */
  --radius-button: 0.75rem;   /* 12px */
  --radius-card: 1rem;        /* 16px */
  --radius-image: 1rem;       /* 16px */
  --radius-badge: 0.75rem;    /* 12px (tags read 6px in tokens; UI uses 12px) */
  --radius-tag: 0.375rem;     /* 6px */
  --radius-form: 0.75rem;     /* 12px */
  --radius-checkbox: 0.25rem; /* 4px */
  --radius-carousel: 0.5rem;  /* 8px */

  /* ---- Section rhythm ----
     Sections breathe with a 5% inline gutter and a 16/24/28 vertical scale. */
  --gutter-inline: 5%;
  --section-py-sm: 4rem;   /* 64px  — mobile */
  --section-py-md: 6rem;   /* 96px  — tablet */
  --section-py-lg: 7rem;   /* 112px — desktop */

  /* ---- Spacing scale (matches Relume's named steps) ---- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-18: 4.5rem;
  --space-20: 5rem;
  --space-30: 7.5rem;

  /* ---- Container widths ---- */
  --container-sm: 30rem;
  --container-md: 35rem;
  --container-lg: 48rem;
  --container-xl: 64rem;
  --container-xxl: 80rem;   /* page max-width */

  /* ---- Breakpoints (for reference) ---- */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 992px;

  /* ---- The "elevate" shadow system ----
     Buttons & raised surfaces stack inset highlights + a soft drop shadow.
     This is the brand's signature tactile look. */
  --shadow-elevate:
    inset 0 -2px 1px 0 var(--color-neutral-darkest-20),
    inset 0 32px 24px 0 var(--color-white-5),
    inset 0 1px 1px 1px var(--color-white-20),
    inset 0 0 0 1px var(--color-neutral-darkest-15),
    0 1px 2px 0 var(--color-neutral-darkest-5);
  --shadow-elevate-hover:
    inset 0 -2px 1px 0 var(--color-neutral-darkest-20),
    inset 0 32px 24px 0 var(--color-white-5),
    inset 0 1px 1px 1px var(--color-white-20),
    inset 0 0 0 1px var(--color-neutral-darkest-15),
    0 2px 4px 0 var(--color-neutral-darkest-5);
  --shadow-glass:
    0 1px 2px 0 var(--color-neutral-darkest-5),
    inset 0 -2px 1px 0 var(--color-neutral-darkest-5),
    inset 0 0 0 1px var(--color-neutral-darkest-5);
}