/* ============================================================
   CLEARVIEW FENCING CAPE TOWN - Main Stylesheet
   Version: 1.0.0
   Description: CSS custom properties, reset, typography,
                layout utilities, grid system, spacing & display.
   ============================================================ */

/* ------------------------------------------------------------
   1. CSS CUSTOM PROPERTIES
   ------------------------------------------------------------ */
:root {
  /* --- Color Palette: Forest Green --- */
  --green-50:  #f3faf1;
  --green-100: #e8f5e4;
  --green-200: #c8e5c0;
  --green-300: #a3cf9a;
  --green-400: #7bb370;
  --green-500: #5e9a54;
  --green-600: #4a8040;
  --green-700: #3d6b35;
  --green-800: #2a4625;
  --green-900: #1a3a17;

  /* --- Color Palette: Accent Amber --- */
  --amber-300: #fcd34d;
  --amber-400: #fbbf24;
  --amber-500: #f59e0b;
  --amber-600: #d97706;

  /* --- Color Palette: Trust Emerald --- */
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-900: #064e3b;
  --emerald-950: #065f46;

  /* --- Color Palette: Neutrals --- */
  --gray-50:  #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --gray-950: #030712;

  /* --- Color Palette: Semantic --- */
  --red-500: #ef4444;
  --red-600: #dc2626;
  --white:   #ffffff;

  /* --- Typography --- */
  --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --leading-tight:  1.15;
  --leading-snug:   1.3;
  --leading-normal: 1.6;

  /* --- Spacing Scale --- */
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;

  /* --- Shadows --- */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-sm:  0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg:  0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --shadow-xl:  0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* --- Border Radius --- */
  --radius-sm:   0.25rem;
  --radius-md:   0.375rem;
  --radius-lg:   0.5rem;
  --radius-xl:   0.75rem;
  --radius-2xl:  1rem;
  --radius-full: 9999px;

  /* --- Transitions --- */
  --transition-fast:   150ms ease;
  --transition-base:   200ms ease;
  --transition-slow:   300ms ease;
  --transition-slower: 500ms ease;

  /* --- Z-Index Scale --- */
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-fixed:    300;
  --z-overlay:  400;
  --z-modal:    500;
  --z-popover:  600;
  --z-toast:    700;

  /* --- Container --- */
  --container-max: 1280px;
  --container-pad: var(--space-4);
}

@media (min-width: 640px) {
  :root {
    --container-pad: var(--space-6);
  }
}

@media (min-width: 1024px) {
  :root {
    --container-pad: var(--space-8);
  }
}


/* ------------------------------------------------------------
   2. MODERN CSS RESET
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--gray-700);
  background-color: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
}

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

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

button {
  cursor: pointer;
  border: none;
  background: none;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

hr {
  border: none;
  border-top: 1px solid var(--gray-200);
}

fieldset {
  border: none;
}

:focus-visible {
  outline: 2px solid var(--green-500);
  outline-offset: 2px;
}

::selection {
  background-color: var(--green-200);
  color: var(--green-900);
}


/* ------------------------------------------------------------
   3. TYPOGRAPHY
   ------------------------------------------------------------ */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: var(--leading-tight);
  color: var(--green-900);
}

h1, .h1 { font-size: var(--text-5xl); }
h2, .h2 { font-size: var(--text-4xl); }
h3, .h3 { font-size: var(--text-3xl); }
h4, .h4 { font-size: var(--text-2xl); }
h5, .h5 { font-size: var(--text-xl);  }
h6, .h6 { font-size: var(--text-lg);  }

@media (max-width: 767px) {
  h1, .h1 { font-size: var(--text-3xl); }
  h2, .h2 { font-size: var(--text-2xl); }
  h3, .h3 { font-size: var(--text-xl);  }
  h4, .h4 { font-size: var(--text-lg);  }
}

p {
  margin-bottom: var(--space-4);
}

p:last-child {
  margin-bottom: 0;
}

strong, b {
  font-weight: 700;
}

small {
  font-size: var(--text-sm);
}

.text-xs   { font-size: var(--text-xs); }
.text-sm   { font-size: var(--text-sm); }
.text-base { font-size: var(--text-base); }
.text-lg   { font-size: var(--text-lg); }
.text-xl   { font-size: var(--text-xl); }
.text-2xl  { font-size: var(--text-2xl); }
.text-3xl  { font-size: var(--text-3xl); }
.text-4xl  { font-size: var(--text-4xl); }
.text-5xl  { font-size: var(--text-5xl); }

.leading-tight  { line-height: var(--leading-tight); }
.leading-snug   { line-height: var(--leading-snug); }
.leading-normal { line-height: var(--leading-normal); }

.font-normal   { font-weight: 400; }
.font-medium   { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold     { font-weight: 700; }

.section-title {
  font-size: var(--text-3xl);
  font-weight: 700;
  color: var(--green-900);
  margin-bottom: var(--space-2);
}

.section-subtitle {
  font-size: var(--text-lg);
  color: var(--gray-500);
  max-width: 640px;
}

@media (min-width: 768px) {
  .section-title {
    font-size: var(--text-4xl);
  }
}


/* ------------------------------------------------------------
   4. CONTAINER
   ------------------------------------------------------------ */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.container-sm {
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}

.container-lg {
  max-width: 1024px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--container-pad);
  padding-right: var(--container-pad);
}


/* ------------------------------------------------------------
   5. RESPONSIVE GRID SYSTEM
   ------------------------------------------------------------ */

/* --- Flex-Based Row/Col System --- */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(var(--space-4) * -0.5);
  margin-right: calc(var(--space-4) * -0.5);
}

.col {
  flex: 1 1 0%;
  padding-left: calc(var(--space-4) * 0.5);
  padding-right: calc(var(--space-4) * 0.5);
}

.col-auto {
  flex: 0 0 auto;
  width: auto;
  padding-left: calc(var(--space-4) * 0.5);
  padding-right: calc(var(--space-4) * 0.5);
}

/* 12-column widths */
.col-1  { flex: 0 0 auto; width: 8.333%;  padding-left: calc(var(--space-4) * 0.5); padding-right: calc(var(--space-4) * 0.5); }
.col-2  { flex: 0 0 auto; width: 16.667%; padding-left: calc(var(--space-4) * 0.5); padding-right: calc(var(--space-4) * 0.5); }
.col-3  { flex: 0 0 auto; width: 25%;     padding-left: calc(var(--space-4) * 0.5); padding-right: calc(var(--space-4) * 0.5); }
.col-4  { flex: 0 0 auto; width: 33.333%; padding-left: calc(var(--space-4) * 0.5); padding-right: calc(var(--space-4) * 0.5); }
.col-5  { flex: 0 0 auto; width: 41.667%; padding-left: calc(var(--space-4) * 0.5); padding-right: calc(var(--space-4) * 0.5); }
.col-6  { flex: 0 0 auto; width: 50%;     padding-left: calc(var(--space-4) * 0.5); padding-right: calc(var(--space-4) * 0.5); }
.col-7  { flex: 0 0 auto; width: 58.333%; padding-left: calc(var(--space-4) * 0.5); padding-right: calc(var(--space-4) * 0.5); }
.col-8  { flex: 0 0 auto; width: 66.667%; padding-left: calc(var(--space-4) * 0.5); padding-right: calc(var(--space-4) * 0.5); }
.col-9  { flex: 0 0 auto; width: 75%;     padding-left: calc(var(--space-4) * 0.5); padding-right: calc(var(--space-4) * 0.5); }
.col-10 { flex: 0 0 auto; width: 83.333%; padding-left: calc(var(--space-4) * 0.5); padding-right: calc(var(--space-4) * 0.5); }
.col-11 { flex: 0 0 auto; width: 91.667%; padding-left: calc(var(--space-4) * 0.5); padding-right: calc(var(--space-4) * 0.5); }
.col-12 { flex: 0 0 auto; width: 100%;    padding-left: calc(var(--space-4) * 0.5); padding-right: calc(var(--space-4) * 0.5); }

/* Responsive column overrides */
@media (min-width: 640px) {
  .col-sm-1  { width: 8.333%; }
  .col-sm-2  { width: 16.667%; }
  .col-sm-3  { width: 25%; }
  .col-sm-4  { width: 33.333%; }
  .col-sm-5  { width: 41.667%; }
  .col-sm-6  { width: 50%; }
  .col-sm-7  { width: 58.333%; }
  .col-sm-8  { width: 66.667%; }
  .col-sm-9  { width: 75%; }
  .col-sm-10 { width: 83.333%; }
  .col-sm-11 { width: 91.667%; }
  .col-sm-12 { width: 100%; }
}

@media (min-width: 768px) {
  .col-md-1  { width: 8.333%; }
  .col-md-2  { width: 16.667%; }
  .col-md-3  { width: 25%; }
  .col-md-4  { width: 33.333%; }
  .col-md-5  { width: 41.667%; }
  .col-md-6  { width: 50%; }
  .col-md-7  { width: 58.333%; }
  .col-md-8  { width: 66.667%; }
  .col-md-9  { width: 75%; }
  .col-md-10 { width: 83.333%; }
  .col-md-11 { width: 91.667%; }
  .col-md-12 { width: 100%; }
}

@media (min-width: 1024px) {
  .col-lg-1  { width: 8.333%; }
  .col-lg-2  { width: 16.667%; }
  .col-lg-3  { width: 25%; }
  .col-lg-4  { width: 33.333%; }
  .col-lg-5  { width: 41.667%; }
  .col-lg-6  { width: 50%; }
  .col-lg-7  { width: 58.333%; }
  .col-lg-8  { width: 66.667%; }
  .col-lg-9  { width: 75%; }
  .col-lg-10 { width: 83.333%; }
  .col-lg-11 { width: 91.667%; }
  .col-lg-12 { width: 100%; }
}

@media (min-width: 1280px) {
  .col-xl-1  { width: 8.333%; }
  .col-xl-2  { width: 16.667%; }
  .col-xl-3  { width: 25%; }
  .col-xl-4  { width: 33.333%; }
  .col-xl-5  { width: 41.667%; }
  .col-xl-6  { width: 50%; }
  .col-xl-7  { width: 58.333%; }
  .col-xl-8  { width: 66.667%; }
  .col-xl-9  { width: 75%; }
  .col-xl-10 { width: 83.333%; }
  .col-xl-11 { width: 91.667%; }
  .col-xl-12 { width: 100%; }
}

/* --- CSS Grid Utilities --- */
.grid {
  display: grid;
  gap: var(--space-6);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (min-width: 640px) {
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .sm\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
  .md\:grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
  .md\:grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
  .md\:grid-cols-4 { grid-template-columns: repeat(4, 1fr); }
}

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

.gap-2  { gap: var(--space-2); }
.gap-3  { gap: var(--space-3); }
.gap-4  { gap: var(--space-4); }
.gap-6  { gap: var(--space-6); }
.gap-8  { gap: var(--space-8); }


/* ------------------------------------------------------------
   6. SPACING UTILITIES
   ------------------------------------------------------------ */

/* Margin */
.m-0  { margin: 0; }
.m-1  { margin: var(--space-1); }
.m-2  { margin: var(--space-2); }
.m-3  { margin: var(--space-3); }
.m-4  { margin: var(--space-4); }
.m-6  { margin: var(--space-6); }
.m-8  { margin: var(--space-8); }
.m-auto { margin: auto; }

.mt-0  { margin-top: 0; }
.mt-1  { margin-top: var(--space-1); }
.mt-2  { margin-top: var(--space-2); }
.mt-3  { margin-top: var(--space-3); }
.mt-4  { margin-top: var(--space-4); }
.mt-6  { margin-top: var(--space-6); }
.mt-8  { margin-top: var(--space-8); }
.mt-10 { margin-top: var(--space-10); }
.mt-12 { margin-top: var(--space-12); }
.mt-16 { margin-top: var(--space-16); }

.mb-0  { margin-bottom: 0; }
.mb-1  { margin-bottom: var(--space-1); }
.mb-2  { margin-bottom: var(--space-2); }
.mb-3  { margin-bottom: var(--space-3); }
.mb-4  { margin-bottom: var(--space-4); }
.mb-6  { margin-bottom: var(--space-6); }
.mb-8  { margin-bottom: var(--space-8); }
.mb-10 { margin-bottom: var(--space-10); }
.mb-12 { margin-bottom: var(--space-12); }
.mb-16 { margin-bottom: var(--space-16); }

.ml-0  { margin-left: 0; }
.ml-1  { margin-left: var(--space-1); }
.ml-2  { margin-left: var(--space-2); }
.ml-3  { margin-left: var(--space-3); }
.ml-4  { margin-left: var(--space-4); }
.ml-auto { margin-left: auto; }

.mr-0  { margin-right: 0; }
.mr-1  { margin-right: var(--space-1); }
.mr-2  { margin-right: var(--space-2); }
.mr-3  { margin-right: var(--space-3); }
.mr-4  { margin-right: var(--space-4); }
.mr-auto { margin-right: auto; }

.mx-auto { margin-left: auto; margin-right: auto; }

.my-4  { margin-top: var(--space-4);  margin-bottom: var(--space-4); }
.my-6  { margin-top: var(--space-6);  margin-bottom: var(--space-6); }
.my-8  { margin-top: var(--space-8);  margin-bottom: var(--space-8); }
.my-12 { margin-top: var(--space-12); margin-bottom: var(--space-12); }
.my-16 { margin-top: var(--space-16); margin-bottom: var(--space-16); }

/* Padding */
.p-0  { padding: 0; }
.p-1  { padding: var(--space-1); }
.p-2  { padding: var(--space-2); }
.p-3  { padding: var(--space-3); }
.p-4  { padding: var(--space-4); }
.p-5  { padding: var(--space-5); }
.p-6  { padding: var(--space-6); }
.p-8  { padding: var(--space-8); }
.p-10 { padding: var(--space-10); }
.p-12 { padding: var(--space-12); }

.pt-0  { padding-top: 0; }
.pt-2  { padding-top: var(--space-2); }
.pt-4  { padding-top: var(--space-4); }
.pt-6  { padding-top: var(--space-6); }
.pt-8  { padding-top: var(--space-8); }
.pt-12 { padding-top: var(--space-12); }
.pt-16 { padding-top: var(--space-16); }
.pt-20 { padding-top: var(--space-20); }
.pt-24 { padding-top: var(--space-24); }

.pb-0  { padding-bottom: 0; }
.pb-2  { padding-bottom: var(--space-2); }
.pb-4  { padding-bottom: var(--space-4); }
.pb-6  { padding-bottom: var(--space-6); }
.pb-8  { padding-bottom: var(--space-8); }
.pb-12 { padding-bottom: var(--space-12); }
.pb-16 { padding-bottom: var(--space-16); }
.pb-20 { padding-bottom: var(--space-20); }
.pb-24 { padding-bottom: var(--space-24); }

.pl-0  { padding-left: 0; }
.pl-2  { padding-left: var(--space-2); }
.pl-4  { padding-left: var(--space-4); }
.pl-6  { padding-left: var(--space-6); }

.pr-0  { padding-right: 0; }
.pr-2  { padding-right: var(--space-2); }
.pr-4  { padding-right: var(--space-4); }
.pr-6  { padding-right: var(--space-6); }

.px-2  { padding-left: var(--space-2);  padding-right: var(--space-2); }
.px-3  { padding-left: var(--space-3);  padding-right: var(--space-3); }
.px-4  { padding-left: var(--space-4);  padding-right: var(--space-4); }
.px-6  { padding-left: var(--space-6);  padding-right: var(--space-6); }
.px-8  { padding-left: var(--space-8);  padding-right: var(--space-8); }

.py-2  { padding-top: var(--space-2);  padding-bottom: var(--space-2); }
.py-3  { padding-top: var(--space-3);  padding-bottom: var(--space-3); }
.py-4  { padding-top: var(--space-4);  padding-bottom: var(--space-4); }
.py-6  { padding-top: var(--space-6);  padding-bottom: var(--space-6); }
.py-8  { padding-top: var(--space-8);  padding-bottom: var(--space-8); }
.py-12 { padding-top: var(--space-12); padding-bottom: var(--space-12); }
.py-16 { padding-top: var(--space-16); padding-bottom: var(--space-16); }
.py-20 { padding-top: var(--space-20); padding-bottom: var(--space-20); }
.py-24 { padding-top: var(--space-24); padding-bottom: var(--space-24); }


/* ------------------------------------------------------------
   7. DISPLAY UTILITIES
   ------------------------------------------------------------ */
.hidden  { display: none; }
.block   { display: block; }
.inline  { display: inline; }
.inline-block { display: inline-block; }
.flex    { display: flex; }
.inline-flex { display: inline-flex; }
.grid-display { display: grid; }

@media (min-width: 640px) {
  .sm\:hidden { display: none; }
  .sm\:block  { display: block; }
  .sm\:flex   { display: flex; }
  .sm\:grid-display { display: grid; }
}

@media (min-width: 768px) {
  .md\:hidden { display: none; }
  .md\:block  { display: block; }
  .md\:flex   { display: flex; }
  .md\:grid-display { display: grid; }
}

@media (min-width: 1024px) {
  .lg\:hidden { display: none; }
  .lg\:block  { display: block; }
  .lg\:flex   { display: flex; }
  .lg\:grid-display { display: grid; }
}

/* Flex utilities */
.flex-row    { flex-direction: row; }
.flex-col    { flex-direction: column; }
.flex-wrap   { flex-wrap: wrap; }
.flex-nowrap { flex-wrap: nowrap; }
.flex-1      { flex: 1 1 0%; }
.flex-grow   { flex-grow: 1; }
.flex-shrink-0 { flex-shrink: 0; }

.items-start   { align-items: flex-start; }
.items-center  { align-items: center; }
.items-end     { align-items: flex-end; }
.items-stretch { align-items: stretch; }

.justify-start   { justify-content: flex-start; }
.justify-center  { justify-content: center; }
.justify-end     { justify-content: flex-end; }
.justify-between { justify-content: space-between; }
.justify-around  { justify-content: space-around; }

.self-start  { align-self: flex-start; }
.self-center { align-self: center; }
.self-end    { align-self: flex-end; }


/* ------------------------------------------------------------
   8. TEXT UTILITIES
   ------------------------------------------------------------ */
.text-left   { text-align: left; }
.text-center { text-align: center; }
.text-right  { text-align: right; }

.text-white     { color: var(--white); }
.text-green-900 { color: var(--green-900); }
.text-green-800 { color: var(--green-800); }
.text-green-700 { color: var(--green-700); }
.text-green-600 { color: var(--green-600); }
.text-green-500 { color: var(--green-500); }
.text-amber-500 { color: var(--amber-500); }
.text-amber-600 { color: var(--amber-600); }
.text-red-500   { color: var(--red-500); }
.text-red-600   { color: var(--red-600); }
.text-gray-900  { color: var(--gray-900); }
.text-gray-800  { color: var(--gray-800); }
.text-gray-700  { color: var(--gray-700); }
.text-gray-600  { color: var(--gray-600); }
.text-gray-500  { color: var(--gray-500); }
.text-gray-400  { color: var(--gray-400); }
.text-emerald-200 { color: #a7f3d0; }

.text-uppercase  { text-transform: uppercase; }
.text-capitalize { text-transform: capitalize; }
.text-truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.text-nowrap { white-space: nowrap; }

.underline    { text-decoration: underline; }
.no-underline { text-decoration: none; }

.tracking-tight { letter-spacing: -0.025em; }
.tracking-wide  { letter-spacing: 0.025em; }
.tracking-wider { letter-spacing: 0.05em; }


/* ------------------------------------------------------------
   9. BACKGROUND UTILITIES
   ------------------------------------------------------------ */
.bg-white     { background-color: var(--white); }
.bg-gray-50   { background-color: var(--gray-50); }
.bg-gray-100  { background-color: var(--gray-100); }
.bg-green-50  { background-color: var(--green-50); }
.bg-green-100 { background-color: var(--green-100); }
.bg-green-900 { background-color: var(--green-900); }
.bg-amber-500 { background-color: var(--amber-500); }
.bg-emerald-950 { background-color: var(--emerald-950); }


/* ------------------------------------------------------------
   10. BORDER UTILITIES
   ------------------------------------------------------------ */
.border       { border: 1px solid var(--gray-200); }
.border-t     { border-top: 1px solid var(--gray-200); }
.border-b     { border-bottom: 1px solid var(--gray-200); }
.border-green { border-color: var(--green-500); }
.border-red   { border-color: var(--red-500); }

.rounded-sm   { border-radius: var(--radius-sm); }
.rounded-md   { border-radius: var(--radius-md); }
.rounded      { border-radius: var(--radius-md); }
.rounded-lg   { border-radius: var(--radius-lg); }
.rounded-xl   { border-radius: var(--radius-xl); }
.rounded-2xl  { border-radius: var(--radius-2xl); }
.rounded-full { border-radius: var(--radius-full); }


/* ------------------------------------------------------------
   11. SHADOW UTILITIES
   ------------------------------------------------------------ */
.shadow-xs  { box-shadow: var(--shadow-xs); }
.shadow-sm  { box-shadow: var(--shadow-sm); }
.shadow-md  { box-shadow: var(--shadow-md); }
.shadow     { box-shadow: var(--shadow-md); }
.shadow-lg  { box-shadow: var(--shadow-lg); }
.shadow-xl  { box-shadow: var(--shadow-xl); }
.shadow-2xl { box-shadow: var(--shadow-2xl); }
.shadow-none { box-shadow: none; }


/* ------------------------------------------------------------
   12. POSITION & OVERFLOW UTILITIES
   ------------------------------------------------------------ */
.relative { position: relative; }
.absolute { position: absolute; }
.fixed    { position: fixed; }
.sticky   { position: sticky; top: 0; }

.overflow-hidden { overflow: hidden; }
.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

.w-full { width: 100%; }
.h-full { height: 100%; }
.min-h-screen { min-height: 100vh; }


/* ------------------------------------------------------------
   13. SECTION SPACING
   ------------------------------------------------------------ */
.section {
  padding-top: var(--space-16);
  padding-bottom: var(--space-16);
}

@media (min-width: 768px) {
  .section {
    padding-top: var(--space-20);
    padding-bottom: var(--space-20);
  }
}

@media (min-width: 1024px) {
  .section {
    padding-top: var(--space-24);
    padding-bottom: var(--space-24);
  }
}

.section-header {
  text-align: center;
  margin-bottom: var(--space-12);
}


/* ------------------------------------------------------------
   14. VISIBILITY & ACCESSIBILITY
   ------------------------------------------------------------ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.opacity-0   { opacity: 0; }
.opacity-50  { opacity: 0.5; }
.opacity-75  { opacity: 0.75; }
.opacity-100 { opacity: 1; }

.cursor-pointer { cursor: pointer; }
.pointer-events-none { pointer-events: none; }


/* ------------------------------------------------------------
   15. TRANSITION UTILITIES
   ------------------------------------------------------------ */
.transition {
  transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
  transition-duration: 200ms;
  transition-timing-function: ease;
}

.transition-fast {
  transition-property: all;
  transition-duration: 150ms;
  transition-timing-function: ease;
}

.transition-slow {
  transition-property: all;
  transition-duration: 300ms;
  transition-timing-function: ease;
}