/* ==========================================================================
   Digital Maheshwari — Design Tokens
   Premium palette derived from the DM mark: deep navy ink, a refined gold
   accent and a fresh emerald secondary against a cool near-white paper —
   built to read as modern and premium rather than purely editorial.
   ========================================================================== */

:root {
  /* ---- Color: core ---- */
  --dm-ink:        #0c1220;   /* primary — deep navy-black */
  --dm-ink-soft:   #232c42;
  --dm-paper:      #f8f8fb;   /* page background — cool near-white */
  --dm-surface:    #ffffff;   /* card / elevated surface */
  --dm-surface-alt:#eef1f7;   /* secondary surface, section alternation */

  --dm-gold:       #c6952f;   /* accent — CTAs, underlines, numerals */
  --dm-gold-light: #e6c069;
  --dm-gold-dark:  #99711f;

  --dm-oxblood:    #0f5c4d;   /* secondary — sparing use: tags, highlights */
  --dm-oxblood-light: #1c8a73;

  --dm-text:       #12172a;   /* body text */
  --dm-text-muted: #5b6478;   /* secondary / supporting text */
  --dm-text-inverse: #f8f8fb;

  --dm-border:     #dfe3ec;
  --dm-border-strong: #c5cbdb;

  --dm-success:    #1f8a4c;
  --dm-error:      #c23b3b;

  /* ---- Premium gradient accents (used sparingly: hero art, badges) ---- */
  --dm-gradient-ink:  linear-gradient(150deg, #0c1220 0%, #1a2338 55%, #2b2013 130%);
  --dm-gradient-gold: linear-gradient(120deg, var(--dm-gold-dark), var(--dm-gold) 55%, var(--dm-gold-light));

  /* ---- Typography ---- */
  --dm-font-display: 'Fraunces', 'Georgia', serif;
  --dm-font-body:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  --dm-h1: clamp(2.5rem, 1.7rem + 3.4vw, 5.25rem);
  --dm-h2: clamp(2rem, 1.5rem + 2.2vw, 3.5rem);
  --dm-h3: clamp(1.5rem, 1.25rem + 1.1vw, 2.25rem);
  --dm-h4: clamp(1.2rem, 1.1rem + 0.4vw, 1.5rem);
  --dm-body-lg: 1.25rem;
  --dm-body: 1.0625rem;
  --dm-body-sm: 0.9375rem;
  --dm-caption: 0.8125rem;

  --dm-lh-tight: 1.08;
  --dm-lh-snug: 1.25;
  --dm-lh-normal: 1.6;

  --dm-tracking-tight: -0.02em;
  --dm-tracking-normal: 0;
  --dm-tracking-wide: 0.08em;
  --dm-tracking-wider: 0.16em;

  /* ---- Spacing scale ---- */
  --dm-space-1: 0.25rem;
  --dm-space-2: 0.5rem;
  --dm-space-3: 0.75rem;
  --dm-space-4: 1rem;
  --dm-space-5: 1.5rem;
  --dm-space-6: 2rem;
  --dm-space-7: 3rem;
  --dm-space-8: 4rem;
  --dm-space-9: 6rem;
  --dm-space-10: 8rem;

  /* ---- Layout ---- */
  --dm-container: 1280px;
  --dm-container-narrow: 860px;
  --dm-gutter: clamp(1.25rem, 4vw, 4rem);
  --dm-radius-sm: 4px;
  --dm-radius: 10px;
  --dm-radius-lg: 20px;
  --dm-radius-full: 999px;

  /* ---- Motion ---- */
  --dm-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dm-duration-fast: 180ms;
  --dm-duration: 320ms;
  --dm-duration-slow: 600ms;

  /* ---- Elevation ---- */
  --dm-shadow-sm: 0 1px 2px rgba(12, 18, 32, 0.07);
  --dm-shadow: 0 8px 30px rgba(12, 18, 32, 0.10);
  --dm-shadow-lg: 0 24px 60px rgba(12, 18, 32, 0.18);

  /* ---- Z-index ---- */
  --dm-z-header: 100;
  --dm-z-menu: 90;
  --dm-z-overlay: 200;
  --dm-z-toast: 300;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dm-duration-fast: 0ms;
    --dm-duration: 0ms;
    --dm-duration-slow: 0ms;
  }
}