/* =============================================================
   VARIABLES.CSS — Design Tokens for The Gimbal Website
   Change any value here to update the entire site instantly.
   ============================================================= */

.lobster-regular {
  font-family: "Lobster", sans-serif;
  font-weight: 400;
  font-style: normal;
}

:root {

  /* ── Brand Colors ── */
  --color-primary:       #3f4293;   /* Deep Blue — headers, icons, nav */
  --color-primary-dark:  #3f4293;   /* Darker blue — hover states, gradients */
  --color-primary-light: #f0e8ff;   /* Light blue — backgrounds, badges */

  --color-accent:        #03A9F4;   /* Sky Teal — gradients, highlights */
  --color-accent-dark:   #2196F3;   /* Darker teal — hover states */
  --color-accent-light:  #e8faff;   /* Light teal — section backgrounds */

  --color-cta:           #ff8c3a;   /* Orange — primary CTA buttons */
  --color-cta-dark:      #e07020;   /* Darker orange — hover */
  --color-cta-hover:     #ff7612;   /* Deep orange — gradient end */

  --color-highlight:     #fdb913;   /* Yellow-gold — stars, special accents */

  /* ── Neutrals ── */
  --color-bg:            #f5f5f5;   /* Page background */
  --color-white:         #ffffff;
  --color-text:          #1a2332;   /* Primary text */
  --color-text-light:    #5a6a7a;   /* Secondary text, descriptions */
  --color-muted:         #999999;   /* Placeholder, disabled */
  --color-border:        #e2e8f0;   /* Borders, dividers */

  /* ── Dark (Footer / Hero backgrounds) ── */
  --color-dark:          #001a3a;
  --color-dark-hero:     #001f3f;

  /* ── Semantic Status Colors ── */
  --color-success:       #22c55e;
  --color-success-bg:    #dcfce7;
  --color-warning:       #f59e0b;
  --color-error:         #ef4444;

  /* ── Shadows ── */
  --shadow-sm:    0 2px 8px  rgba(0, 86, 154, 0.08);
  --shadow-md:    0 4px 24px rgba(0, 86, 154, 0.10);
  --shadow-lg:    0 12px 48px rgba(0, 86, 154, 0.16);
  --shadow-hero:  0 32px 80px rgba(0, 0, 0, 0.40);

  /* ── Border Radius ── */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-pill: 50px;

  /* ── Spacing Scale ── */
  --space-xs:  8px;
  --space-sm:  16px;
  --space-md:  24px;
  --space-lg:  40px;
  --space-xl:  60px;
  --space-2xl: 80px;

  /* ── Typography ── */
  --font-heading: 'Poppins', sans-serif;
  --font-body:    'Inter', sans-serif;
  --font-lobster: 'Lobster', sans-serif;

  --text-xs:   0.75rem;   /* 12px */
  --text-sm:   0.875rem;  /* 14px */
  --text-base: 1rem;      /* 16px */
  --text-md:   1.05rem;   /* ~17px */
  --text-lg:   1.1rem;    /* ~18px */
  --text-xl:   1.25rem;   /* 20px */
  --text-2xl:  1.5rem;    /* 24px */

  /* ── Layout ── */
  --container-max: 1280px;
  --nav-height:    72px;

  /* ── Transitions ── */
  --transition-fast:   0.2s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base:   0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow:   0.5s cubic-bezier(0.4, 0, 0.2, 1);
}