/* =================================================
   MODERN CARBON-INSPIRED DESIGN SYSTEM 2025
   Professional Psychology Website
   ================================================= */

/* Import Google Fonts - IBM Plex Family */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700&family=IBM+Plex+Serif:ital,wght@0,400;0,500;0,600&family=IBM+Plex+Mono:wght@400;500&display=swap');

/* =================================================
   DESIGN TOKENS & FOUNDATIONS
   ================================================= */

:root {
  /* === COLOR SYSTEM === */
  /* Primary Brand Colors */
  --cds-green-10: #defbe6;
  --cds-green-20: #a7f0ba;
  --cds-green-30: #6fdc8c;
  --cds-green-40: #42be65;
  --cds-green-50: #24a148;
  --cds-green-50-rgb: 36, 161, 72; /* Added RGB version for rgba() usage */
  --cds-green-60: #198038;
  --cds-green-70: #0e6027;
  --cds-green-80: #044317;
  --cds-green-90: #022d0d;
  --cds-green-100: #071908;

  /* Neutral Grays */
  --cds-gray-10: #f4f4f4;
  --cds-gray-20: #e0e0e0;
  --cds-gray-30: #c6c6c6;
  --cds-gray-40: #a8a8a8;
  --cds-gray-50: #8d8d8d;
  --cds-gray-60: #6f6f6f;
  --cds-gray-70: #525252;
  --cds-gray-80: #393939;
  --cds-gray-90: #262626;
  --cds-gray-100: #161616;

  /* Support Colors */
  --cds-blue-40: #4589ff;
  --cds-blue-60: #0f62fe;
  --cds-blue-60-rgb: 15, 98, 254; /* Added RGB version */
  --cds-red-50: #da1e28;
  --cds-yellow-30: #f1c21b;
  --cds-purple-50: #8a3ffc;

  /* === SEMANTIC TOKENS === */
  --cds-background: #ffffff;
  --cds-background-subtle: #f4f4f4;
  --cds-background-brand: var(--cds-green-50);
  
  --cds-text-primary: var(--cds-gray-100);
  --cds-text-secondary: var(--cds-gray-70);
  --cds-text-placeholder: var(--cds-gray-50);
  --cds-text-on-color: #ffffff;
  --cds-text-helper: var(--cds-gray-60);
  
  --cds-border-subtle: var(--cds-gray-20);
  --cds-border-strong: var(--cds-gray-50);
  --cds-border-interactive: var(--cds-blue-60);
  
  --cds-interactive-01: var(--cds-green-50);
  --cds-interactive-02: var(--cds-gray-80);
  --cds-interactive-03: var(--cds-blue-60);
  --cds-hover-primary: var(--cds-green-60);
  --cds-hover-secondary: var(--cds-gray-90);
  
  /* === TYPOGRAPHY === */
  --cds-font-family-mono: 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace;
  --cds-font-family-sans: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  --cds-font-family-serif: 'IBM Plex Serif', 'Georgia', Times, serif;
  
  /* Typography Scale */
  --cds-font-size-01: 0.75rem;     /* 12px */
  --cds-font-size-02: 0.875rem;    /* 14px */
  --cds-font-size-03: 1rem;        /* 16px */
  --cds-font-size-04: 1.125rem;    /* 18px */
  --cds-font-size-05: 1.25rem;     /* 20px */
  --cds-font-size-06: 1.5rem;      /* 24px */
  --cds-font-size-07: 1.75rem;     /* 28px */
  --cds-font-size-08: 2rem;        /* 32px */
  --cds-font-size-09: 2.25rem;     /* 36px */
  --cds-font-size-10: 2.625rem;    /* 42px */
  --cds-font-size-11: 3rem;        /* 48px */
  --cds-font-size-12: 3.375rem;    /* 54px */
  
  /* Font Weights */
  --cds-font-weight-light: 300;
  --cds-font-weight-regular: 400;
  --cds-font-weight-medium: 500;
  --cds-font-weight-semibold: 600;
  --cds-font-weight-bold: 700;
  
  /* Line Heights */
  --cds-line-height-01: 1.29;
  --cds-line-height-02: 1.375;
  --cds-line-height-03: 1.5;
  --cds-line-height-04: 1.25;
  
  /* === SPACING SCALE === */
  --cds-spacing-01: 0.125rem;    /* 2px */
  --cds-spacing-02: 0.25rem;     /* 4px */
  --cds-spacing-03: 0.5rem;      /* 8px */
  --cds-spacing-04: 0.75rem;     /* 12px */
  --cds-spacing-05: 1rem;        /* 16px */
  --cds-spacing-06: 1.5rem;      /* 24px */
  --cds-spacing-07: 2rem;        /* 32px */
  --cds-spacing-08: 2.5rem;      /* 40px */
  --cds-spacing-09: 3rem;        /* 48px */
  --cds-spacing-10: 4rem;        /* 64px */
  --cds-spacing-11: 5rem;        /* 80px */
  --cds-spacing-12: 6rem;        /* 96px */
  --cds-spacing-13: 10rem;       /* 160px */
  
  /* === LAYOUT === */
  --cds-container-max-width: 1584px;
  --cds-container-padding: var(--cds-spacing-05);
  
  /* Breakpoints */
  --cds-breakpoint-sm: 320px;
  --cds-breakpoint-md: 672px;
  --cds-breakpoint-lg: 1056px;
  --cds-breakpoint-xl: 1312px;
  --cds-breakpoint-max: 1584px;
  
  /* === MOTION === */
  --cds-duration-fast-01: 70ms;
  --cds-duration-fast-02: 110ms;
  --cds-duration-moderate-01: 150ms;
  --cds-duration-moderate-02: 240ms;
  --cds-duration-slow-01: 400ms;
  --cds-duration-slow-02: 700ms;
  
  --cds-easing-standard: cubic-bezier(0.5, 0, 0.1, 1);
  --cds-easing-entrance: cubic-bezier(0, 0, 0.3, 1);
  --cds-easing-exit: cubic-bezier(0.3, 0, 1, 1);
  
  /* === ELEVATION === */
  --cds-shadow-01: 0 1px 2px rgba(0, 0, 0, 0.1);
  --cds-shadow-02: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --cds-shadow-03: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --cds-shadow-04: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --cds-shadow-05: 0 20px 25px rgba(0, 0, 0, 0.1), 0 10px 10px rgba(0, 0, 0, 0.04);
}

/* =================================================
   RESET & BASE STYLES
   ================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

/* Smooth transitions for all elements */
*, *::before, *::after {
  transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}

/* Smooth Scrolling - only for anchor navigation */
html {
  scroll-padding-top: 80px; /* Account for fixed navbar */
}

/* Enable smooth scroll only for anchor links */
html.smooth-scroll {
  scroll-behavior: smooth;
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  line-height: var(--cds-line-height-03);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-size-03);
  font-weight: var(--cds-font-weight-regular);
  color: var(--cds-text-primary);
  background-color: var(--cds-background);
  overflow-x: hidden; /* Only hide horizontal scroll */
  overflow-y: auto; /* Ensure vertical scroll is available */
  touch-action: manipulation; /* Allow native scrolling on mobile */
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
  overflow-wrap: break-word;
}

/* =================================================
   TYPOGRAPHY STYLES
   ================================================= */

.cds--type-heading-01 {
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-size-02);
  font-weight: var(--cds-font-weight-semibold);
  line-height: var(--cds-line-height-01);
  letter-spacing: 0.16px;
}

.cds--type-heading-02 {
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-size-03);
  font-weight: var(--cds-font-weight-semibold);
  line-height: var(--cds-line-height-02);
  letter-spacing: 0;
}

.cds--type-heading-03 {
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-size-05);
  font-weight: var(--cds-font-weight-regular);
  line-height: var(--cds-line-height-02);
  letter-spacing: 0;
}

.cds--type-heading-04 {
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-size-07);
  font-weight: var(--cds-font-weight-regular);
  line-height: var(--cds-line-height-02);
  letter-spacing: 0;
}

.cds--type-heading-05 {
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-size-08);
  font-weight: var(--cds-font-weight-regular);
  line-height: var(--cds-line-height-02);
  letter-spacing: 0;
}

.cds--type-heading-06 {
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-size-10);
  font-weight: var(--cds-font-weight-light);
  line-height: var(--cds-line-height-02);
  letter-spacing: 0;
}

.cds--type-heading-07 {
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-size-12);
  font-weight: var(--cds-font-weight-light);
  line-height: var(--cds-line-height-02);
  letter-spacing: 0;
}

.cds--type-body-01 {
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-size-02);
  font-weight: var(--cds-font-weight-regular);
  line-height: var(--cds-line-height-03);
  letter-spacing: 0.16px;
}

.cds--type-body-02 {
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-size-03);
  font-weight: var(--cds-font-weight-regular);
  line-height: var(--cds-line-height-03);
  letter-spacing: 0;
}

.cds--type-caption-01 {
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-size-01);
  font-weight: var(--cds-font-weight-regular);
  line-height: var(--cds-line-height-01);
  letter-spacing: 0.32px;
}

.cds--type-label-01 {
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-size-01);
  font-weight: var(--cds-font-weight-regular);
  line-height: var(--cds-line-height-01);
  letter-spacing: 0.32px;
}

/* =================================================
   LAYOUT SYSTEM
   ================================================= */

.cds--container {
  max-width: var(--cds-container-max-width);
  margin: 0 auto;
  padding-inline: var(--cds-container-padding);
}

.cds--grid {
  display: grid;
  gap: var(--cds-spacing-05);
  width: 100%;
}

.cds--grid--condensed {
  gap: var(--cds-spacing-03);
}

.cds--grid--narrow {
  gap: var(--cds-spacing-04);
}

/* Responsive Grid System */
@media (min-width: 672px) {
  .cds--grid--md-2 { grid-template-columns: repeat(2, 1fr); }
  .cds--grid--md-3 { grid-template-columns: repeat(3, 1fr); }
  .cds--grid--md-4 { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1056px) {
  .cds--grid--lg-2 { grid-template-columns: repeat(2, 1fr); }
  .cds--grid--lg-3 { grid-template-columns: repeat(3, 1fr); }
  .cds--grid--lg-4 { grid-template-columns: repeat(4, 1fr); }
  .cds--grid--lg-6 { grid-template-columns: repeat(6, 1fr); }
}

@media (min-width: 1312px) {
  .cds--grid--xl-3 { grid-template-columns: repeat(3, 1fr); }
  .cds--grid--xl-4 { grid-template-columns: repeat(4, 1fr); }
  .cds--grid--xl-6 { grid-template-columns: repeat(6, 1fr); }
  .cds--grid--xl-12 { grid-template-columns: repeat(12, 1fr); }
}

/* =================================================
   BUTTON COMPONENTS
   ================================================= */

.cds--btn {
  align-items: center;
  border: 0;
  border-radius: 4px; /* Modern rounded corners */
  cursor: pointer;
  display: inline-flex;
  flex-shrink: 0;
  font-family: var(--cds-font-family-sans);
  font-size: var(--cds-font-size-02);
  font-weight: var(--cds-font-weight-medium); /* Slightly bolder for better readability */
  gap: var(--cds-spacing-03);
  justify-content: center; /* Center content for better visual balance */
  letter-spacing: 0.16px;
  line-height: var(--cds-line-height-01);
  max-width: 100%;
  min-height: 48px;
  outline: 2px solid transparent;
  outline-offset: -2px;
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  position: relative;
  text-align: center; /* Center text alignment */
  text-decoration: none;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1); /* Smoother transition */
  vertical-align: top;
  width: auto;
  overflow: hidden; /* For ripple effects */
  transform: translateZ(0); /* GPU acceleration */
}

.cds--btn:focus {
  outline: 2px solid var(--cds-interactive-03);
  outline-offset: 2px;
}

.cds--btn:disabled {
  color: var(--cds-text-placeholder);
  cursor: not-allowed;
}

/* Primary Button */
.cds--btn--primary {
  background-image: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%, rgba(255,255,255,0) 100%); /* Subtle top gloss */
  background-color: var(--cds-interactive-01);
  color: var(--cds-text-on-color);
  box-shadow: var(--cds-shadow-02); /* Slightly more pronounced base shadow */
  border: 1px solid rgba(255,255,255,0.1); /* Subtle border for definition */
}

.cds--btn--primary:hover:not(:disabled) {
  background-color: var(--cds-hover-primary);
  box-shadow: var(--cds-shadow-03), 0 0 15px rgba(var(--cds-green-50-rgb), 0.3); /* Add a subtle glow */
  transform: translateY(-3px) scale(1.02); /* Enhanced hover: lift and slight scale */
  border-color: rgba(255,255,255,0.2);
}

.cds--btn--primary:active:not(:disabled) {
  transform: translateY(-1px) scale(0.98); /* "Squish" effect */
  box-shadow: var(--cds-shadow-01), inset 0 1px 2px rgba(0,0,0,0.1); /* Inset shadow for pressed feel */
  background-color: var(--cds-green-70); /* Darken on active */
}

/* Secondary Button */
.cds--btn--secondary {
  background-color: var(--cds-interactive-02);
  color: var(--cds-text-on-color);
}

.cds--btn--secondary:hover:not(:disabled) {
  background-color: var(--cds-hover-secondary);
}

/* Tertiary Button */
.cds--btn--tertiary {
  background-color: transparent;
  border: 1px solid var(--cds-interactive-03);
  color: var(--cds-interactive-03);
  transition: background-color 0.3s var(--cds-easing-standard), color 0.3s var(--cds-easing-standard), border-color 0.3s var(--cds-easing-standard), transform 0.3s var(--cds-easing-standard), box-shadow 0.3s var(--cds-easing-standard);
}

.cds--btn--tertiary:hover:not(:disabled) {
  background-color: rgba(var(--cds-blue-60-rgb), 0.1); /* Subtle glass-like background */
  color: var(--cds-interactive-03); /* Keep text color blue for this style */
  border-color: rgba(var(--cds-blue-60-rgb), 0.7); /* Slightly stronger border */
  transform: translateY(-3px) scale(1.02);
  box-shadow: var(--cds-shadow-02), 0 0 12px rgba(var(--cds-blue-60-rgb), 0.25); /* Subtle glow */
}

.cds--btn--tertiary:active:not(:disabled) {
  transform: translateY(-1px) scale(0.98);
  background-color: rgba(var(--cds-blue-60-rgb), 0.15); /* Slightly darker glass background */
  border-color: rgba(var(--cds-blue-60-rgb), 0.8);
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.1);
}

/* Ghost Button */
.cds--btn--ghost {
  background-color: transparent;
  color: var(--cds-interactive-03);
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
}

.cds--btn--ghost:hover:not(:disabled) {
  background-color: var(--cds-background-subtle);
}

/* =================================================
   UTILITY CLASSES
   ================================================= */

/* Spacing Utilities */
.cds--spacing-01 { padding: var(--cds-spacing-01); }
.cds--spacing-02 { padding: var(--cds-spacing-02); }
.cds--spacing-03 { padding: var(--cds-spacing-03); }
.cds--spacing-04 { padding: var(--cds-spacing-04); }
.cds--spacing-05 { padding: var(--cds-spacing-05); }
.cds--spacing-06 { padding: var(--cds-spacing-06); }
.cds--spacing-07 { padding: var(--cds-spacing-07); }
.cds--spacing-08 { padding: var(--cds-spacing-08); }
.cds--spacing-09 { padding: var(--cds-spacing-09); }

/* Margin Utilities */
.cds--margin-top-05 { margin-top: var(--cds-spacing-05); }
.cds--margin-top-07 { margin-top: var(--cds-spacing-07); }
.cds--margin-top-09 { margin-top: var(--cds-spacing-09); }
.cds--margin-bottom-05 { margin-bottom: var(--cds-spacing-05); }
.cds--margin-bottom-07 { margin-bottom: var(--cds-spacing-07); }
.cds--margin-bottom-09 { margin-bottom: var(--cds-spacing-09); }

/* Text Alignment */
.cds--text-center { text-align: center; }
.cds--text-left { text-align: left; }
.cds--text-right { text-align: right; }

/* Display Utilities */
.cds--hidden { display: none; }
.cds--flex { display: flex; }
.cds--grid-display { display: grid; }
.cds--block { display: block; }
.cds--inline-block { display: inline-block; }

/* Flexbox Utilities */
.cds--flex-center { 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}
.cds--flex-column { flex-direction: column; }
.cds--flex-wrap { flex-wrap: wrap; }
.cds--justify-center { justify-content: center; }
.cds--justify-between { justify-content: space-between; }
.cds--align-center { align-items: center; }

/* Responsive Utilities */
@media (max-width: 671px) {
  .cds--hidden-sm { display: none; }
}

@media (min-width: 672px) and (max-width: 1055px) {
  .cds--hidden-md { display: none; }
}

@media (min-width: 1056px) {
  .cds--hidden-lg { display: none; }
}