@import "tailwindcss/base";
@import "tailwindcss/components";
@import "tailwindcss/utilities";

/* Storify Design System - Minimal, card-based interface with soft pastel palette
Professional but heartfelt, designed for parents. All colors MUST be HSL for consistency.
*/

@layer base {
  :root {
    /* Background & Surface Colors - Light neutrals and off-whites */
    --background: 34 26% 94%; /* #F8F1EC */
    --foreground: 210 29% 24%; /* #2C3E50 - Dark slate for headlines */
    --surface: 0 0% 99%; /* #FDFDFD */
    --surface-secondary: 40 100% 99%; /* #FFFDFB - Warm off-white */

    /* Card & Container Colors - Clean whites with refined shadows */
    --card: 0 0% 100%;
    --card-foreground: 210 29% 24%;
    --card-hover: 0 0% 97%;

    /* Popover Colors */
    --popover: 0 0% 100%;
    --popover-foreground: 210 29% 24%;

    /* Primary Colors - Warm peachy tone */
    --primary: 15 49% 69%; /* #D99282 */
    --primary-foreground: 0 0% 100%;
    --primary-soft: 15 49% 90%; /* Lighter version */
    --primary-hover: 15 49% 64%;
    
    /* Secondary Colors - Warm brown */
    --secondary: 23 35% 58%; /* #B8796B */
    --secondary-foreground: 0 0% 100%;
    --secondary-soft: 23 35% 88%;
    --secondary-hover: 23 35% 53%;

    /* Accent Colors - Soft orange */
    --accent: 30 65% 75%; /* Soft orange */
    --accent-foreground: 210 29% 24%;
    --accent-soft: 30 65% 88%;
    --accent-hover: 30 65% 70%;

    /* Blush accent */
    --blush: 0 57% 90%; /* #F6D6D6 */
    --blush-foreground: 210 29% 24%;

    /* Lavender accent */
    --lavender: 265 46% 80%; /* #C9B6E4 */
    --lavender-foreground: 210 29% 24%;

    /* Teal accent - Pastel teal */
    --teal: 170 25% 80%; /* #B4E2DA */
    --teal-foreground: 210 29% 24%;

    /* Warm brown accent */
    --warm-brown: 28 28% 60%; /* #A67856 */
    --warm-brown-foreground: 0 0% 100%;

    /* Teal button */
    --teal-button: 170 40% 45%; /* #4C8D86 */
    --teal-button-foreground: 0 0% 100%;

    /* Subtitle gray */
    --subtitle: 0 0% 47%; /* #777777 */

    /* Soft divider */
    --divider: 0 0% 90%; /* #E5E5E5 */

    /* Light background shading */
    --bg-shade: 0 0% 98%; /* #FAFAFA */

    /* Header card background */
    --header-card: 210 44% 93%; /* #E8F1FA */

    /* Muted & Neutral Colors - Refined grays */
    --muted: 0 0% 96%;
    --muted-foreground: 0 0% 49%; /* #7D7D7D - Body text gray */
    --muted-dark: 0 0% 39%;

    /* Semantic Colors */
    --success: 128 25% 71%;
    --success-foreground: 210 29% 24%;
    --warning: 45 90% 55%;
    --warning-foreground: 210 29% 24%;
    --destructive: 0 57% 65%;
    --destructive-foreground: 0 0% 100%;

    /* Border & Input Colors */
    --border: 214 8% 88%; /* Refined border color */
    --border-soft: 0 0% 94%;
    --input: 214 8% 88%;
    --input-focus: 214 35% 58%;
    --ring: 214 35% 58%;

    /* Gradients - Updated with new primary color */
    --gradient-primary: linear-gradient(135deg, hsl(15 49% 69%), hsl(15 49% 80%));
    --gradient-secondary: linear-gradient(135deg, hsl(23 35% 58%), hsl(23 35% 70%));
    --gradient-warm: linear-gradient(135deg, hsl(0 57% 90%), hsl(265 46% 80%));
    --gradient-surface: linear-gradient(180deg, hsl(0 0% 100%), hsl(0 0% 98%));
    
    /* Shadows - Soft gray with specified opacity and blur */
    --shadow-sm: 0 2px 8px hsl(214 8% 85% / 0.15);
    --shadow-md: 0 4px 12px hsl(214 8% 85% / 0.20); /* #D5D8DC at 20% opacity, 12px blur */
    --shadow-lg: 0 8px 16px hsl(214 8% 85% / 0.25); /* #D5D8DC at 25% opacity, 16px blur */
    --shadow-warm: 0 4px 16px hsl(265 46% 80% / 0.15);

    /* Animations & Transitions */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-fast: all 0.2s ease-out;
    --transition-slow: all 0.5s ease-in-out;

    /* Border Radius - 16px cards as specified */
    --radius: 1rem; /* 16px */
    --radius-sm: 0.5rem;
    --radius-lg: 1.25rem;
    --radius-xl: 1.5rem;

    /* Sidebar & Navigation backgrounds */
    --sidebar-background: 34 26% 94%;
    --navigation-background: 34 20% 88%; /* #EADFD8 */
    --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%;
  }

  .dark {
    /* Dark mode - maintaining refined, muted feel */
    --background: 220 20% 8%;
    --foreground: 0 0% 95%;
    --surface: 220 20% 10%;
    --surface-secondary: 220 15% 12%;

    --card: 220 20% 10%;
    --card-foreground: 0 0% 95%;
    --card-hover: 220 15% 12%;

    --popover: 220 20% 10%;
    --popover-foreground: 0 0% 95%;

    --primary: 15 49% 75%; /* Lighter version for dark mode */
    --primary-foreground: 220 20% 8%;
    --primary-soft: 15 49% 25%;
    --primary-hover: 15 49% 78%;

    --secondary: 23 35% 65%; /* Adjusted for dark mode */
    --secondary-foreground: 0 0% 98%;
    --secondary-soft: 23 35% 25%;
    --secondary-hover: 23 35% 68%;

    --accent: 30 65% 65%; /* Soft orange for dark mode */
    --accent-foreground: 220 20% 8%;
    --accent-soft: 30 65% 25%;
    --accent-hover: 30 65% 60%;

    --muted: 220 15% 15%;
    --muted-foreground: 0 0% 65%; /* Lighter gray for readability */
    --muted-dark: 0 0% 75%;

    --border: 220 15% 18%;
    --border-soft: 220 10% 15%;
    --input: 220 15% 18%;
    --input-focus: 214 35% 68%;
    --ring: 214 35% 68%;

    /* Dark mode semantic colors */
    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 210 40% 98%;

    --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%;
  }
}

@layer base {
  * {
    border-color: hsl(var(--border));
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    font-family: "SF Pro Rounded", "Inter", "-apple-system", "BlinkMacSystemFont", "SF Pro Display", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif";
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    min-height: 100vh;
    min-height: 100dvh; /* For mobile viewport, especially iOS */
  }

  /* Mobile-first responsive typography - Clear hierarchy */
  h1 {
    font-size: 1.5rem; /* 24px */
    line-height: 2rem; /* 32px */
    font-weight: 700;
    letter-spacing: -0.025em;
    color: hsl(var(--foreground));
  }
  
  h2 {
    font-size: 1.25rem; /* 20px */
    line-height: 1.75rem; /* 28px */
    font-weight: 600;
    letter-spacing: -0.025em;
    color: hsl(var(--foreground));
  }
  
  h3 {
    font-size: 1.125rem; /* 18px */
    line-height: 1.75rem; /* 28px */
    font-weight: 500;
    color: hsl(var(--foreground));
  }

  /* Body text styling */
  p, .body-text {
    color: hsl(var(--muted-foreground));
  }

  /* Smooth transitions for interactive elements */
  button, a, [role="button"] {
    transition: var(--transition-fast);
  }

  /* iOS-style safe area support */
  .safe-area-top {
    padding-top: env(safe-area-inset-top);
  }
  
  .safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom);
  }

  /* Custom scrollbars for webkit browsers */
  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-track {
    background: hsl(var(--muted));
  }

  ::-webkit-scrollbar-thumb {
    background: hsl(var(--muted-foreground) / 0.3);
    border-radius: 3px;
  }

  ::-webkit-scrollbar-thumb:hover {
    background: hsl(var(--muted-foreground) / 0.5);
  }

  /* Fixed header and footer layout */
  .fixed-header-footer-layout {
    height: 100vh;
    height: 100dvh; /* Dynamic viewport height for keyboard */
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
  }

  /* Fixed top bar */
  .fixed-top-bar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: hsl(var(--background));
    display: flex;
    align-items: center;
    padding: 0 1rem;
    padding-top: env(safe-area-inset-top, 0px); /* iOS safe area */
    box-shadow: var(--shadow-sm);
  }

  /* Scrollable content area */
  .scrollable-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* Use padding instead of margins for better keyboard handling */
    padding-top: calc(65px + env(safe-area-inset-top, 0px)); /* Height of top bar + safe area */
    padding-bottom: 80px; /* Height of bottom nav */
    padding-left: 1rem;
    padding-right: 1rem;
    padding-bottom: calc(80px + env(safe-area-inset-bottom)); /* Account for safe area */
  }

  /* Fixed bottom navigation */
  .fixed-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    background: hsl(var(--background));
    height: 80px; /* Fixed height for consistent layout */
    display: flex;
    align-items: center;
    padding: 0 0.5rem;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: var(--shadow-lg);
    transition: opacity 0.3s ease, transform 0.3s ease;
    border-top: 1px solid hsl(var(--border-soft));
  }

  /* Hide footer when footer-hidden class is added to body */
  :global(.footer-hidden) .fixed-bottom-nav {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
  }

  /* Hide all navigation when hide-navigation class is added to body */
  .hide-navigation .fixed-top-bar,
  .hide-navigation .fixed-bottom-nav {
    display: none !important;
    background: transparent !important;
  }

  /* Enhanced keyboard handling for iOS */
  @supports (-webkit-touch-callout: none) {

  /* Disable scrolling on full-screen iPhones (iPhone X+) for Home page */
  body.home-no-scroll {
    overflow: hidden !important;
  }

  body.home-no-scroll .fixed-header-footer-layout {
    height: 100vh;
    height: 100dvh; /* Use dynamic viewport height to avoid keyboard issues */
  }

  body.home-no-scroll .scrollable-content {
    overflow-y: hidden !important;
  }
    /* Ensure layout adapts to keyboard */
    .fixed-header-footer-layout {
      height: 100dvh; /* Use dynamic viewport height */
      transition: height 0.3s ease;
    }

    /* Prevent layout shift when keyboard appears */
    .scrollable-content {
      padding-bottom: calc(80px + env(safe-area-inset-bottom));
      transition: padding-bottom 0.3s ease;
    }

    /* Ensure bottom nav stays in place during keyboard interactions */
    .fixed-bottom-nav {
      position: fixed;
      bottom: 0;
      /* Use transform3d for better performance */
      transform: translate3d(0, 0, 0);
      will-change: transform;
    }
  }

  /* iOS-specific optimizations */
  @supports (-webkit-touch-callout: none) {
    /* Ensure smooth scrolling on iOS */
    .scrollable-content {
      -webkit-overflow-scrolling: touch;
    }

    /* Optimize for iOS keyboard */
    .fixed-header-footer-layout {
      height: 100dvh; /* Use dynamic viewport height */
    }
  }
}