@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');
@import "tailwindcss";

*,
*::before,
*::after {
   box-sizing: border-box !important;
}

html,
body {
   scroll-behavior: smooth;
   overflow-x: hidden;

}

:root {
   /* =========================
     BRAND COLORS
     Elegant, premium, and creator-focused
  ========================= */
   --color-primary: #1E60D4;
   /* Vibrant GemLanding blue from the t-shirt and text */
   --color-primary-dark: #103D91;
   /* Rich, deep navy-blue from the shaded areas of the shirt */
   --color-primary-light: #528BFF;
   /* Lighter, energetic sky blue highlight */

   --color-accent: #9BB8E6;
   /* Sophisticated silver-blue tone from the logo graphic */
   --color-accent-dark: #6C8BB8;
   /* Muted steel-blue for depth and balanced accents */
   --color-accent-light: #DCE7F7;
   /* Very soft, bright icy blue for highlight accents */

   --color-white: #FFFFFF;

   /* =========================
     BACKGROUND COLORS
  ========================= */
   --bg-main: #FFFFFF;
   --bg-section-alt: #EAECEF;
   /* Cool, crisp studio gray from the portrait backdrop */
   --bg-dark: #0D1627;
   /* Deep, premium near-black navy from the bottom vignette */

   /* =========================
     TEXT COLORS
  ========================= */
   --text-primary: #111A2E;
   /* Strong, high-contrast dark navy for primary typography */
   --text-secondary: #5C677D;
   /* Slate gray derived from the background shadow tones */
   --text-inverse: #FFFFFF;

   /* =========================
     BORDER & UI ELEMENTS
  ========================= */
   --border-color: #D3D8E2;
   /* Light slate border to cleanly separate UI containers */
   --input-bg: #F5F7FA;
   /* Crisp, ultra-light background for form inputs */

   /* =========================
     BUTTONS
  ========================= */
   --btn-primary-bg: #1E60D4;
   /* Impactful brand blue for the primary action CTAs */
   --btn-primary-text: #FFFFFF;
   /* Pure white text for perfect legibility on the blue button */
   --btn-primary-hover: #103D91;
   /* Smooth dark navy transition on hover */

   --btn-secondary-bg: transparent;
   --btn-secondary-text: #1E60D4;
   /* Outlined brand blue for secondary actions */
   --btn-secondary-border: #1E60D4;

   /* =========================
     GRADIENTS (optional)
  ========================= */
   --gradient-primary: linear-gradient(135deg, #1E60D4, #528BFF);
   --gradient-accent: linear-gradient(135deg, #9BB8E6, #DCE7F7);
}

body {
   margin: 0;
   padding: 0;
   font-family: "Outfit", sans-serif;
   color: var(--text-primary);
}