@import url('https://fonts.googleapis.com/css2?family=Bitter:wght@400;600;700;800&display=swap');

:root {

  /* ─── Colors ─────────────────────────────────────────── */

  /* Primary */
  --color-primary-dark:  #1e1441;
  --color-primary:       #3d5a99;
  --color-secondary:     #e83e8c;

  /* Sunset Gradient */
  --gradient-sunset:        linear-gradient(135deg, #ff6b35 0%, #ff8e53 50%, #ffa600 100%);
  --gradient-sunset-hover:  linear-gradient(135deg, #ff8e53 0%, #ffa600 100%);
  --gradient-sunset-active: linear-gradient(135deg, #e55f2f 0%, #ff7d47 100%);

  /* Navy Gradient (card accents) */
  --gradient-navy: linear-gradient(135deg, #1e1441 0%, #3d5a99 50%, #5b3a8a 100%);

  --color-accent-start: #ff6b35;
  --color-accent-mid:   #ff8e53;
  --color-accent-end:   #ffa600;

  /* Text */
  --color-text-primary: #1a1a1a;
  --color-text-light:   #666666;
  --color-text-white:   #ffffff;

  /* Backgrounds */
  --color-bg-primary: #ffffff;
  --color-bg-warm:    #fef9f6;
  --color-bg-dark:    #1e1441;

  /* Hero Overlay */
  --overlay-hero: rgba(30, 20, 65, 0.75);

  /* Borders */
  --color-border:       rgba(30, 20, 65, 0.1);
  --color-border-light: #e0e0e0;

  /* Status */
  --color-success: #10b981;
  --color-warning: #f59e0b;
  --color-error:   #ef4444;


  /* ─── Typography ─────────────────────────────────────── */

  --font-primary: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                  "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Bitter", ui-serif, Georgia, "Iowan Old Style",
                  "Palatino Linotype", "Book Antiqua", Palatino, serif;

  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  2rem;
  --text-4xl:  2.5rem;
  --text-5xl:  3rem;

  --leading-tight:   1.2;
  --leading-normal:  1.5;
  --leading-relaxed: 1.75;


  /* ─── Spacing ────────────────────────────────────────── */

  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2rem;
  --space-2xl: 3rem;
  --space-3xl: 4rem;


  /* ─── Shadows ────────────────────────────────────────── */

  --shadow-subtle: 0 1px 3px rgba(30, 20, 65, 0.06);
  --shadow-sm:     0 2px 8px rgba(30, 20, 65, 0.08),
                   0 1px 3px rgba(30, 20, 65, 0.12);
  --shadow-md:     0 8px 24px rgba(30, 20, 65, 0.12),
                   0 4px 12px rgba(30, 20, 65, 0.16);
  --shadow-lg:     0 10px 20px rgba(30, 20, 65, 0.15);
  --shadow-xl:     0 20px 40px rgba(30, 20, 65, 0.2);
  --shadow-btn:    0 2px 8px rgba(255, 107, 53, 0.25);
  --shadow-btn-hover: 0 4px 12px rgba(255, 107, 53, 0.35);


  /* ─── Border Radius ──────────────────────────────────── */

  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 9999px;


  /* ─── Transitions ────────────────────────────────────── */

  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-fast: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);


  /* ─── Layout ─────────────────────────────────────────── */

  --max-width: 1200px;
  --header-height: 104px;
  --section-padding: var(--space-3xl) var(--space-xl);

}