/**
 * Your First Website — Design Tokens
 */

:root {
  --color-primary:      #0ea5e9;
  --color-primary-dark: #0284c7;
  --color-primary-light:#bae6fd;

  --color-dark:         #0f172a;
  --color-dark-2:       #1e293b;
  --color-dark-3:       #334155;

  --color-white:        #ffffff;
  --color-off-white:    #f6fbff;
  --color-gray-100:     #f1f5f9;
  --color-gray-200:     #e2e8f0;
  --color-gray-300:     #cbd5e1;

  --color-muted:        #667085;
  --color-muted-light:  #94a3b8;

  --color-success:      #22c55e;
  --color-warning:      #f59e0b;
  --color-error:        #ef4444;

  --gradient-rainbow: linear-gradient(
    135deg,
    #ff3b3b 0%,
    #ff8c00 18%,
    #ffd700 36%,
    #22c55e 54%,
    #0ea5e9 72%,
    #a855f7 100%
  );

  --font-sans:    'DM Sans', Arial, Helvetica, sans-serif;
  --font-serif:   'Playfair Display', Georgia, serif;
  --font-mono:    'JetBrains Mono', 'Fira Code', 'Courier New', monospace;

  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 16px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 8px 32px rgba(0, 0, 0, 0.10), 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.12), 0 4px 16px rgba(0, 0, 0, 0.06);
}