/* ============================================
   ValemGelsin — Design Token CSS Variables
   ============================================ */

:root {
  /* ── Primary (Jade Green) ── */
  --primary-600: #2F6F5F;
  --primary-500: #3D8B73;
  --primary-400: #4FA287;
  --primary-300: #7FBFAB;
  --primary-100: #EAF4EF;
  --primary-50:  #F8FBF9;

  /* ── Dark Teal ── */
  --dark-900: #163B34;
  --dark-700: #1E4D44;
  --dark-500: #2A6B5E;

  /* ── Accent Gold ── */
  --accent-gold:    #D8B66A;
  --accent-gold-lt: #F0E6C8;

  /* ── Neutrals ── */
  --neutral-900: #1A1A1A;
  --neutral-600: #6B7280;
  --neutral-400: #9CA3AF;
  --neutral-200: #E5E7EB;
  --neutral-100: #F3F4F6;
  --neutral-50:  #FAFAFA;

  /* ── Semantic ── */
  --success: #16A34A;
  --warning: #F59E0B;
  --error:   #DC2626;
  --info:    #0EA5E9;

  /* ── Surfaces ── */
  --surface-page:    var(--primary-50);
  --surface-card:    #FFFFFF;
  --surface-alt:     var(--neutral-100);
  --surface-accent:  var(--primary-100);
  --surface-footer:  var(--dark-700);

  /* ── Typography ── */
  --font-heading: 'Satoshi', 'Inter', system-ui, -apple-system, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* ── Spacing ── */
  --section-padding-mobile:  64px;
  --section-padding-desktop: 96px;
  --container-max: 1200px;
  --container-padding: 24px;

  /* ── Radius ── */
  --radius-sm:   8px;
  --radius-md:  12px;
  --radius-lg:  16px;
  --radius-xl:  24px;
  --radius-full: 9999px;

  /* ── Shadows ── */
  --shadow-sm:   0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:   0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --shadow-lg:   0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
  --shadow-xl:   0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);

  /* ── Transitions ── */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in:  cubic-bezier(0.7, 0, 0.84, 0);
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 400ms;
}