/* ─────────────────────────────────────────────
   saathwiksays.com — Design tokens
   Editorial-cinematic. Paper + ink + saffron.
   ───────────────────────────────────────────── */

:root {
  /* Base — Direction A: Editorial Dark (default) */
  --ink:       #0a0908;
  --ink-1:    #111110;
  --ink-2:    #17161a;
  --ink-3:    #1e1c21;
  --paper:     #f3ede3;
  --paper-2:   #e8dfd0;
  --paper-3:   #c9bfae;

  /* Text ramp (on dark) */
  --t-1: #f3ede3;
  --t-2: #c9bfae;
  --t-3: #8a8378;
  --t-4: #4a453e;
  --t-5: #2a2722;

  /* Accent — burnt saffron primary */
  --saffron:       #d97b3d;
  --saffron-deep:  #b56128;
  --saffron-light: #e8a271;

  /* Secondary cycling hues (same chroma family) */
  --teal:   #4a9d93;
  --rose:   #c85a5a;
  --plum:   #7a5a8a;

  /* Rules */
  --hair: 1px solid rgba(243, 237, 227, 0.08);
  --hair-2: 1px solid rgba(243, 237, 227, 0.14);

  /* Spacing */
  --edge: clamp(1.25rem, 4vw, 3rem);
  --gutter: clamp(1rem, 2vw, 1.5rem);

  /* Typography */
  --f-display: 'Fraunces', ui-serif, Georgia, serif;
  --f-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --f-sans: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;

  /* Motion */
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);
  --e-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --e-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Elevation */
  --z-mascot: 50;
  --z-nav: 100;
  --z-overlay: 200;
}

/* Direction B: Paper Light */
html[data-theme="paper"] {
  --ink:       #f3ede3;
  --ink-1:    #ede6d8;
  --ink-2:    #e4dbca;
  --ink-3:    #d8cdb9;

  --t-1: #1a1713;
  --t-2: #4a433b;
  --t-3: #7a7163;
  --t-4: #a89f8e;
  --t-5: #d8cdb9;

  --saffron:       #b56128;
  --saffron-deep:  #8a4817;
  --saffron-light: #d97b3d;

  --teal:   #2f6e66;
  --rose:   #9c3c3c;
  --plum:   #5a3f6b;

  --hair: 1px solid rgba(26, 23, 19, 0.10);
  --hair-2: 1px solid rgba(26, 23, 19, 0.20);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--ink);
  color: var(--t-1);
  font-family: var(--f-sans);
  font-weight: 400;
  line-height: 1.55;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background 0.4s var(--e-in-out), color 0.4s var(--e-in-out);
}
::selection { background: var(--saffron); color: var(--ink); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* Paper grain overlay — very subtle */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image:
    repeating-linear-gradient(0deg, transparent 0 1px, rgba(255,255,255,0.4) 1px 2px);
}

/* Utility — cycling text */
.cycle {
  background-image: linear-gradient(
    90deg,
    var(--saffron) 0%,
    var(--saffron) 18%,
    var(--teal) 34%,
    var(--rose) 55%,
    var(--plum) 76%,
    var(--saffron) 100%
  );
  background-size: 220% 100%;
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: cycle-hue 11s ease-in-out infinite;
  font-style: italic;
}
.cycle.d1 { animation-delay: -2s; }
.cycle.d2 { animation-delay: -4s; }
.cycle.d3 { animation-delay: -6s; }
.cycle.d4 { animation-delay: -8s; }
@keyframes cycle-hue {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}