@import url('https://fonts.googleapis.com/css2?family=Rethink+Sans:ital,wght@0,400..800;1,400..800&display=swap');

@import 'index.css';
@import 'about.css';
@import 'packages.css';
@import 'gallery.css';
@import 'blog.css';
@import 'contact.css';

@layer radius {
  :root {
    --radius-sm: 0.25rem;
    --radius-md: 0.5rem;
    --radius-lg: 0.75rem;
    --radius-xl: 1rem;
  }
}

@layer color {
  :root {
    --color-loulou-50: #fdf6fc;
    --color-loulou-100: #fbecfb;
    --color-loulou-200: #f6d8f5;
    --color-loulou-300: #eeb9ea;
    --color-loulou-400: #e38fdc;
    --color-loulou-500: #d164c7;
    --color-loulou-600: #b544a9;
    --color-loulou-700: #953688;
    --color-loulou-800: #7a2e6f;
    --color-loulou-900: #652a5b;
    --color-loulou-950: #411139;

    /* Backward-compatible mappings */
    --color-brand: var(--color-loulou-950);
    --color-brand-accent: var(--color-loulou-400);
    --color-text-heading: var(--color-loulou-950);
    --color-text-body: hsl(0, 0%, 0%);
    --color-background-brand: var(--color-loulou-50);
    --color-background: hsl(0, 0%, 98%);
  }
}

@layer brakepoints {
  :root {
    --breakpoint-sm: 32rem;
    --breakpoint-md: 48rem;
    --breakpoint-lg: 64rem;
    --breakpoint-xl: 80rem;
  }
}

@layer typography {
  :root {
    /* XS ~ base 12px */
    --font-size-xs: clamp(0.7rem, 0.25vw + 0.65rem, 0.8rem);
    /* SM ~ base 14px */
    --font-size-sm: clamp(0.8rem, 0.3vw + 0.7rem, 0.95rem);
    /* MD ~ base 16px */
    --font-size-md: clamp(0.95rem, 0.35vw + 0.85rem, 1.05rem);
    /* LG ~ base 18px */
    --font-size-lg: clamp(1.05rem, 0.4vw + 0.9rem, 1.2rem);
    /* XL ~ base 20px */
    --font-size-xl: clamp(1.15rem, 0.45vw + 1rem, 1.35rem);
    /* 2XL ~ base 24px */
    --font-size-2xl: clamp(1.3rem, 0.5vw + 1.1rem, 1.6rem);
    /* 3XL ~ base 28px */
    --font-size-3xl: clamp(1.6rem, 0.6vw + 1.2rem, 1.9rem);
    /* 4XL ~ base 32px → target ~40px max */
    --font-size-4xl: clamp(2rem, 0.8vw + 1.5rem, 2.5rem);
    /* 5XL ~ base 36px → target ~48px max */
    --font-size-5xl: clamp(2.25rem, 1vw + 1.75rem, 3rem);
    /* 6XL ~ base 48px → target ~60px max */
    --font-size-6xl: clamp(3rem, 1vw + 2.5rem, 3.75rem);
  }
}

@layer animations {
  .fade-in {
    opacity: 1;
    transition: opacity 0.3s ease-in-out;
  }

  .fade-out {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
  }
}

@layer global {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
    height: 100%;
    color: var(--color-text-body);
    font-family: 'Rethink Sans', sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
  }

  span {
    font-family: 'Rethink Sans', sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
  }

  body {
    background: var(--color-background);
    line-height: 1.5;
  }

  img {
    display: block;
    max-width: 100%;
    height: auto;
  }

  h1,
  h2,
  h3 {
    text-wrap: balance;
    margin: 0;
    font-weight: 700;
    line-height: 1.2;
  }

  p {
    margin: 0;
    line-height: 1.4;
  }

  a {
    text-decoration: none;
    color: inherit;
    /* inherits default text color unless overridden */
  }

  nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    gap: 1.25rem;
  }

  nav li {
    list-style: none;
  }
}

@layer utilities {
  .max-width-wrapper {
    margin-inline: auto;
    width: 100%;
    max-width: 1440px;
    padding-inline: 1.25rem;
  }

  .section-padding {
    padding-block: 4rem;
  }

  .radius-sm {
    border-radius: var(--radius-sm);
  }

  .radius-md {
    border-radius: var(--radius-md);
  }

  .radius-lg {
    border-radius: var(--radius-lg);
  }

  .radius-xl {
    border-radius: var(--radius-xl);
  }

  .radius-full {
    border-radius: 50px;
  }

  @media (width >=48rem) {
    .max-width-wrapper {
      padding-inline: 5rem;
    }

    .section-padding {
      padding-block: 6rem;
    }
  }
}

@layer components {
  @layer page-hero {
    .page-hero {
      position: relative;
      height: 60vh;
      /* adjustable banner height */
      display: flex;
      align-items: flex-end;
      padding: 0 3rem 5rem 1rem;
      color: white;
      overflow: hidden;
    }

    .page-hero img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      /* same as background-size: cover */
      object-position: center;
      /* keep focus */
      z-index: 0;
    }

    .page-hero::before {
      content: '';
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.5);
      /* dark overlay */
      z-index: 1;
    }

    .page-hero-content {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      position: relative;
      z-index: 2;
      max-width: 800px;
      text-align: left;
    }

    .page-hero-content h1 {
      font-size: var(--font-size-5xl);
      font-weight: 700;
      line-height: 1.2;
    }

    .page-hero-content p {
      font-size: var(--font-size-lg);
      opacity: 0.9;
      max-width: 60ch;
      margin: 0;
    }
  }
}