/* ============================================================================
   Marija Deck — Spacing, Grid, Depth & Motion Tokens (Joycean)
   Van de Graaf page canon (2:3, 1:1:2:3 margins) = integritas/consonantia/
   claritas. Depth via a 1px gradient RIBBON, never drop-shadows. Epiphanic
   white space is a first-class element. Motion is subtle + reduced-motion safe.
   ========================================================================== */

:root {
  /* — 8px spacing scale — */
  --sp-1: 0.25rem;  /* 4 */
  --sp-2: 0.5rem;   /* 8 */
  --sp-3: 0.75rem;  /* 12 */
  --sp-4: 1rem;     /* 16 */
  --sp-5: 1.5rem;   /* 24 */
  --sp-6: 2rem;     /* 32 */
  --sp-7: 3rem;     /* 48 */
  --sp-8: 4rem;     /* 64 */
  --sp-9: 6rem;     /* 96 — epiphanic gap */
  --sp-10: 8rem;    /* 128 */

  /* — Van de Graaf canon (document page) — */
  --page-ratio: 0.6667;          /* 2:3 */
  --canon-margin-inner: 1;       /* 1 : 1 : 2 : 3 (inner:top:outer:bottom) */
  --canon-margin-top: 1;
  --canon-margin-outer: 2;
  --canon-margin-bottom: 3;
  --canon-unit: 2.25rem;         /* margin base unit */

  /* — Slide grid: 12 columns, generous epiphanic gutter — */
  --slide-cols: 12;
  --slide-gutter: var(--sp-5);
  --slide-margin: var(--sp-9);   /* the epiphanic frame */
  --slide-w: 1280px;             /* 16:9 master */
  --slide-h: 720px;

  /* — Radii (restrained; book corners are sharp) — */
  --radius-none: 0;
  --radius-sm: 2px;
  --radius-md: 4px;

  /* — Depth = the 1px gradient ribbon (NO drop-shadows) — */
  --ribbon-w: 1px;
  --ribbon: linear-gradient(120deg, var(--gold-500), var(--blue-600));
  --ribbon-soft: linear-gradient(120deg, var(--grey-300), var(--grey-200));
  /* apply via a wrapper-padding trick: background:var(--ribbon); padding:var(--ribbon-w) */

  /* — Motion (musical, restrained) — */
  --ease-quill: cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast: 160ms;
  --dur-base: 280ms;
  --dur-slow: 520ms;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-base: 0ms; --dur-slow: 0ms; }
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Ribbon utility — depth without shadow */
.ribbon {
  background: var(--ribbon);
  padding: var(--ribbon-w);
  border-radius: var(--radius-md);
}
.ribbon > * { background: var(--color-surface); border-radius: calc(var(--radius-md) - var(--ribbon-w)); }

/* The gold hairline rule */
.rule-gold { border: 0; height: var(--ribbon-w); background: var(--ribbon); }