/* ==========================================================================
   Design System - Main Stylesheet
   ========================================================================== */

/* --------------------------------------------------------------------------
   CSS Variables
   -------------------------------------------------------------------------- */
:root {
  color-scheme: light;

  --fx-noise: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='a'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.34' numOctaves='4' stitchTiles='stitch'%3E%3C/feTurbulence%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23a)' opacity='0.4'%3E%3C/rect%3E%3C/svg%3E");
  --pricing-bg-color: oklch(0.92 0.12 128.26);
  --pricing-glow-color: oklch(0.32 0.1 244.08 / 0.62);
  --why-section-start-color: oklch(0.78 0.22 327.48);
  --why-section-end-color: oklch(0.61 0.23 274.14 / 0.62);
  /* Base colors */
  --color-base-100: oklch(98% 0.005 85);
  --color-base-200: oklch(96% 0.01 85);
  --color-base-300: oklch(92% 0.02 85);
  --color-base-content: oklch(30% 0.02 85);

  /* Primary */
  --color-primary: oklch(55% 0.1 180);
  --color-primary-content: oklch(100% 0 0);

  /* Secondary */
  --color-secondary: oklch(60% 0.1 60);
  --color-secondary-content: oklch(100% 0 0);

  /* Accent */
  --color-accent: oklch(55% 0.1 180);
  --color-accent-content: oklch(100% 0 0);

  /* Neutral */
  --color-neutral: oklch(15% 0.01 85);
  --color-neutral-content: oklch(95% 0.01 85);

  /* State colors */
  --color-info: oklch(80% 0.15 240);
  --color-info-content: oklch(25% 0.06 240);
  --color-success: oklch(55% 0.1 180);
  --color-success-content: oklch(100% 0 0);
  --color-warning: oklch(80% 0.15 80);
  --color-warning-content: oklch(25% 0.15 80);
  --color-error: oklch(80% 0.15 25);
  --color-error-content: oklch(25% 0.15 25);

  /* Border radius */
  --radius-selector: 0.5rem;
  --radius-field: 0.25rem;
  --radius-box: 0.5rem;

  /* Sizing */
  --size-selector: 0.21875rem;
  --size-field: 0.21875rem;
  --border: 1px;
  --depth: 1;
  --noise: 1;

  /* Custom shadows and gradients */
  --shadow-color: oklch(0.67 0.16 172.29 / 0.5);
  --header-gradient: linear-gradient(
    65deg,
    oklch(0.79 0.18 218.18 / 0.8),
    oklch(0.93 0.19 101.74 / 0.8)
  );
  --logo-shadow-color: oklch(100% 0 0 / 0.5);
  --logo-text-color: oklch(28% 0.17 300);

  /* Layout */
  --content-max-width: 72rem;
  --content-padding: 1.5rem;
}

/* --------------------------------------------------------------------------
   CSS Reset
   -------------------------------------------------------------------------- */
html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--color-base-content);
  background-color: var(--color-base-100);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

@scope (.linatora) {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }


  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0 0 1rem;
    font-family: Georgia, "Times New Roman", Times, serif;
    font-style: italic;
    font-weight: 900;
    line-height: 1.3;
    letter-spacing: -0.04em;
    color: var(--color-neutral);
  }

  p {
    margin: 0 0 1.25rem;
  }

  ul,
  ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
  }

  li {
    margin-bottom: 0.5rem;
  }

  a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
  }

  a:hover {
    color: oklch(45% 0.1 180);
    text-decoration: underline;
  }

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

/* --------------------------------------------------------------------------
   Layout: Layer System
   -------------------------------------------------------------------------- */
.layer {
  width: 100%;
  padding: 4rem 0;
}

.layer--hero {
  padding-top: 6rem;
  padding-bottom: 5rem;
  background-color: var(--color-base-100);
}

.layer--alt {
  background-color: var(--color-base-200);
}

.layer--accent {
  background-color: var(--color-primary);
  color: var(--color-primary-content);
}

.layer--accent .heading--2,
.layer--accent .heading--3 {
  color: var(--color-primary-content);
}

.layer__content {
  width: 100%;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 0 var(--content-padding);
}