---
const { title } = Astro.props;
---

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>{title}</title>
    <link rel="icon" href="/src/img/favicon.ico" type="image/x-icon" />
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Alfa+Slab+One&family=Barlow:wght@400;600;700&display=swap" rel="stylesheet">
  </head>
  <body>
    <slot />
  </body>
</html>

<style is:global>
  * { box-sizing: border-box; margin: 0; padding: 0; }

  /* Camel Crush Smooth Silver color palette */
  :root {
    --crush-teal: #008b8b;
    --crush-teal-light: #20b2aa;
    --crush-teal-dark: #006666;
    --crush-silver: #c0c0c0;
    --crush-white: #ffffff;
    --crush-bg: #f8f9fa;
    --crush-cream: #faf8f5;
  }

  body {
    background: var(--crush-white);
    font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--crush-teal-dark);
    min-height: 100vh;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
  }

  a {
    color: var(--crush-teal);
    text-decoration: none;
    transition: all 0.3s ease;
  }

  a:hover {
    color: var(--crush-teal-light);
  }

  a:visited {
    color: var(--crush-teal);
  }
</style>
