/* ==========================================================================
   SparkTro CSS Styles
   ========================================================================== */

/* ==========================================================================
   CSS Reset & Base Styles
   ========================================================================== */
@font-face {
    font-family: 'Good Times';
    src: url('../fonts/GoodTimes-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* tailwind.css or global.css */
@layer utilities {
  .p-15rem {
    padding: 15rem;
  }

  /* Reusable container with max width and responsive paddings (no @apply) */
  .container-1440 {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;   /* px-4 */
    padding-right: 1rem; 
  }
  @media (min-width: 640px) { /* sm */
    .container-1440 {
      padding-left: 1.5rem;   /* px-6 */
      padding-right: 1.5rem;  /* px-6 */
    }
  }
  @media (min-width: 768px) { /* md */
    .container-1440 {
      padding-left: 10rem;
      padding-right: 10rem;
    }
  }
  @media (min-width: 1024px) { /* lg */
    .container-1440 {
      padding-left: 12.5rem;
      padding-right: 12.5rem;
    }
  }
}


/* ==========================================================================
   CSS Variables & Custom Properties
   ========================================================================== */
:root {
    /* Tailwind Variables */
    --container-width: 120rem; 
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;

    /* Figma Design Colors */
    --hannan-black: 30 37 51;
    --hannan-sub-text: 90 85 110;
    --hannan-border: 214 226 239;

    /* Sidebar Variables */
    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;

    /* SparkTro Brand Colors */
    --primary: #0A97B0;
    --secondary: #FDCB02;
    --yellow: #FDD40F;
    --dark: #1D2433;
    --light: #FFFFFF;
    --hannan-black: #1e2533;
    --hannan-sub-text: #5a556e;
    --hannan-primary-2: #0a97b0;
    --hannan-primary-2-33: #0A97B033;
    --hannan-primary-1: #E5F6F7;
    --hannan-border-1: #bdc7d3;
    --hannan-border-2: #d6e2ef;
    --hannan-fill-color: #8d97a3;
    --hannan-white: #ffffff;
    --hannan-green: #1d9993;
    --hannan-active: #0dc46e;
    --hannan-red: #ff4340;
    --hannan-yellow: #fdcb02;
    --hannan-yellow-2: #f2d519;

    /* Typography */
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 20px;
    --font-weight-normal: 500;
    --font-weight-bold: 600;
    --font-weight-semibold: 400;
}

/* Dark Mode Variables */
.dark {
    --background: 222.2 84% 4.9%;
    --foreground: 210 40% 98%;
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;
    --popover: 222.2 84% 4.9%;
    --popover-foreground: 210 40% 98%;
    --primary: 210 40% 98%;
    --primary-foreground: 222.2 47.4% 11.2%;
    --secondary: 217.2 32.6% 17.5%;
    --secondary-foreground: 210 40% 98%;
    --muted: 217.2 32.6% 17.5%;
    --muted-foreground: 215 20.2% 65.1%;
    --accent: 217.2 32.6% 17.5%;
    --accent-foreground: 210 40% 98%;
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;
    --border: 217.2 32.6% 17.5%;
    --input: 217.2 32.6% 17.5%;
    --ring: 212.7 26.8% 83.9%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
}

/* ==========================================================================
   Base Styles
   ========================================================================== */
* {
    @apply border-border;
}


body {
    font-family: 'Work Sans', sans-serif;
    background-color: var(--dark);
    color: var(--light);
    overflow-x: hidden;
}

/* ==========================================================================
   Typography
   ========================================================================== */
.logo {
    font-family: 'Good Times', sans-serif;
}

.logo span {
    color: var(--primary);
}

.gradient-text {
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   Layout & Components
   ========================================================================== */
.hero-bg {
    background: radial-gradient(circle at 10% 20%, rgba(10, 151, 176, 0.1) 0%, rgba(30, 37, 51, 0) 30%),
        radial-gradient(circle at 90% 80%, rgba(253, 203, 2, 0.1) 0%, rgba(30, 37, 51, 0) 30%);
}

.bg-gradient-blue {
    background-image: radial-gradient(circle, rgba(10, 151, 176, 0.5) 0%, rgba(65, 9, 137, 0) 70%);
}

.bg-gradient-green {
    background-image: radial-gradient(circle, rgba(29, 153, 147, 0.5) 0%, rgba(29, 153, 147, 0) 70%);
}

.bg-gradient-pink {
    background-image: radial-gradient(circle, rgba(255, 67, 64, 0.5) 0%, rgba(255, 67, 64, 0) 70%);
}

.bg-gradient-purple {
    background-image: radial-gradient(circle, rgba(139, 92, 246, 0.5) 0%, rgba(94, 36, 230, 0) 70%);
}

.bg-gradient-yellow {
    background-image: radial-gradient(circle, rgba(253, 203, 2, 0.5) 0%, rgba(253, 203, 2, 0) 70%);
}

/* ==========================================================================
   Buttons & Interactive Elements
   ========================================================================== */
.btn-primary {
    background: var(--primary);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: #08879c;
    transform: translateY(-2px);
}

.btn-outline {
    border: 1px solid var(--primary);
    color: var(--primary);
}

.btn-outline:hover {
    background: rgba(10, 151, 176, 0.1);
}

.nav-link {
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--secondary);
    transition: width 0.3s ease;
}



/* extra */


@layer base {

    :root {
        --background: 0 0% 100%;
        --foreground: 222.2 84% 4.9%;
        --container-width: 120rem; 

        /* Figma Design Colors */
        --hannan-black: 30 37 51;
        --hannan-sub-text: 90 85 110;
        --hannan-border: 214 226 239;

        --card: 0 0% 100%;
        --card-foreground: 222.2 84% 4.9%;

        --popover: 0 0% 100%;
        --popover-foreground: 222.2 84% 4.9%;

        --primary: 222.2 47.4% 11.2%;
        --primary-foreground: 210 40% 98%;

        --secondary: 210 40% 96.1%;
        --secondary-foreground: 222.2 47.4% 11.2%;

        --muted: 210 40% 96.1%;
        --muted-foreground: 215.4 16.3% 46.9%;

        --accent: 210 40% 96.1%;
        --accent-foreground: 222.2 47.4% 11.2%;

        --destructive: 0 84.2% 60.2%;
        --destructive-foreground: 210 40% 98%;

        --border: 214.3 31.8% 91.4%;
        --input: 214.3 31.8% 91.4%;
        --ring: 222.2 84% 4.9%;

        --radius: 0.5rem;

        --sidebar-background: 0 0% 98%;

        --sidebar-foreground: 240 5.3% 26.1%;

        --sidebar-primary: 240 5.9% 10%;

        --sidebar-primary-foreground: 0 0% 98%;

        --sidebar-accent: 240 4.8% 95.9%;

        --sidebar-accent-foreground: 240 5.9% 10%;

        --sidebar-border: 220 13% 91%;

        --sidebar-ring: 217.2 91.2% 59.8%;
    }


}

@layer base {
    * {
        @apply border-border;
    }

    body {
        @apply bg-background text-foreground;
        font-family: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    }
}



.gradient-text {
    background: linear-gradient(90deg, var(--primary) 0%, var(--secondary) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hero-bg {
    background: radial-gradient(circle at 10% 20%, rgba(10, 151, 176, 0.1) 0%, rgba(30, 37, 51, 0) 30%),
        radial-gradient(circle at 90% 80%, rgba(253, 203, 2, 0.1) 0%, rgba(30, 37, 51, 0) 30%);
}

.btn-primary {
    background: var(--primary);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    background: #08879c;
    transform: translateY(-2px);
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: -4px;
    left: 0;
    background-color: var(--secondary);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}


.social-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--secondary);
    transition: all 0.3s ease;
}

.social-icon:hover {
    color: var(--secondary);
    transform: translateY(-2px);
}