/* Generated by Frontend Wireframe Engine — Phase 4
   DNA Hash: 5aa7cfc84bf4
   Client: Create-A-Bed
   Do not edit — regenerate via the engine */

@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;600;700;900&family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap');

:root {
  /* Typography — slab-industrial */
  --font-heading: 'Roboto Slab', serif;
  --font-body: 'Roboto', sans-serif;
  --scale-ratio: 1.333;
  --heading-weight: 700;
  --heading-case: normal;
  --heading-letterspacing: -0.01em;
  --heading-line-height: 1.15;
  --body-size: 16px;
  --body-weight: 400;
  --body-line-height: 1.65;
  --body-letterspacing: 0em;
  --max-line-length: 72ch;

  /* Components — soft-approachable */
  --radius: 12px;
  --shadow: 0px 4px 16px 0px rgba(0,0,0,0.10);
  --border: 1px solid rgba(0,0,0,0.10);
  --btn-fill: var(--color-accent);
  --btn-shape: 12px;
  --btn-text-weight: 600;
  --btn-text-spacing: 0.01em;
  --btn-text-transform: none;
  --btn-padding: 14px 28px;
  --card-bg: #ffffff;
  --card-border: 1px solid rgba(0,0,0,0.10);
  --card-shadow: 0px 4px 16px 0px rgba(0,0,0,0.10);
  --card-padding: 24px;
  --card-radius: 12px;
  --input-border: 1px solid rgba(0,0,0,0.20);
  --input-bg: #ffffff;
  --input-focus: 0 0 0 3px rgba(47,165,215,0.25);
  --input-radius: 12px;
  --hover-duration: 200ms;
  --hover-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);

  /* Color — light-airy-minimal (brand-locked) */
  --color-bg-base: #ffffff;
  --color-bg-subtle: #f8fafc;
  --color-bg-card: #ffffff;
  --color-bg-inverted: #272727;
  --color-text-primary: #272727;
  --color-text-secondary: #64748b;
  --color-text-on-dark: #f8fafc;
  --color-accent: #2FA5D7;
  --color-accent-hover: #2590bd;
  --color-success: #169F4D;
  --color-highlight: #FFB74A;
  --color-border: rgba(0, 0, 0, 0.08);

  /* Spacing — airy */
  --spacing-base: 8px;
  --spacing-section: 96px;
  --spacing-content-desktop: 80px;
  --spacing-content-mobile: 24px;
  --spacing-paragraph: 24px;
  --spacing-component: 32px;

  /* Animation — micro-interaction-rich */
  --transition-speed: 180ms;
  --transition-easing: cubic-bezier(0.25, 0.1, 0.25, 1);
  --entrance-duration: 400ms;
  --entrance-easing: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --stagger-delay: 30ms;

  /* Layout — stacked-blocks-bold */
  --layout-max-width: 1280px;
  --layout-whitespace-ratio: 0.35;

  /* Texture — subtle-grain */
  --texture-type: subtle-grain;

  /* Navigation — solid-minimal */
  --nav-type: solid-minimal;
  --nav-height: 64px;
}

/* Grain overlay */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence baseFrequency='0.65' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.04;
  mix-blend-mode: overlay;
  pointer-events: none;
  z-index: 100;
}

/* Micro-interaction entrance animation */
@keyframes micro-enter {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* Scroll-reveal utility */
.reveal {
  opacity: 0;
  transform: translateY(12px);
}
.reveal.visible {
  animation: micro-enter var(--entrance-duration) var(--entrance-easing) forwards;
}

/* Stagger children */
.stagger > *:nth-child(1) { animation-delay: 0ms; }
.stagger > *:nth-child(2) { animation-delay: 30ms; }
.stagger > *:nth-child(3) { animation-delay: 60ms; }
.stagger > *:nth-child(4) { animation-delay: 90ms; }
.stagger > *:nth-child(5) { animation-delay: 120ms; }
.stagger > *:nth-child(6) { animation-delay: 150ms; }

/* Base typography */
body {
  font-family: var(--font-body);
  font-size: var(--body-size);
  font-weight: var(--body-weight);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letterspacing);
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  text-transform: var(--heading-case);
  letter-spacing: var(--heading-letterspacing);
  line-height: var(--heading-line-height);
}

/* Button base */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-padding);
  border-radius: var(--btn-shape);
  font-family: var(--font-body);
  font-weight: var(--btn-text-weight);
  letter-spacing: var(--btn-text-spacing);
  text-transform: var(--btn-text-transform);
  text-decoration: none;
  transition: all var(--hover-duration) var(--hover-easing);
  cursor: pointer;
}

.btn-primary {
  background-color: var(--color-accent);
  color: #ffffff;
  border: none;
}

.btn-primary:hover {
  background-color: var(--color-accent-hover);
  transform: translateY(-1px);
  box-shadow: 0px 6px 20px rgba(47, 165, 215, 0.3);
}

.btn-secondary {
  background-color: transparent;
  color: var(--color-text-primary);
  border: 2px solid var(--color-text-primary);
}

.btn-secondary:hover {
  background-color: var(--color-text-primary);
  color: #ffffff;
  transform: translateY(-1px);
}

/* Card base */
.card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--card-radius);
  box-shadow: var(--card-shadow);
  padding: var(--card-padding);
  transition: all var(--hover-duration) var(--hover-easing);
}

.card:hover {
  transform: translateY(-2px);
  box-shadow: 0px 8px 24px rgba(0,0,0,0.14);
}

/* Inverted section (mutation) */
.section-inverted {
  background-color: var(--color-bg-inverted);
  color: var(--color-text-on-dark);
}

.section-inverted .text-secondary {
  color: #94a3b8;
}

/* Section base */
.section {
  padding: var(--spacing-section) var(--spacing-content-desktop);
}

@media (max-width: 768px) {
  .section {
    padding: 64px var(--spacing-content-mobile);
  }
}

/* Container */
.container-content {
  max-width: var(--layout-max-width);
  margin: 0 auto;
}