/* Yanai Calendar - Modern Vibrant Design System Variables */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
  /* ==========================================
     STRICT 2-COLOR DESIGN PALETTE:
     1. CYAN BLUE (UPPER & PRIMARY)
     2. PASTEL LAVENDER (LOWER & SECONDARY)
     ========================================== */
  
  /* COLOR 1: Authentic Vibrant Sea Blue (கடல் நீலம்) */
  --color-cyan-dark: #075985;        /* Deep Sea Blue - oceanic and rich, NOT dark navy */
  --color-cyan-navy: #0369a1;        /* Rich Sea Blue */
  --color-cyan-deep: #0284c7;        /* Oceanic Sea Blue */
  --color-cyan-base: #0284c7;        /* Primary Sea Blue */
  --color-cyan-vivid: #0096c7;       /* Vivid Sea Blue */
  --color-cyan-light: #06b6d4;       /* Aqua Sea Blue */
  --color-cyan-bright: #38bdf8;      /* Bright Sky Sea Blue */
  --color-cyan-ice: #f0f9ff;         /* Soft Sea Blue Ice */
  
  /* COLOR 2: Floral & Twilight Pastel Lavender (பாஸ்டல் லாவெண்டர்) */
  --color-lavender-dark: #160628;
  --color-lavender-deep: #2e1065;
  --color-lavender-royal: #4c1d95;
  --color-lavender-base: #6d28d9;
  --color-lavender-vibrant: #8b5cf6;
  --color-lavender-pastel: #c4b5fd;
  --color-lavender-soft: #ddd6fe;
  --color-lavender-light: #e9d5ff;
  --color-lavender-pale: #f5f3ff;
  
  /* Core Brand Assignments (Vibrant Sea Blue Architecture) */
  --color-primary: #0284c7;          /* Vibrant Sea Blue Primary */
  --color-primary-light: #0284c7;    /* High-contrast Sea Blue */
  --color-primary-dark: #0369a1;     /* Deep Sea Blue */
  --color-dark-slate: #0c4a6e;       /* Deep Sea Slate */
  
  --color-secondary: #0096c7;        /* Electric Sea Blue Accent */
  --color-secondary-hover: #0284c7;
  --color-secondary-light: #f0f9ff;
  --color-secondary-subtle: rgba(2, 132, 199, 0.14);
  
  /* Secondary Harmonic Token: Pastel Lavender */
  --color-accent: #c4b5fd;          /* Radiant Pastel Lavender */
  --color-accent-hover: #a78bfa;
  --color-accent-light: #f5f3ff;
  --color-accent-gold: #38bdf8;      /* High-vis Sky Sea Blue */
  --color-accent-glow: rgba(196, 181, 253, 0.35);

  /* Vivid Supporting Tones (Sea Blue & Lavender) */
  --color-royal-blue: #0284c7;
  --color-royal-blue-hover: #0369a1;
  --color-royal-light: #f0f9ff;
  --color-cyan: #06b6d4;
  --color-cyan-light: #ecfeff;
  --color-emerald: #0891b2;
  --color-emerald-light: #e0f2fe;
  --color-violet: #8b5cf6;
  --color-rose: #c4b5fd;
  
  /* CMYK Precision Tones */
  --color-cmyk-cyan: #00a8e8;
  --color-cmyk-magenta: #8b5cf6;
  --color-cmyk-yellow: #38bdf8;
  --color-cmyk-key: #0c4a6e;

  /* Typography & High-Contrast Text */
  --color-text-main: #334155;        /* Slate-700 - smooth readable body */
  --color-text-heading: #0c4a6e;     /* Deep Sea Blue - crisp, crystal-clear headings */
  --color-text-muted: #64748b;       /* Slate-500 - secondary text */
  --color-text-light: #94a3b8;       /* Slate-400 - tertiary/hints */
  --color-text-white: #ffffff;
  
  /* Surfaces & Clean Layered Backgrounds */
  --color-bg-pure: #ffffff;
  --color-bg-base: #f8fbff;          /* Crisp sea-ice light canvas */
  --color-bg-alt: #f5f3ff;           /* Alternating pastel lavender section */
  --color-bg-warm: #ede9fe;          /* Warm pastel lavender card background */
  --color-bg-glass: rgba(255, 255, 255, 0.96);
  --color-bg-glass-dark: rgba(3, 105, 161, 0.94);

  /* Status Colors */
  --color-success: #059669;
  --color-success-bg: #ecfdf5;
  --color-error: #ef4444;
  --color-error-bg: #fef2f2;
  --color-warning: #0284c7;
  
  /* ==========================================
     VIBRANT SEA BLUE & PASTEL GRADIENTS
     ========================================== */
  /* Upper Gradients (Sea Blue) */
  --gradient-primary: linear-gradient(135deg, #075985 0%, #0284c7 50%, #06b6d4 100%);
  --gradient-vibrant: linear-gradient(135deg, #0284c7 0%, #0096c7 50%, #38bdf8 100%);
  --gradient-vibrant-reverse: linear-gradient(135deg, #38bdf8 0%, #0096c7 50%, #0284c7 100%);
  --gradient-hero: linear-gradient(140deg, #075985 0%, #0284c7 50%, #06b6d4 100%);
  --gradient-hero-accent: linear-gradient(135deg, #0284c7 0%, #c4b5fd 100%);
  --gradient-accent: linear-gradient(135deg, #0284c7 0%, #06b6d4 100%);
  --gradient-saffron: linear-gradient(135deg, #06b6d4 0%, #c4b5fd 100%);
  --gradient-soft-blue: linear-gradient(135deg, #f8fbff 0%, #e0f2fe 100%);
  --gradient-soft-cream: linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
  --gradient-card-border: linear-gradient(135deg, rgba(2, 132, 199, 0.4) 0%, rgba(196, 181, 253, 0.4) 100%);
  --gradient-purple-gold: linear-gradient(135deg, #0284c7 0%, #06b6d4 50%, #c4b5fd 100%);

  /* Lower Gradients (Hero Banner Global Background: Monthly Calendar Palette #a12999) */
  --bg-hero: #a12999;
  --gradient-lavender-banner: #a12999;
  --gradient-lavender-footer: #801476;
  --gradient-dark-press: linear-gradient(140deg, #0369a1 0%, #0284c7 50%, #2e1065 100%);
  
  --gradient-gold: linear-gradient(135deg, #a78bfa 0%, #c4b5fd 100%);
  --gradient-gold-subtle: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);

  /* ==========================================
     BORDERS & OUTLINES
     ========================================== */
  --color-border: #bae6fd;           /* Soft cyan border */
  --color-border-light: #e0f2fe;     /* Extra light cyan border */
  --color-border-accent: #38bdf8;    /* Vivid cyan highlight border */
  --color-border-lavender: #ddd6fe; /* Soft pastel lavender border */
  --color-border-gold: #c4b5fd;      /* Pastel lavender border */
  --color-border-focus: #06b6d4;     /* Focus outline */

  /* ==========================================
     TYPOGRAPHY
     ========================================== */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Outfit', var(--font-sans);

  /* ==========================================
     MODERN AMBIENT ELEVATIONS & SHADOWS
     ========================================== */
  --shadow-xs: 0 1px 2px rgba(4, 39, 56, 0.04);
  --shadow-sm: 0 2px 5px rgba(4, 39, 56, 0.05), 0 1px 2px rgba(4, 39, 56, 0.03);
  --shadow-md: 0 8px 18px -4px rgba(4, 39, 56, 0.08), 0 3px 7px -2px rgba(4, 39, 56, 0.04);
  --shadow-lg: 0 16px 30px -6px rgba(4, 39, 56, 0.1), 0 6px 12px -3px rgba(4, 39, 56, 0.05);
  --shadow-xl: 0 24px 44px -8px rgba(4, 39, 56, 0.14), 0 10px 18px -4px rgba(4, 39, 56, 0.06);
  --shadow-premium: 0 20px 35px -8px rgba(4, 39, 56, 0.16), 0 10px 16px -4px rgba(6, 182, 212, 0.1);
  
  --shadow-vibrant: 0 10px 25px -4px rgba(6, 182, 212, 0.4);
  --shadow-gold: 0 10px 25px -4px rgba(196, 181, 253, 0.4);
  --shadow-lavender: 0 10px 25px -4px rgba(139, 92, 246, 0.4);
  --shadow-card-hover: 0 20px 35px -8px rgba(4, 39, 56, 0.18), 0 8px 16px -4px rgba(6, 182, 212, 0.15);
  --shadow-glow: 0 0 25px rgba(6, 182, 212, 0.35);
  --shadow-inset: inset 0 2px 4px 0 rgba(4, 39, 56, 0.04);

  /* Fallback aliases for existing selectors */
  --shadow-hard-primary: var(--shadow-md);
  --shadow-hard-accent: var(--shadow-gold);
  --shadow-hard-secondary: var(--shadow-vibrant);
  --shadow-hard-dark: var(--shadow-lg);

  /* ==========================================
     LAYOUT & METRICS
     ========================================== */
  --max-width: 1280px;
  --max-width-wide: 1400px;
  --header-height: 96px;
  --header-height-scrolled: 78px;
  --topbar-height: 38px;
  
  /* Standardized Global Hero Banner Heights */
  --banner-height: 420px;
  --banner-height-tablet: 340px;
  --banner-height-mobile: 240px;
  
  /* Rounded Corners */
  --border-radius-xs: 0px;
  --border-radius-sm: 0px;
  --border-radius-md: 0px;
  --border-radius-lg: 0px;
  --border-radius-xl: 0px;
  --border-radius-full: 9999px;

  /* Transitions */
  --transition-fast: 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-normal: 0.28s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.5s cubic-bezier(0.16, 1, 0.3, 1);
  --transition-bounce: 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================
   GLOBAL RESETS
   ========================================== */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
  height: 100%;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-sans);
  color: var(--color-text-main);
  background-color: var(--color-bg-base);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  width: 100%;
  position: relative;
}

.site-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

main {
  flex: 1 0 auto;
}

.main-footer {
  flex-shrink: 0;
}

/* Images & Media Core */
img, svg, video {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Links */
a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-fast);
}

/* Accessibility Focus Ring */
:focus-visible {
  outline: 2px solid var(--color-secondary);
  outline-offset: 2px;
}

/* ==========================================
   ANIMATIONS & KEYFRAMES
   ========================================== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.94);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes floatGentle {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes floatSoft {
  0%, 100% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-6px) rotate(0.8deg);
  }
}

@keyframes pulseSubtle {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(6, 182, 212, 0.4);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 0 0 8px rgba(6, 182, 212, 0);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(2, 132, 199, 0.45);
  }
  50% {
    transform: scale(1.04);
    box-shadow: 0 0 0 10px rgba(2, 132, 199, 0);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes shimmerLine {
  0% {
    transform: translateX(-150%) skewX(-20deg);
  }
  100% {
    transform: translateX(250%) skewX(-20deg);
  }
}

@keyframes rotateSlow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes radarRipple {
  0% {
    transform: scale(0.95);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.4);
    opacity: 0.3;
  }
  100% {
    transform: scale(1.9);
    opacity: 0;
  }
}

.animate-fade-in-up {
  animation: fadeInUp var(--transition-slow) forwards;
}

.animate-fade-in-down {
  animation: fadeInDown var(--transition-slow) forwards;
}

.animate-fade-in {
  animation: fadeIn var(--transition-normal) forwards;
}

.animate-scale-in {
  animation: scaleIn var(--transition-slow) forwards;
}

.animate-float {
  animation: floatGentle 4s ease-in-out infinite;
}

.animate-float-soft {
  animation: floatSoft 3.5s ease-in-out infinite;
}

.animate-pulse-glow {
  animation: pulseGlow 2.4s ease-in-out infinite;
}

.animate-rotate-slow {
  animation: rotateSlow 24s linear infinite;
}

/* Scroll reveal base classes */
.reveal {
  opacity: 1;
  transform: translateY(0);
}

/* Category-specific theme accents - Product pages use the light theme tint */
body.theme-daily {
  --color-bg-base: #edf5fb;
  --color-bg-alt: #e3f0f9;
  --color-bg-pure: #edf5fb;
  --color-border-light: #d6e8f7;
  --color-border: #cfe3f5;
}

body.theme-monthly {
  --color-bg-base: #edf5fb;
  --color-bg-alt: #e3f0f9;
  --color-bg-pure: #edf5fb;
  --color-border: #cfe3f5;
}

body.theme-printing {
  --color-bg-base: #edf5fb;
  --color-bg-alt: #e3f0f9;
  --color-bg-pure: #edf5fb;
  --color-border: #cfe3f5;
}

body.theme-about {
  --color-bg-base: #faf9f7;
  --color-bg-alt: #f6f1e8;
}