:root{
  --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
               Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --text-color: #111827;      /* near-black */
  --muted-color: #6b7280;     /* gray-500 */
  --heading-color: #0f172a;   /* slate-900 */
  --link-color: #0d6efd;      /* Bootstrap primary */
  --border-color: #e5e7eb;    /* gray-200 */

  /* Fluid type scale using clamp(min, vw, max) */
  --fs-1: clamp(2rem, 2.5vw + 1rem, 2.75rem); /* h1 */
  --fs-2: clamp(1.5rem, 1.8vw + 0.9rem, 2rem);/* h2 */
  --fs-3: clamp(1.25rem, 1.2vw + 0.85rem,1.5rem);/* h3 */
  --fs-4: 1.125rem;          /* h4 */
  --fs-5: 1rem;              /* h5 */
  --fs-6: 0.95rem;           /* h6 */
  --fs-body: 1rem;           /* paragraphs */
  --lh-tight: 1.2;
  --lh-normal: 1.55;
  --lh-loose: 1.7;
  --tracking-tight: -0.01em;
  --tracking-normal: 0;
  --tracking-wide: 0.02em;
}

html, body { overflow-x: hidden !important; }

/* Global text rendering */
html { font-size: 16px; }
body{
  font-family: var(--font-sans);
  color: var(--text-color);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Headings: crisp, consistent spacing; no huge margins that break rhythm */
h1,h2,h3,h4,h5,h6{
  color: var(--heading-color);
  font-weight: 700;
  letter-spacing: var(--tracking-tight);
  margin-top: 0;             /* prevent double spacing under cards/sections */
  margin-bottom: .5rem;
  line-height: var(--lh-tight);
}
h1{ font-size: var(--fs-1); }
h2{ font-size: var(--fs-2); font-weight: 700; }
h3{ font-size: var(--fs-3); font-weight: 600; }
h4{ font-size: var(--fs-4); font-weight: 600; }
h5{ font-size: var(--fs-5); font-weight: 600; }
h6{ font-size: var(--fs-6); font-weight: 600; }

/* Paragraphs: comfortable read, consistent spacing */
p{
  margin: 0 0 .75rem;
  line-height: var(--lh-loose);
}
.lead{ font-size: 1.125rem; line-height: var(--lh-loose); }

/* Small / muted */
small, .text-muted{ color: var(--muted-color) !important; }

/* Links: professional default, underline on hover only */
a{
  color: var(--link-color);
  text-decoration: none;
}
a:hover, a:focus{
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Labels / inline elements */
label, .form-label, strong, b, span{
  letter-spacing: var(--tracking-normal);
}

/* Lists with tighter rhythm */
ul,ol{ padding-left: 1.25rem; margin-bottom: .75rem; }

/* Helpers */
.text-balance{ text-wrap: balance; }         /* nicer heading wrapping */
.text-measure{ max-width: 70ch; }            /* comfortable line-length */

/* Styles for paragraph text */
p {
    font-size: 1rem; /* Equivalent to 16px by default, scales with root font size */
    font-weight: 400; /* Regular weight for easy reading */
    margin-bottom: 1em; /* Space between paragraphs */
    color: #4a5568; /* Slightly lighter than body text for long paragraphs */
}

/* Styles for span tags (often used for smaller labels, prices, or inline text) */
span {
    font-size: 0.875rem; /* Equivalent to 14px */
    font-weight: 400; /* Regular weight */
    color: #6b7280; /* A muted color for less emphasis */
}

.btn span { color: #fff !important; }

/* Example of how you might style specific text within a span for emphasis */
.price {
    font-size: 1.25rem; /* Larger for prices (e.g., 20px) */
    font-weight: 700; /* Bold for emphasis */
    color: #007bff; /* A distinct color for pricing */
}

/* You might define specific classes for product titles, descriptions, etc. */
.product-title {
    font-size: 1.5rem; /* E.g., 24px */
    font-weight: 600; /* Semi-bold */
    color: #2d3748;
}

.product-description {
    font-size: 1rem;
    font-weight: 400;
    color: #4a5568;
}

.form-control::placeholder {
  color: #6c757d;   /* bootstrap "secondary" gray */
  opacity: .75;     /* make it a bit faded */
}

/* Textareas too (optional – not needed if they already use .form-control) */
textarea.form-control::placeholder {
  color: #6c757d;
  opacity: .75;
}

.form-control, .form-select { font-size: .9rem; }