/* ==========================================================================
   GLOBAL ACCESSIBILITY OVERRIDES (ELDER ACCESSIBLE BASELINE)
   ========================================================================== */

html {
    /* Scaled up the root from 16px to 18px. All rem values scale up proportionally. */
    font-size: 18px !important; 
}

body {
    /* High-contrast smooth rendering for dark modes/heavy weights */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* --- UNIVERSAL HEADER SPACING CORRECTION --- */

/* Fixes the overlap on 01/QUANTIFY, LARD, and all bold section headers */
h1, h2, h3, .font-sans.text-3xl, .font-sans.text-5xl, .font-sans.text-6xl {
    line-height: 1.25 !important;      /* Forces proper vertical gap when lines wrap */
    letter-spacing: 0.02em !important;   /* Slightly opens up tight letter spacing */
}

/* Specific safety margin for sub-labels underneath numbers (like 'CALCULATE YOUR HOUSEHOLD') */
.grid h4, .grid h3 + div {
    margin-top: 0.75rem !important;    /* Pushes content away from the heavy numbers */
}

/* Let the massive main hero title stay raw but still slightly legible */
h1.font-sans.text-7xl, h1.font-sans.text-8xl, h1.font-sans.text-\[100px\] {
    line-height: 1.05 !important;
}

/* Importing heavy industrial fonts and technical monospaces */
@import url('https://fonts.googleapis.com/css2?family=Anton&family=JetBrains+Mono:wght@400;700&display=swap');

h1, h2, h3, .font-sans {
    font-family: 'Anton', 'Impact', sans-serif !important;
    letter-spacing: -0.03em;
}

body, font-mono {
    font-family: 'JetBrains Mono', 'Courier New', monospace !important;
}

/* --- THE AMZON / INDUSTRIAL SCALE OVERRIDE (REVAMPED FOR READABILITY) --- */
/* Forces descriptive copy, logistics blocks, and FAQ text to step up to an elder-accessible size */
main p, 
.space-y-4 p, 
.space-y-6 p,
.space-y-4 div p {
    font-size: 18px !important;   /* Main text baseline */
    line-height: 1.8 !important;   
    letter-spacing: -0.01em !important;
}

/* Fixes the tiny caption issue by pulling up your micro technical labels */
main .text-xs, 
main .text-\[11px\],
main .text-\[10px\],
[class*="text-[9px]"],
.tracking-widest {
    font-size: 16px !important;       /* Raised to a crisp 14px to protect elder scanning */
    font-weight: 700 !important;      /* Bumps to bold so monospaced letter forms don't disappear */
    letter-spacing: 0.05em !important; /* Slightly opens up the small labels so they stay distinct */
    line-height: 1.5 !important;
}

/* Keeps sub-metadata elements like INCI definitions or tiny cards appropriately sized but sharp */
main .text-\[10px\], main .tracking-widest {
    font-size: 12px !important;
}

/* Base state styling variations for our configurator buttons */
.cadence-btn, .load-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    background-color: transparent;
    color: #111111;
}

.cadence-btn.active, .load-btn.active {
    background-color: #111111 !important;
    color: #F4F4F2 !important;
}

.cadence-btn:not(.active):hover, .load-btn:not(.active):hover {
    background-color: rgba(17, 17, 17, 0.05);
}

/* --- REGULATED BRAND ACCENT CONFIGURATION --- */

/* Changes the text highlight drag color from black to utility blue */
::selection {
    background-color: #002FA7 !important;
    color: #F4F4F2 !important;
}

/* Enhances active config buttons with the St. Florian blue stamp */
.load-btn.active, .cadence-btn.group.active {
    background-color: #002FA7 !important;
    border-color: #002FA7 !important;
}

.load-btn.active *, .cadence-btn.group.active * {
    color: #F4F4F2 !important;
}

/* Subtle, high-intent hover borders for unselected blocks */
.load-btn:hover:not(.active), .cadence-btn:hover:not(.active) {
    border-color: #002FA7 !important;
}