/* ============================================
   DULY — Brand Design Tokens
   Updated: 2026-03-23
   ============================================ */

:root {
  /* ── Primary Colors ── */
  --duly-black:          #000000;
  --duly-white:          #ffffff;
  --duly-lavender:       #c8b6f9;
  --duly-lavender-rgb:   200, 182, 249;

  /* ── Gradient Mesh Colors (decorative backgrounds only) ── */
  --duly-periwinkle:     #7496ec;
  --duly-magenta:        #e22587;
  --duly-coral:          #e74452;
  --duly-amber:          #d6831f;
  --duly-deep-indigo:    #1d1a82;
  --duly-purple:         #71296a;
  --duly-dusty-rose:     #c98f8b;
  --duly-mist:           #dacbc2;
  --duly-hot-pink:       #f03167;
  --duly-royal-blue:     #3d4ed9;
  --duly-mesh-base:      #1d1a82;

  /* ── Neutral Scale (pure monochrome, no tint) ── */
  --duly-neutral-50:     #fafafa;
  --duly-neutral-100:    #f5f5f5;
  --duly-neutral-200:    #e5e5e5;
  --duly-neutral-300:    #d4d4d4;
  --duly-neutral-400:    #a3a3a3;
  --duly-neutral-500:    #737373;
  --duly-neutral-600:    #525252;
  --duly-neutral-700:    #404040;
  --duly-neutral-800:    #262626;
  --duly-neutral-900:    #141414;
  --duly-neutral-950:    #0a0a0a;

  /* ── Lavender Scale ── */
  --duly-lavender-50:    #f5f0ff;
  --duly-lavender-100:   #ede5ff;
  --duly-lavender-200:   #ddd0ff;
  --duly-lavender-300:   #c8b6f9;  /* core */
  --duly-lavender-400:   #b09ae8;
  --duly-lavender-500:   #9580d5;
  --duly-lavender-600:   #7a66c0;
  --duly-lavender-700:   #5f4da8;
  --duly-lavender-800:   #453690;
  --duly-lavender-900:   #2e2178;

  /* ── Semantic Colors ── */
  --duly-success:        #00d07a;
  --duly-warning:        #f4b400;
  --duly-error:          #ff4d5a;
  --duly-info:           #60b7ff;

  /* ── Light Mode Surfaces ── */
  --duly-bg-primary:     #ffffff;
  --duly-bg-surface:     #fafafa;
  --duly-bg-elevated:    #f5f5f5;
  --duly-text-primary:   #000000;
  --duly-text-secondary: #525252;
  --duly-text-muted:     #a3a3a3;
  --duly-border:         #e5e5e5;

  /* ── Dark Mode Surfaces ── */
  --duly-dark-bg-primary:     #000000;
  --duly-dark-bg-surface:     #0a0a0a;
  --duly-dark-bg-elevated:    #141414;
  --duly-dark-text-primary:   #ffffff;
  --duly-dark-text-secondary: #a3a3a3;
  --duly-dark-text-muted:     #737373;
  --duly-dark-border:         #1e1e1e;

  /* ── Typography ── */
  --duly-font-display:   'Clash Grotesk', sans-serif;
  --duly-font-body:      'Satoshi', -apple-system, system-ui, sans-serif;
  --duly-font-mono:      'JetBrains Mono', monospace;

  --duly-font-size-xs:   0.75rem;    /* 12px */
  --duly-font-size-sm:   0.875rem;   /* 14px */
  --duly-font-size-base: 1rem;       /* 16px */
  --duly-font-size-lg:   1.125rem;   /* 18px */
  --duly-font-size-xl:   1.25rem;    /* 20px */
  --duly-font-size-2xl:  1.5rem;     /* 24px */
  --duly-font-size-3xl:  1.875rem;   /* 30px */
  --duly-font-size-4xl:  2.25rem;    /* 36px */
  --duly-font-size-5xl:  3rem;       /* 48px */
  --duly-font-size-6xl:  3.75rem;    /* 60px */

  --duly-font-weight-regular:  400;
  --duly-font-weight-medium:   500;
  --duly-font-weight-semibold: 600;
  --duly-font-weight-bold:     700;

  --duly-leading-tight:  1.15;
  --duly-leading-snug:   1.25;
  --duly-leading-normal: 1.5;
  --duly-leading-relaxed: 1.75;

  --duly-tracking-tight:  -0.02em;
  --duly-tracking-snug:   -0.015em;
  --duly-tracking-normal: 0;
  --duly-tracking-wide:   0.05em;
  --duly-tracking-wider:  0.1em;

  /* ── Spacing ── */
  --duly-space-1:  0.25rem;   /* 4px */
  --duly-space-2:  0.5rem;    /* 8px */
  --duly-space-3:  0.75rem;   /* 12px */
  --duly-space-4:  1rem;      /* 16px */
  --duly-space-5:  1.25rem;   /* 20px */
  --duly-space-6:  1.5rem;    /* 24px */
  --duly-space-8:  2rem;      /* 32px */
  --duly-space-10: 2.5rem;    /* 40px */
  --duly-space-12: 3rem;      /* 48px */
  --duly-space-16: 4rem;      /* 64px */
  --duly-space-20: 5rem;      /* 80px */
  --duly-space-24: 6rem;      /* 96px */

  /* ── Border Radius ── */
  --duly-radius-sm:   0.375rem;  /* 6px */
  --duly-radius-md:   0.5rem;    /* 8px */
  --duly-radius-lg:   0.75rem;   /* 12px */
  --duly-radius-xl:   1rem;      /* 16px */
  --duly-radius-2xl:  1.5rem;    /* 24px */
  --duly-radius-full: 9999px;

  /* ── Shadows (desaturated deep purple tint, not pure black) ── */
  --duly-shadow-sm:   0 1px 2px rgba(31, 19, 63, 0.04);
  --duly-shadow-md:   0 4px 6px rgba(31, 19, 63, 0.06), 0 2px 4px rgba(31, 19, 63, 0.03);
  --duly-shadow-lg:   0 10px 15px rgba(31, 19, 63, 0.1), 0 4px 6px rgba(31, 19, 63, 0.05);
  --duly-shadow-xl:   0 20px 25px rgba(31, 19, 63, 0.1), 0 8px 10px rgba(31, 19, 63, 0.04);

  /* ── Transitions ── */
  --duly-transition-fast:   150ms cubic-bezier(0.4, 0, 0.2, 1);
  --duly-transition-normal: 250ms cubic-bezier(0.4, 0, 0.2, 1);
  --duly-transition-slow:   350ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Dark Mode Override ── */
@media (prefers-color-scheme: dark) {
  :root {
    --duly-bg-primary:     var(--duly-dark-bg-primary);
    --duly-bg-surface:     var(--duly-dark-bg-surface);
    --duly-bg-elevated:    var(--duly-dark-bg-elevated);
    --duly-text-primary:   var(--duly-dark-text-primary);
    --duly-text-secondary: var(--duly-dark-text-secondary);
    --duly-text-muted:     var(--duly-dark-text-muted);
    --duly-border:         var(--duly-dark-border);
  }
}

/* ── Tailwind Config Values ──
   Copy into tailwind.config.js:

   theme: {
     extend: {
       colors: {
         duly: {
           black:         '#000000',
           white:         '#ffffff',
           lavender:      '#c8b6f9',
           periwinkle:    '#7496ec',
           magenta:       '#e22587',
           coral:         '#e74452',
           amber:         '#d6831f',
           purple:        '#71296a',
           'dusty-rose':  '#c98f8b',
           mist:          '#dacbc2',
           'hot-pink':    '#f03167',
           'royal-blue':  '#3d4ed9',
           neutral: {
             50:  '#fafafa',
             100: '#f5f5f5',
             200: '#e5e5e5',
             300: '#d4d4d4',
             400: '#a3a3a3',
             500: '#737373',
             600: '#525252',
             700: '#404040',
             800: '#262626',
             900: '#141414',
             950: '#0a0a0a',
           },
           lavender: {
             50:  '#f5f0ff',
             100: '#ede5ff',
             200: '#ddd0ff',
             300: '#c8b6f9',
             400: '#b09ae8',
             500: '#9580d5',
             600: '#7a66c0',
             700: '#5f4da8',
             800: '#453690',
             900: '#2e2178',
           },
           success: '#00d07a',
           warning: '#f4b400',
           error:   '#ff4d5a',
           info:    '#60b7ff',
         }
       },
       fontFamily: {
         display: ['Clash Grotesk', 'sans-serif'],
         body:    ['Satoshi', '-apple-system', 'system-ui', 'sans-serif'],
         mono:    ['JetBrains Mono', 'monospace'],
       },
     }
   }
── */