@import 'tailwindcss';

/* Tailwind v4 Theme Configuration */
@theme {
  /* Colors */
  --color-dark: #111111;
  --color-gray: #777777;
  --color-gray-light: #999999;
  --color-light: #ececec;
  --color-light-soft: #f8f8f8;
  --color-light-bg: #f4f4f4;
  --color-accent: #2CAADF;
  --color-accent-dark: #1a8fc4;
  --color-error: #e80000;
  --color-success: #0F9D58;
  --color-footer-bg: #e3e3e3;
  --color-footer-copyright: #222222;
  --color-border: #dddddd;
  --color-border-light: #cccccc;

  /* Fonts */
  --font-heading: var(--font-montserrat), 'Montserrat', 'Open Sans', 'Helvetica Neue', sans-serif;
  --font-heading-alt: var(--font-open-sans), 'Open Sans', 'Montserrat', 'Helvetica Neue', sans-serif;
  --font-body: var(--font-open-sans), 'Open Sans', 'Helvetica Neue', 'Helvetica', sans-serif;

  /* Spacing */
  --spacing-ws-s: 50px;
  --spacing-ws-m: 100px;
  --spacing-ws-l: 160px;

  /* Shadows */
  --shadow-card: 0 1px 1px rgba(0, 0, 0, 0.2);
  --shadow-card-hover: 0 22px 43px rgba(0, 0, 0, 0.15);
}

/* Base Styles */
@layer base {
  html {
    font-size: 16px;
    scroll-behavior: smooth;
  }

  body {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 14px;
    letter-spacing: 0.2px;
    line-height: 1.8em;
    color: var(--color-gray);
    background-color: white;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }

  /* Headings */
  h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    color: var(--color-dark);
  }

  h1 { font-size: 1.7em; letter-spacing: 5px; }
  h2 { font-size: 1.5em; letter-spacing: 4px; }
  h3 { font-size: 1.3em; letter-spacing: 3.5px; }
  h4 { font-size: 1.07em; letter-spacing: 3px; }
  h5 { font-size: 1em; letter-spacing: 2px; }
  h6 { font-size: 0.85em; letter-spacing: 2px; }

  /* Links */
  a {
    color: var(--color-accent);
    border-bottom: 1px solid transparent;
    transition: all 500ms;
    text-decoration: none;
  }

  a:hover {
    border-bottom-color: var(--color-accent);
  }

  /* Selection */
  ::selection {
    background: var(--color-dark);
    color: white;
  }
}

/* Component Layer */
@layer components {
  .container-def {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .section-spacing {
    padding-top: var(--spacing-ws-m);
    padding-bottom: var(--spacing-ws-m);
  }

  .section-spacing-lg {
    padding-top: var(--spacing-ws-l);
    padding-bottom: var(--spacing-ws-l);
  }

  .h-alt {
    font-family: var(--font-heading-alt);
    font-weight: 300;
    text-transform: uppercase;
  }
}

/* Utility Layer */
@layer utilities {
  .bg-parallax {
    background-attachment: fixed;
    background-size: cover;
    background-position: center;
  }

  .transition-def {
    transition: all 500ms;
  }
}
