/* Reset */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Custom Properties */
:root {
    --font-main: 'Switzer-Regular', system-ui, -apple-system, sans-serif;
    /*--font-headers: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;*/
    --font-headers: 'Switzer-Bold', system-ui, -apple-system, sans-serif;
    /* Base Font Size - 16px */
    font-size: 16px;

    --base-font-size: 16px;
    --scale-ratio: 1.25;
    --h1-size: 48px;
    --h1-line-height: 110%;
    --h1-letter-spacing: -2%;
    --h2-size: 40px;
    --h2-line-height: 110%;
    --h2-letter-spacing: -2%;
    --h3-size: 32px;
    --h3-line-height: 130%;
    --h3-letter-spacing: -1.5%;
    --h4-size: 24px;
    --h4-line-height: 130%;
    --h4-letter-spacing: -1.5%;
    --h5-size: 20px;
    --h5-line-height: 150%;
    --h5-letter-spacing: -0.5%;
    --h6-size: 18px;
    --h6-line-height: 150%;
    --h6-letter-spacing: 0%;
    --body-lg-size: 17px;
    --body-lg-line-height: 150%;
    --body-lg-letter-spacing: 0.5%;
    --body-size: 16px;
    --body-line-height: 150%;
    --body-letter-spacing: 0.5%;
    --link-size: 15px;
    --link-line-height: 150%;
    --link-letter-spacing: 0.5%;
    --caption-size: 14px;
    --caption-line-height: 160%;
    --caption-letter-spacing: 0.5%;

    /* Minor Third Typography Scale */
    --scale-sm: 0.75rem;      /* 12px */
    --scale-base: 1rem;       /* 16px */
    --scale-md: 1.125rem;     /* 18px */
    --scale-sub: 1.25rem;     /* 20px */
    --scale-h4: 1.5rem;       /* 24px */
    --scale-h3: 2rem;         /* 32px */
    --scale-h2: 2.5rem;       /* 40px */
    --scale-h1: 3rem;         /* 48px */

    /* 8-point Spacing System */
    --space-xs: 0.25rem;     /* 4px */
    --space-sm: 0.5rem;      /* 8px */
    --space-md: 1rem;        /* 16px */
    --space-lg: 1.5rem;      /* 24px */
    --space-xl: 2rem;        /* 32px */
    --space-xxl: 3rem;       /* 48px */

    --color-text: oklch(5% 0 0);          /* Main text color - dark grey */
    --color-text-light: oklch(10% 0 0);    /* Secondary text - lighter grey */
    --color-headings: oklch(5% 0 0);       /* Near black for headings */


  /* Theme Colors */
  --color-primary: oklch(44% 0.17 264.4);            /* Blue */
  --color-primary-light: #3388dd;
  --color-primary-dark: #004c99;

  --color-complementary: #cc9900;      /* Dark Yellow */
  --color-complementary-light: #ffcc33;
  --color-complementary-dark: #996600;

  /* Light/Dark Theme Colors */
  --color-light: oklch(96% 0 0);
  --color-light-offset: oklch(94% 0 0);
  --color-dark: #1a1a1a;
  --color-dark-offset: #434343;

  /* System Colors */
  --color-success: oklch(60% 0.17 140); /*#2ecc71;            /* Green */
  --color-warning: oklch(60% 0.17 45); /*#f39c12;            /* Orange */
  --color-danger: oklch(60% 0.17 25); /*#e74c3c;             /* Red */
  --color-info: oklch(60% 0.17 252); /*#3498db;               /* Blue */

  --shadow-sm: -0.5px 1px 2px oklch(0% 0 0 / 0.25), -2px 4px 8px oklch(0% 0 0 / 0.1);
--shadow: -1px 2px 4px oklch(0% 0 0 / 0.25), -4px 8px 16px oklch(0% 0 0 / 0.1);
--shadow-md: -1px 2px 4px oklch(0% 0 0 / 0.25), -4px 8px 16px oklch(0% 0 0 / 0.1);
--shadow-lg: -1.5px 3px 6px oklch(0% 0 0 / 0.25), -6px 12px 24px oklch(0% 0 0 / 0.1);
--shadow-hover: -1.5px 3px 6px oklch(0% 0 0 / 0.25), -6px 12px 24px oklch(0% 0 0 / 0.1);
--shadow-active: -0.5px 1px 2px oklch(0% 0 0 / 0.25), -2px 4px 8px oklch(0% 0 0 / 0.1);

/*
  --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.15);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
*/
  --shadow-primary: 0 4px 12px rgba(0,102,204,0.2);
  --shadow-primary-hover: 0 6px 16px rgba(0,102,204,0.3);

  /* Border Radius System */
  --radius-md: 8px;      /* buttons, inputs, small components */
  --radius-lg: 12px;     /* cards, containers */
  --radius-xl: 24px;     /* hero sections, standalone content blocks */

  /* Transitions */
--transition-duration: 300ms;
--transition-easing: ease;
--hover-move-x: 1px;
--hover-move-y: -2px;
}

@font-face {
  font-family: 'Switzer-Regular';
  src: url('https://seolinkmap.com/assets/fonts/Switzer-Regular.woff2') format('woff2'),
       url('https://seolinkmap.com/assets/fonts/Switzer-Regular.woff') format('woff'),
       url('https://seolinkmap.com/assets/fonts/Switzer-Regular.ttf') format('truetype');
  font-weight: 400;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Switzer-Bold';
  src: url('https://seolinkmap.com/assets/fonts/Switzer-Bold.woff2') format('woff2'),
       url('https://seolinkmap.com/assets/fonts/Switzer-Bold.woff') format('woff'),
       url('https://seolinkmap.com/assets/fonts/Switzer-Bold.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
  font-style: normal;
}

body {
  font-family: var(--font-main);
  font-size: var(--body-size);
  line-height: var(--body-line-height);
  letter-spacing: var(--body-letter-spacing);
  color: var(--color-text);
  background-color: var(--color-light-offset);
}

/* Headers */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-headers);
    color: var(--color-headings);
}

h1 {
    font-size: var(--h1-size);
    line-height: var(--h1-line-height);
    letter-spacing: var(--h1-letter-spacing);
    margin-top: 0;
    margin-bottom: var(--space-xxl);
  }

  h2 {
    font-size: var(--h2-size);
    line-height: var(--h2-line-height);
    letter-spacing: var(--h2-letter-spacing);
    margin-top: calc(var(--space-xxl) * 1.5);
    margin-bottom: var(--space-xxl);
  }

  h3 {
    font-size: var(--h3-size);
    line-height: var(--h3-line-height);
    letter-spacing: var(--h3-letter-spacing);
    margin-top: calc(var(--space-xl) * 1.5);
    margin-bottom: var(--space-xl);
  }

  h4 {
    font-size: var(--h4-size);
    line-height: var(--h4-line-height);
    letter-spacing: var(--h4-letter-spacing);
    margin-top: calc(var(--space-xl) * 1.5);
    margin-bottom: var(--space-xl);
  }

  h5 {
    font-size: var(--h5-size);
    line-height: var(--h5-line-height);
    letter-spacing: var(--h5-letter-spacing);
    margin-top: calc(var(--space-lg) * 1.5);
    margin-bottom: var(--space-lg);
  }

  h6 {
    font-size: var(--h6-size);
    line-height: var(--h6-line-height);
    letter-spacing: var(--h6-letter-spacing);
    margin-top: calc(var(--space-lg) * 1.5);
    margin-bottom: var(--space-lg);
  }

/* Text Elements */
p {
    font-size: 18px;
    line-height: var(--body-line-height);
    letter-spacing: var(--body-letter-spacing);
    color: var(--color-text-light);
    margin-bottom: var(--space-md);
  }

  p:not(.subhead) {
    max-width: 70ch;
    margin-left: auto;
    margin-right: auto;
  }

.subhead {
  font-size: var(--scale-sub);
  line-height: 1.4;
  margin-bottom: var(--space-md);
  width: 100%; /* Ensure full width */
  color: var(--color-text-light);
}

/* Center-aligned subheaders for specific sections */
p.stats,
.pricing-header .subhead,
.features-header .subhead,
.hero-section .subhead {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
  max-width: 800px; /* Wider than regular paragraphs but still contained */
}

/* Links */
a {
  color: var(--color-primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

a:hover {
  /* border-bottom-color: var(--color-primary); */
}

/* Lists */
ul, ol {
  margin: var(--space-md) 0 var(--space-lg);
  padding-left: var(--space-xl);
}

li {
  margin-bottom: var(--space-sm);
  line-height: 1.7;
}

/* Small Text */
small {
  font-size: var(--scale-sm);
}

/* Content Sections */
section {
  margin-bottom: var(--space-xxl);
}


/* Utility Classes */
.text-primary { color: var(--color-primary); }
.text-complementary { color: var(--color-complementary); }
.text-light { color: var(--color-light); }
.text-dark { color: var(--color-dark); }

.bg-primary { background-color: var(--color-primary); }
.bg-complementary { background-color: var(--color-complementary); }
.bg-light { background-color: var(--color-light); }
.bg-dark { background-color: var(--color-dark); }

/* Status Colors */
.text-success { color: var(--color-success); }
.text-warning { color: var(--color-warning); }
.text-danger { color: var(--color-danger); }
.text-info { color: var(--color-info); }

.bg-success { background-color: var(--color-success); }
.bg-warning { background-color: var(--color-warning); }
.bg-danger { background-color: var(--color-danger); }
.bg-info { background-color: var(--color-info); }

.gradient-text {
    background: linear-gradient(45deg, var(--color-primary) 0%, var(--color-danger) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
}