/*
Theme Name:   Your Goals Media
Theme URI:    https://yourgoals.media
Description:  Custom child theme for Your Goals Media, built on Hello Elementor. Design tokens ported 1:1 from the original Lovable/React build.
Author:       Atif Parvaiz
Template:     hello-elementor
Version:      1.0.0
Text Domain:  ygm
*/

/* =========================================================
   DESIGN TOKENS
   Ported from the original Tailwind/shadcn HSL variables.
   Source of truth = the live website's rendered colors, not
   the (slightly different) hardcoded hex used in the email
   templates — see migration guide for the primary/purple note.
   ========================================================= */
:root {
  --ygm-background:            #FFFFFF;
  --ygm-foreground:            #0B092A;

  --ygm-card:                  #F3EEFC;
  --ygm-card-foreground:       #0B092A;

  --ygm-primary:               #744AF2;
  --ygm-primary-foreground:    #FFFFFF;

  --ygm-secondary:             #0B092A;
  --ygm-secondary-foreground:  #FFFFFF;

  --ygm-muted:                 #F3EEFC;
  --ygm-muted-foreground:      #5F5C8A;

  --ygm-accent:                #38A5FF;
  --ygm-accent-foreground:     #FFFFFF;

  --ygm-destructive:           #EF4343;
  --ygm-destructive-foreground:#FFFFFF;

  --ygm-border:                #E3DEED;
  --ygm-input:                 #E3DEED;
  --ygm-ring:                  #744AF2;

  --ygm-radius:                0.75rem;
  --ygm-radius-md:              calc(var(--ygm-radius) - 2px);
  --ygm-radius-sm:              calc(var(--ygm-radius) - 4px);

  /* Sidebar / dark-panel tones (mobile nav, dark sections) */
  --ygm-sidebar-bg:            #0B092A;
  --ygm-sidebar-foreground:    #FFFFFF;
  --ygm-sidebar-accent:        #1A1745;
  --ygm-sidebar-border:        #25224F;

  --ygm-font-heading: 'Poppins', sans-serif;
  --ygm-font-body:    'Roboto', sans-serif;
}

/* =========================================================
   BASE
   ========================================================= */
body {
  font-family: var(--ygm-font-body);
  background-color: var(--ygm-background);
  color: var(--ygm-foreground);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ygm-font-heading);
}

html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #f7f7f7; }
::-webkit-scrollbar-thumb { background: rgba(116, 74, 242, 0.3); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(116, 74, 242, 0.5); }

/* =========================================================
   UTILITIES
   Same names/behavior as the original build. Usable directly
   in Elementor via the "CSS Classes" field on the Advanced tab
   of any widget/section — no need to rebuild these as Elementor
   custom styles.
   ========================================================= */
.ygm-bg-gradient-blue {
  background: linear-gradient(135deg, var(--ygm-accent), var(--ygm-primary));
}

.ygm-bg-gradient-dark {
  background: linear-gradient(180deg, #0B092A 0%, #17143D 100%);
}

.ygm-bg-gradient-light {
  background: linear-gradient(180deg, var(--ygm-card) 0%, var(--ygm-background) 100%);
}

.ygm-text-gradient {
  background: linear-gradient(135deg, var(--ygm-accent), var(--ygm-primary));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ygm-glow-blue {
  box-shadow: 0 0 60px -15px rgba(116, 74, 242, 0.25);
}

.ygm-hero-overlay {
  background: linear-gradient(
    180deg,
    rgba(11, 9, 42, 0.6) 0%,
    rgba(11, 9, 42, 0.8) 50%,
    rgba(11, 9, 42, 0.95) 100%
  );
}

@keyframes ygm-pulse-glow {
  0%, 100% { box-shadow: 0 2px 12px rgba(0,0,0,0.15), 0 0 20px -5px rgba(116,74,242,0.3); }
  50%      { box-shadow: 0 2px 12px rgba(0,0,0,0.15), 0 0 40px -5px rgba(116,74,242,0.5); }
}
.ygm-animate-pulse-glow {
  animation: ygm-pulse-glow 3s ease-in-out infinite;
}

@keyframes ygm-fade-up {
  0%   { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
.ygm-fade-up {
  animation: ygm-fade-up 0.6s ease-out forwards;
}

@keyframes ygm-fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
.ygm-fade-in {
  animation: ygm-fade-in 0.5s ease-out forwards;
}

/* Scroll-reveal starting state — pair with the .is-visible toggle
   that a small IntersectionObserver script (next steps) will add
   when a section scrolls into view. Prevents flash-of-visible-content
   before JS attaches. */
.ygm-reveal {
  opacity: 0;
  transform: translateY(30px);
}
.ygm-reveal.is-visible {
  animation: ygm-fade-up 0.6s ease-out forwards;
}