/* ═══════════════════════════════════════════════
   SERASMAC v2 — Design Tokens
   Source of truth. Font delivery is registered in functions.php.
   ═══════════════════════════════════════════════ */

:root {
  /* ── Canvas ── */
  --sm-canvas:        #f5f2ea;
  --sm-canvas-deep:   #ece7dc;
  --sm-surface:       #ffffff;
  --sm-surface-soft:  #f9f7f2;
  --sm-surface-ink:   #102c35;

  /* ── Ink ── */
  --sm-ink:           #0d1b1e;
  --sm-ink-soft:      #34464a;
  --sm-ink-muted:     #647579;
  --sm-ink-inverse:   #f7f8f5;

  /* ── Brand ── */
  --sm-navy:          #102c35;
  --sm-navy-deep:     #091e25;
  --sm-teal:          #0c6e73;
  --sm-teal-bright:   #178b8c;
  --sm-cobalt:        #215b78;

  /* ── Accent ── */
  --sm-copper:        #a86c3d;
  --sm-copper-soft:   #d2a77d;

  /* ── Lines ── */
  --sm-line:          #d8dcd5;
  --sm-line-strong:   #b7c1bd;
  --sm-line-dark:     rgba(255,255,255,0.14);

  /* ── Feedback ── */
  --sm-success:       #28765a;
  --sm-warning:       #a56a1f;
  --sm-danger:        #a4433c;

  /* ── Typography ── */
  --sm-font-display:  'Source Serif 4', Georgia, 'Times New Roman', serif;
  --sm-font-body:     'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* ── Type scale ── */
  --sm-text-xs:   0.75rem;
  --sm-text-sm:   0.875rem;
  --sm-text-base: 1rem;
  --sm-text-md:   1.125rem;
  --sm-text-lg:   1.25rem;
  --sm-text-xl:   1.5rem;
  --sm-text-2xl:  1.875rem;
  --sm-text-3xl:  2.25rem;
  --sm-text-4xl:  3rem;
  --sm-text-5xl:  3.75rem;

  --sm-leading-tight:   1.15;
  --sm-leading-snug:    1.35;
  --sm-leading-normal:  1.6;
  --sm-leading-relaxed: 1.75;

  --sm-tracking-tight: -0.025em;
  --sm-tracking-normal: 0;
  --sm-tracking-wide:   0.04em;
  --sm-tracking-wider:  0.08em;

  /* ── Spacing ── */
  --sm-space-1:  0.25rem;
  --sm-space-2:  0.5rem;
  --sm-space-3:  0.75rem;
  --sm-space-4:  1rem;
  --sm-space-5:  1.25rem;
  --sm-space-6:  1.5rem;
  --sm-space-8:  2rem;
  --sm-space-10: 2.5rem;
  --sm-space-12: 3rem;
  --sm-space-16: 4rem;
  --sm-space-20: 5rem;
  --sm-space-24: 6rem;

  /* ── Containers ── */
  --sm-container-wide:     1440px;
  --sm-container-main:     1240px;
  --sm-container-reading:  760px;

  /* ── Section spacing ── */
  --sm-section-space:          clamp(5rem, 8vw, 9rem);
  --sm-section-space-compact:  clamp(3.75rem, 6vw, 6rem);

  /* ── Radii ── */
  --sm-radius-sm:  4px;
  --sm-radius-md:  7px;
  --sm-radius-lg:  12px;
  --sm-radius-xl:  20px;

  /* ── Shadows ── */
  --sm-shadow-xs:   0 1px 2px rgba(13,27,30,0.04);
  --sm-shadow-sm:   0 1px 3px rgba(13,27,30,0.06), 0 1px 2px rgba(13,27,30,0.04);
  --sm-shadow-md:   0 8px 22px rgba(13,27,30,0.07), 0 1px 3px rgba(13,27,30,0.04);
  --sm-shadow-lg:   0 18px 46px rgba(13,27,30,0.09), 0 3px 10px rgba(13,27,30,0.05);
  --sm-shadow-xl:   0 28px 72px rgba(13,27,30,0.12), 0 6px 18px rgba(13,27,30,0.05);

  /* ── Z-index ── */
  --sm-z-base:     1;
  --sm-z-dropdown: 100;
  --sm-z-sticky:   200;
  --sm-z-drawer:   300;
  --sm-z-overlay:  400;
  --sm-z-modal:    500;

  /* ── Transitions ── */
  --sm-ease-out:   cubic-bezier(0.22, 1, 0.36, 1);
  --sm-ease-in-out: cubic-bezier(0.45, 0, 0.55, 1);
  --sm-duration-fast:   120ms;
  --sm-duration-normal: 220ms;
  --sm-duration-slow:   400ms;
}