/* ============================================================
   DANA DOGZ — shared foundation (tokens, reset, reveals)
   Used by all three design versions. Version-specific styling
   lives inside each HTML file.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* ---- Brand palette (purple + saffron on warm cream) ---- */
  --purple:        #6F66D6;   /* primary */
  --purple-600:    #5B52C4;
  --purple-700:    #463FA0;
  --purple-mid:    #9089E6;
  --purple-light:  #C7C2F2;
  --purple-pale:   #ECEAFB;
  --purple-wash:   #F5F4FD;
  --ink:           #221C52;   /* deepest — text + dark sections */
  --ink-soft:      #4A4385;

  --saffron:       #EE9B22;   /* accent */
  --saffron-600:   #D98512;
  --saffron-700:   #B26C0E;
  --saffron-pale:  #FBEBD2;
  --saffron-wash:  #FDF4E6;

  --cream:         #FDF9F3;
  --paper:         #FFFFFF;
  --warm-white:    #FBF7F1;
  --line:          #E7E2D8;
  --line-purple:   #DBD7F1;

  --muted:         #736CA3;

  --font-h: 'Secular One', system-ui, sans-serif;
  --font-b: 'Assistant', system-ui, sans-serif;

  --ease: cubic-bezier(.22,.61,.36,1);
  --maxw: 1240px;
}

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font-b);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; }
a { color: inherit; }
::selection { background: var(--saffron); color: #fff; }

h1, h2, h3, h4 { font-family: var(--font-h); font-weight: 400; line-height: 1.05; }

/* ---- focus + accessibility ---- */
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 3px; border-radius: 4px; }

/* ---- scroll reveal (shared, progressive enhancement) ----
   Hidden state only applies once JS adds html.anim, so content
   is always visible if JS is off or a capture tool skips scripts. */
html.anim .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); will-change: opacity, transform; }
html.anim .reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: .08s; }
.reveal.d2 { transition-delay: .16s; }
.reveal.d3 { transition-delay: .24s; }
.reveal.d4 { transition-delay: .32s; }
.reveal.d5 { transition-delay: .40s; }
@media (prefers-reduced-motion: reduce) {
  html.anim .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  html { scroll-behavior: auto; }
}

/* ---- image-slot polish ---- */
image-slot {
  --is-bg: var(--purple-wash);
  --is-fg: var(--muted);
  border-radius: inherit;
  font-family: var(--font-b);
}

/* ---- shared layout helper ---- */
.wrap { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 28px; }

/* ---- nice native scrollbar ---- */
@supports (scrollbar-width: thin) {
  body { scrollbar-width: thin; scrollbar-color: var(--purple-light) transparent; }
}