/* ============================================================
   Novella Design Tokens — "Editorial Roast"
   Hand-tuned for this demo: cool paper, slate ink, terracotta.
   ============================================================ */

:root {
  /* ---- Palette -------------------------------------------- */
  --bg:            #eef0f1;          /* cool paper canvas       */
  --bg-elevated:   #fbfbfa;          /* raised surfaces         */
  --surface:       rgba(35,42,48,0.045);
  --surface-2:     rgba(35,42,48,0.07);
  --hairline:      rgba(35,42,48,0.12);
  --hairline-2:    rgba(35,42,48,0.20);

  --ink:           #232a30;          /* slate text              */
  --ink-soft:      rgba(35,42,48,0.74);
  --ink-mute:      rgba(35,42,48,0.52);

  /* Brand accent — terracotta against slate
     (variable names kept from the base system for compatibility) */
  --violet:        #b0563b;          /* terracotta              */
  --violet-hi:     #c76a4c;
  --cyan:          #8c4530;          /* deep terracotta         */
  --cyan-hi:       #8c4530;
  --accent:        var(--violet);

  /* ---- Gradients ------------------------------------------ */
  --grad-brand:    linear-gradient(120deg, #a34c32 0%, #c76a4c 100%);
  --grad-text:     linear-gradient(120deg, #232a30 0%, #74403a 55%, #b0563b 110%);
  --grad-halo:     radial-gradient(60% 60% at 50% 0%, rgba(176,86,59,0.12) 0%, rgba(35,42,48,0.04) 45%, transparent 72%);
  --grad-sheen:    linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 40%);

  /* ---- Typography ----------------------------------------- */
  --font-sans: "Karla", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Playfair Display", Georgia, serif;
  --font-mono: "SF Mono", "JetBrains Mono", ui-monospace, monospace;

  /* Fluid type scale (clamp: min, preferred, max) */
  --step--1: clamp(0.83rem, 0.79rem + 0.20vw, 0.94rem);
  --step-0:  clamp(1.00rem, 0.93rem + 0.34vw, 1.19rem);
  --step-1:  clamp(1.33rem, 1.19rem + 0.68vw, 1.78rem);
  --step-2:  clamp(1.78rem, 1.51rem + 1.30vw, 2.67rem);
  --step-3:  clamp(2.37rem, 1.92rem + 2.24vw, 4.00rem);
  --step-4:  clamp(3.00rem, 2.30rem + 3.50vw, 5.40rem);
  --step-5:  clamp(3.60rem, 2.60rem + 5.20vw, 7.40rem);

  --tracking-tight: -0.012em;
  --tracking-wide:  0.18em;
  --leading-tight:  1.08;
  --leading-body:   1.65;

  /* ---- Spacing (8px base, fluid) -------------------------- */
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-s:   1rem;
  --space-m:   1.5rem;
  --space-l:   2.5rem;
  --space-xl:  clamp(3rem, 2rem + 4vw, 5rem);
  --space-2xl: clamp(5rem, 3rem + 8vw, 9rem);
  --section-y: clamp(6rem, 4rem + 8vw, 11rem);

  --container:   1160px;
  --container-w: min(92vw, var(--container));

  /* ---- Radii — soft editorial ------------------------------ */
  --r-s:  6px;
  --r-m:  12px;
  --r-l:  18px;
  --r-xl: 24px;
  --r-pill: 999px;

  /* ---- Shadows & glows ------------------------------------ */
  --shadow-card: 0 1px 0 rgba(255,255,255,0.7) inset, 0 16px 40px -22px rgba(35,42,48,0.35);
  --shadow-float: 0 32px 72px -30px rgba(35,42,48,0.38);
  --glow-violet: 0 12px 30px -14px rgba(163,76,50,0.45);
  --glow-cyan:   0 12px 30px -14px rgba(163,76,50,0.35);

  /* ---- Motion --------------------------------------------- */
  --ease-out:    cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.35s;
  --dur-med:  0.6s;
  --dur-slow: 1s;

  /* ---- Z ---------------------------------------------------*/
  --z-nav: 100;
  --z-overlay: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0.001s; --dur-med: 0.001s; --dur-slow: 0.001s; }
}