/* =============================================
   SMSONE — CSS Custom Properties & Font Imports
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
  /* ——— Brand Colors ——— */
  --color-primary:      #b5121b;
  --color-primary-dark: #8c0e15;
  --color-primary-glow: rgba(181, 18, 27, 0.3);
  --color-accent:       #F3BB12;
  --color-accent-dark:  #d4a20f;
  --color-secondary:    #047ab2;
  --color-secondary-dark: #035e8a;

  /* ——— Neutral Palette ——— */
  --color-dark:         #0d0d0d;
  --color-dark-2:       #111111;
  --color-dark-3:       #1a1a1a;
  --color-dark-4:       #222222;
  --color-dark-5:       #2e2e2e;
  --color-mid:          #555555;
  --color-muted:        #888888;
  --color-border:       #2a2a2a;
  --color-border-light: #e0e0e0;
  --color-light:        #f6f6f6;
  --color-light-2:      #fafafa;
  --color-white:        #ffffff;
  --color-text:         #1e1e1e;
  --color-text-muted:   #666666;

  /* ——— Gradients ——— */
  --gradient-hero:      linear-gradient(135deg, #0d0d0d 0%, #1a0a0d 50%, #0d0d0d 100%);
  --gradient-primary:   linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
  --gradient-accent:    linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
  --gradient-card:      linear-gradient(145deg, #1a1a1a 0%, #111111 100%);
  --gradient-overlay:   linear-gradient(180deg, rgba(13,13,13,0) 0%, rgba(13,13,13,0.95) 100%);
  --gradient-section:   linear-gradient(180deg, #f6f6f6 0%, #ffffff 100%);
  --gradient-cta:       linear-gradient(135deg, #0d0d0d 0%, #1a060a 60%, #0d0d0d 100%);

  /* ——— Typography ——— */
  --font-primary:  'Space Grotesk', sans-serif;
  --font-secondary:'Inter', sans-serif;

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

  --leading-tight:  1.1;
  --leading-snug:   1.3;
  --leading-normal: 1.6;
  --leading-relaxed:1.8;

  --fw-light:   300;
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

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

  /* ——— Layout ——— */
  --container-max: 1280px;
  --container-pad: clamp(1rem, 5vw, 4rem);
  --section-pad-y: clamp(4rem, 10vw, 7rem);
  --nav-height:    72px;

  /* ——— Borders & Radii ——— */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ——— Shadows ——— */
  --shadow-sm:  0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --shadow-md:  0 4px 16px rgba(0,0,0,0.15);
  --shadow-lg:  0 8px 32px rgba(0,0,0,0.2);
  --shadow-xl:  0 20px 60px rgba(0,0,0,0.3);
  --shadow-glow:0 0 40px var(--color-primary-glow);
  --shadow-accent-glow: 0 0 30px rgba(243,187,18,0.25);

  /* ——— Transitions ——— */
  --ease-out-cubic:  cubic-bezier(0.33, 1, 0.68, 1);
  --ease-in-out:     cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring:     cubic-bezier(0.34, 1.56, 0.64, 1);
  --transition-fast: 0.15s var(--ease-out-cubic);
  --transition-base: 0.3s var(--ease-out-cubic);
  --transition-slow: 0.6s var(--ease-out-cubic);

  /* ——— Z-index scale ——— */
  --z-base:    1;
  --z-raised:  10;
  --z-dropdown:100;
  --z-sticky:  200;
  --z-overlay: 300;
  --z-modal:   400;
  --z-tooltip: 500;
  --z-chatbot: 600;
}