body {
    font-family: var(--font-family-primary), sans-serif;
    margin: 0;
    background-color: var(--color-bg-page);
    color: var(--color-path-middle); /* General body text to path-middle */
    line-height: 1.6;
}

.container {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--spaces-padding-site);
    background-color: var(--color-white);
    border-radius: var(--corner-md);
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

/* Header Styles */
header {
    background-color: var(--color-bg-nav);
    padding: var(--spaces-md) var(--spaces-padding-site);
    border-bottom: 1px solid var(--color-neutral-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    position: sticky;
    top: 0;
    z-index: var(--breakpoint-z-index-dropdown);
}

header h1 {
    color: var(--color-path-brand-primary); /* Header title to brand primary path */
    margin: 0;
    font-size: var(--font-heading-lg);
    font-weight: var(--font-weight-bold);
}

nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--spaces-lg);
}

nav ul li a {
    text-decoration: none;
    color: var(--color-path-middle); /* Nav links to path-middle */
    font-weight: var(--font-weight-medium);
    font-size: var(--font-body-md);
    transition: color 0.3s ease;
}

nav ul li a:hover {
    color: var(--color-path-link-hover); /* Nav links hover to path-link-hover for interaction */
}

.download-button {
    background-color: var(--color-brand-primary);
    color: var(--color-white); /* Keep white for contrast on brand primary */
    padding: var(--spaces-sm) var(--spaces-md);
    border-radius: var(--corner-sm);
    text-decoration: none;
    font-size: var(--font-body-sm);
    font-weight: var(--font-weight-bold);
    transition: background-color 0.3s ease;
    white-space: nowrap;
}

.download-button:hover {
    background-color: var(--color-brand-secondary);
}

/* Color Palette Section Styles */
.color-section {
    margin-bottom: var(--spaces-margin-section);
    padding: var(--spaces-md);
    background-color: var(--color-bg-container);
    border-radius: var(--corner-md);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.color-section h3 {
    color: var(--color-path-strong); /* Section headings to path-strong */
    margin-top: 0;
    margin-bottom: var(--spaces-md);
    font-size: var(--font-heading-md);
    border-bottom: 1px solid var(--color-neutral-lighter);
    padding-bottom: var(--spaces-sm);
}

.color-swatch-group {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: var(--spaces-md);
}

.color-swatch {
    border: 1px solid var(--color-neutral-light);
    border-radius: var(--corner-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: transform 0.2s ease-in-out;
}

.color-swatch:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.color-box {
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-path-inverse); /* Default: white text for dark backgrounds */
    font-weight: var(--font-weight-bold);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.4);
    word-break: break-word;
    padding: var(--spaces-xs);
    text-align: center;
}

.color-info {
    background-color: var(--color-gray-50);
    padding: var(--spaces-sm);
    font-size: var(--font-body-sm);
    color: var(--color-path-middle); /* Color info text to path-middle */
    word-break: break-all;
    line-height: 1.4;
    display: flex;
    flex-direction: column;
    gap: var(--spaces-xs);
}

.color-info code {
    background-color: var(--color-neutral-lighter);
    padding: 2px 4px;
    border-radius: var(--corner-xs);
    font-family: var(--font-family-number), monospace;
    color: var(--color-path-strong); /* Code snippets to path-strong for prominence */
}

/* Specific Color Backgrounds AND Text Colors for visibility */

/* Brand */
.brand-primary .color-box { background-color: var(--color-brand-primary); }
.brand-secondary .color-box { background-color: var(--color-brand-secondary); }

/* Grays */
.gray-50 .color-box { background-color: var(--color-gray-50); color: var(--color-path-strong); text-shadow: none; }
.gray-100 .color-box { background-color: var(--color-gray-100); color: var(--color-path-strong); text-shadow: none; }
.gray-200 .color-box { background-color: var(--color-gray-200); color: var(--color-path-strong); text-shadow: none; }
.gray-300 .color-box { background-color: var(--color-gray-300); color: var(--color-path-strong); text-shadow: none; }
.gray-400 .color-box { background-color: var(--color-gray-400); }
.gray-500 .color-box { background-color: var(--color-gray-500); }
.gray-600 .color-box { background-color: var(--color-gray-600); }
.gray-700 .color-box { background-color: var(--color-gray-700); }
.gray-800 .color-box { background-color: var(--color-gray-800); }
.gray-900 .color-box { background-color: var(--color-gray-900); }
.gray-950 .color-box { background-color: var(--color-gray-950); }

/* Neutral */
.neutral-lightest .color-box { background-color: var(--color-neutral-lightest); color: var(--color-path-strong); text-shadow: none; }
.neutral-lighter .color-box { background-color: var(--color-neutral-lighter); color: var(--color-path-strong); text-shadow: none; }
.neutral-light .color-box { background-color: var(--color-neutral-light); color: var(--color-path-strong); text-shadow: none; }
.neutral-base .color-box { background-color: var(--color-neutral-base); }
.neutral-dark .color-box { background-color: var(--color-neutral-dark); }
.neutral-darker .color-box { background-color: var(--color-neutral-darker); }
.neutral-darkest .color-box { background-color: var(--color-neutral-darkest); }

/* System */
.system-error .color-box { background-color: var(--color-system-error); }
.system-error-dark .color-box { background-color: var(--color-system-error-dark); }
.system-error-darker .color-box { background-color: var(--color-system-error-darker); }
.system-error-darkest .color-box { background-color: var(--color-system-error-darkest); }
.system-error-light .color-box { background-color: var(--color-system-error-light); }
.system-error-lighter .color-box { background-color: var(--color-system-error-lighter); }
.system-error-lightest .color-box { background-color: var(--color-system-error-lightest); color: var(--color-path-strong); text-shadow: none; }

.system-info .color-box { background-color: var(--color-system-info); }
.system-info-dark .color-box { background-color: var(--color-system-info-dark); }
.system-info-darker .color-box { background-color: var(--color-system-info-darker); }
.system-info-darkest .color-box { background-color: var(--color-system-info-darkest); }
.system-info-light .color-box { background-color: var(--color-system-info-light); }
.system-info-lighter .color-box { background-color: var(--color-system-info-lighter); }
.system-info-lightest .color-box { background-color: var(--color-system-info-lightest); color: var(--color-path-strong); text-shadow: none; }

.system-success .color-box { background-color: var(--color-system-success); }
.system-success-dark .color-box { background-color: var(--color-system-success-dark); }
.system-success-darker .color-box { background-color: var(--color-system-success-darker); }
.system-success-darkest .color-box { background-color: var(--color-system-success-darkest); }
.system-success-light .color-box { background-color: var(--color-system-success-light); }
.system-success-lighter .color-box { background-color: var(--color-system-success-lighter); }
.system-success-lightest .color-box { background-color: var(--color-system-success-lightest); color: var(--color-path-strong); text-shadow: none; }

.system-warning .color-box { background-color: var(--color-system-warning); }
.system-warning-dark .color-box { background-color: var(--color-system-warning-dark); }
.system-warning-darker .color-box { background-color: var(--color-system-warning-darker); }
.system-warning-darkest .color-box { background-color: var(--color-system-warning-darkest); }
.system-warning-light .color-box { background-color: var(--color-system-warning-light); }
.system-warning-lighter .color-box { background-color: var(--color-system-warning-lighter); }
.system-warning-lightest .color-box { background-color: var(--color-system-warning-lightest); color: var(--color-path-strong); text-shadow: none; }

/* Global A */
.global-a-50 .color-box { background-color: var(--color-global-a-50); color: var(--color-path-strong); text-shadow: none; }
.global-a-100 .color-box { background-color: var(--color-global-a-100); color: var(--color-path-strong); text-shadow: none; }
.global-a-200 .color-box { background-color: var(--color-global-a-200); color: var(--color-path-strong); text-shadow: none; }
.global-a-300 .color-box { background-color: var(--color-global-a-300); }
.global-a-400 .color-box { background-color: var(--color-global-a-400); }
.global-a-500 .color-box { background-color: var(--color-global-a-500); }
.global-a-600 .color-box { background-color: var(--color-global-a-600); }
.global-a-700 .color-box { background-color: var(--color-global-a-700); }
.global-a-800 .color-box { background-color: var(--color-global-a-800); }
.global-a-900 .color-box { background-color: var(--color-global-a-900); }
.global-a-950 .color-box { background-color: var(--color-global-a-950); }

.global-a-accent .color-box { background-color: var(--color-global-a-accent); }
.global-a-accent-dark .color-box { background-color: var(--color-global-a-accent-dark); }
.global-a-accent-darker .color-box { background-color: var(--color-global-a-accent-darker); }
.global-a-accent-darkest .color-box { background-color: var(--color-global-a-accent-darkest); }
.global-a-accent-light .color-box { background-color: var(--color-global-a-accent-light); color: var(--color-path-strong); text-shadow: none; }
.global-a-accent-lighter .color-box { background-color: var(--color-global-a-accent-lighter); color: var(--color-path-strong); text-shadow: none; }
.global-a-accent-lightest .color-box { background-color: var(--color-global-a-accent-lightest); color: var(--color-path-strong); text-shadow: none; }

.global-a-state-active .color-box { background-color: var(--color-global-a-state-active); }
.global-a-state-default .color-box { background-color: var(--color-global-a-state-default); }
.global-a-state-disabled .color-box { background-color: var(--color-global-a-state-disabled); color: var(--color-path-strong); text-shadow: none; }
.global-a-state-hover .color-box { background-color: var(--color-global-a-state-hover); }
.global-a-state-inputctrl .color-box { background-color: var(--color-global-a-state-inputctrl); color: var(--color-path-strong); text-shadow: none; }
.global-a-state-inputctrl-disabled .color-box { background-color: var(--color-global-a-state-inputctrl-disabled); color: var(--color-path-strong); text-shadow: none; }
.global-a-state-inputctrl-hover .color-box { background-color: var(--color-global-a-state-inputctrl-hover); color: var(--color-path-strong); text-shadow: none; }
.global-a-state-selected .color-box { background-color: var(--color-global-a-state-selected); }

/* Global B */
.global-b-50 .color-box { background-color: var(--color-global-b-50); color: var(--color-path-strong); text-shadow: none; }
.global-b-100 .color-box { background-color: var(--color-global-b-100); color: var(--color-path-strong); text-shadow: none; }
.global-b-200 .color-box { background-color: var(--color-global-b-200); color: var(--color-path-strong); text-shadow: none; }
.global-b-300 .color-box { background-color: var(--color-global-b-300); }
.global-b-400 .color-box { background-color: var(--color-global-b-400); }
.global-b-500 .color-box { background-color: var(--color-global-b-500); }
.global-b-600 .color-box { background-color: var(--color-global-b-600); }
.global-b-700 .color-box { background-color: var(--color-global-b-700); }
.global-b-800 .color-box { background-color: var(--color-global-b-800); }
.global-b-900 .color-box { background-color: var(--color-global-b-900); }
.global-b-950 .color-box { background-color: var(--color-global-b-950); }

.global-b-accent .color-box { background-color: var(--color-global-b-accent); }
.global-b-accent-dark .color-box { background-color: var(--color-global-b-accent-dark); }
.global-b-accent-darker .color-box { background-color: var(--color-global-b-accent-darker); }
.global-b-accent-darkest .color-box { background-color: var(--color-global-b-accent-darkest); }
.global-b-accent-light .color-box { background-color: var(--color-global-b-accent-light); color: var(--color-path-strong); text-shadow: none; }
.global-b-accent-lighter .color-box { background-color: var(--color-global-b-accent-lighter); color: var(--color-path-strong); text-shadow: none; }
.global-b-accent-lightest .color-box { background-color: var(--color-global-b-accent-lightest); color: var(--color-path-strong); text-shadow: none; }

.global-b-state-active .color-box { background-color: var(--color-global-b-state-active); }
.global-b-state-default .color-box { background-color: var(--color-global-b-state-default); }
.global-b-state-disabled .color-box { background-color: var(--color-global-b-state-disabled); color: var(--color-path-strong); text-shadow: none; }
.global-b-state-hover .color-box { background-color: var(--color-global-b-state-hover); }
.global-b-state-inputctrl .color-box { background-color: var(--color-global-b-state-inputctrl); color: var(--color-path-strong); text-shadow: none; }
.global-b-state-inputctrl-disabled .color-box { background-color: var(--color-global-b-state-inputctrl-disabled); color: var(--color-path-strong); text-shadow: none; }
.global-b-state-inputctrl-hover .color-box { background-color: var(--color-global-b-state-inputctrl-hover); color: var(--color-path-strong); text-shadow: none; }
.global-b-state-selected .color-box { background-color: var(--color-global-b-state-selected); }

/* Surface */
.surface-bold-a .color-box { background-color: var(--color-surface-bold-a); }
.surface-bold-b .color-box { background-color: var(--color-surface-bold-b); }
.surface-disabled .color-box { background-color: var(--color-surface-disabled); color: var(--color-path-strong); text-shadow: none; }
.surface-subtle-a .color-box { background-color: var(--color-surface-subtle-a); color: var(--color-path-strong); text-shadow: none; }
.surface-subtle-b .color-box { background-color: var(--color-surface-subtle-b); color: var(--color-path-strong); text-shadow: none; }
.surface-subtle-neutral .color-box { background-color: var(--color-surface-subtle-neutral); color: var(--color-path-strong); text-shadow: none; }

/* Background */
.bg-container .color-box { background-color: var(--color-bg-container); color: var(--color-path-strong); text-shadow: none; border: 1px solid var(--color-neutral-light); box-sizing: border-box;}
.bg-footer .color-box { background-color: var(--color-bg-footer); }
.bg-nav .color-box { background-color: var(--color-bg-nav); color: var(--color-path-strong); text-shadow: none; border: 1px solid var(--color-neutral-light); box-sizing: border-box;}
.bg-page .color-box { background-color: var(--color-bg-page); color: var(--color-path-strong); text-shadow: none; border: 1px solid var(--color-neutral-light); box-sizing: border-box;}
.bg-side-pannel .color-box { background-color: var(--color-bg-side-pannel); color: var(--color-path-strong); text-shadow: none; border: 1px solid var(--color-neutral-light); box-sizing: border-box;}

/* Path */
.path-accent-a .color-box { background-color: var(--color-path-accent-a); }
.path-accent-b .color-box { background-color: var(--color-path-accent-b); }
.path-brand-primary .color-box { background-color: var(--color-path-brand-primary); }
.path-brand-secondary .color-box { background-color: var(--color-path-brand-secondary); }
.path-disabled .color-box { background-color: var(--color-path-disabled); }
.path-error .color-box { background-color: var(--color-path-error); }
.path-info .color-box { background-color: var(--color-path-info); }
.path-inverse .color-box { background-color: var(--color-path-inverse); color: var(--color-path-strong); text-shadow: none; border: 1px solid var(--color-neutral-light); box-sizing: border-box; }
.path-link .color-box { background-color: var(--color-path-link); }
.path-link-hover .color-box { background-color: var(--color-path-link-hover); }
.path-middle .color-box { background-color: var(--color-path-middle); }
.path-strong .color-box { background-color: var(--color-path-strong); }
.path-subtle .color-box { background-color: var(--color-path-subtle); color: var(--color-path-strong); text-shadow: none; }
.path-success .color-box { background-color: var(--color-path-success); }
.path-warning .color-box { background-color: var(--color-path-warning); }


/* Footer Styles */
footer {
    background-color: var(--color-bg-footer);
    color: var(--color-path-inverse); /* Footer text to path-inverse for contrast on dark footer background */
    text-align: center;
    padding: var(--spaces-md);
    margin-top: var(--spaces-margin-section);
    font-size: var(--font-body-sm);
    border-top: 1px solid var(--color-gray-900);
}

/* Responsive adjustments */
@media (max-width: 769px) {
    header {
        flex-direction: column;
        gap: var(--spaces-md);
        text-align: center;
    }

    nav ul {
        flex-direction: column;
        gap: var(--spaces-sm);
    }

    .color-swatch-group {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    }
}


/* --- Typography Scale Styles (Updated to List View) --- */
.typography-list {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    gap: var(--spaces-lg); /* Space between each font example */
    margin-top: var(--spaces-lg);
}

.font-item {
    background-color: var(--color-bg-container);
    border: 1px solid var(--color-neutral-light);
    border-radius: var(--corner-sm);
    padding: var(--spaces-md);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    width: 100%; /* Ensure it takes full width of its container */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

.font-item h1 {
    font-size: var(--font-heading-xxl);
    line-height: var(--font-lh-heading-xxl);
    font-weight: var(--font-weight-bold);
    color: var(--color-path-strong);
    margin-top: 0;
    margin-bottom: var(--spaces-sm);
}

.font-item h2 {
    font-size: var(--font-heading-xl);
    line-height: var(--font-lh-heading-xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-path-strong);
    margin-top: 0;
    margin-bottom: var(--spaces-sm);
}

.font-item h3 {
    font-size: var(--font-heading-lg);
    line-height: var(--font-lh-heading-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-path-strong);
    margin-top: 0;
    margin-bottom: var(--spaces-sm);
}

.font-item h4 {
    font-size: var(--font-heading-md);
    line-height: var(--font-lh-heading-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-path-strong);
    margin-top: 0;
    margin-bottom: var(--spaces-sm);
}

.font-item h5 {
    font-size: var(--font-body-lg);
    line-height: var(--font-lh-body-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-path-strong);
    margin-top: 0;
    margin-bottom: var(--spaces-sm);
}

.font-item h6 {
    font-size: var(--font-body-md);
    line-height: var(--font-lh-body-md);
    font-weight: var(--font-weight-bold);
    color: var(--color-path-strong);
    margin-top: 0;
    margin-bottom: var(--spaces-sm);
}

.font-item p {
    color: var(--color-path-middle); /* General paragraph text color */
    margin-top: 0;
    margin-bottom: var(--spaces-xs);
}

/* Base styles for Body sizes within font-item */
.font-item p:not([class]) { /* Targets p tags without specific size classes */
    font-size: var(--font-body-md);
    line-height: var(--font-lh-body-md);
}

/* Specific text sizes for sample descriptions/variables */
.text-sm {
    font-size: var(--font-body-sm);
    line-height: var(--font-lh-body-sm);
    color: var(--color-path-middle);
}

.text-xs {
    font-size: var(--font-body-xs);
    line-height: var(--font-lh-body-xs);
    color: var(--color-path-middle);
}

/* Specific font weights for demonstration */
.font-weight-light { font-weight: var(--font-weight-light); }
.font-weight-regular { font-weight: var(--font-weight-regular); }
.font-weight-medium { font-weight: var(--font-weight-medium); }
.font-weight-bold { font-weight: var(--font-weight-bold); }
.font-weight-black { font-weight: var(--font-fontweight-black); } /* Correct variable name used */


/* Numeric text styling */
.text-numeric {
    font-family: var(--font-family-number), monospace;
    color: var(--color-path-strong);
}

/* Code styling for variables/values */
.font-item p code {
    background-color: var(--color-neutral-lighter);
    padding: 1px 3px;
    border-radius: var(--corner-xs);
    font-family: var(--font-family-number), monospace;
    color: var(--color-path-strong);
    white-space: nowrap; /* Prevent variable names from breaking */
}

/* No specific responsive adjustments needed for this list format, it's already stacked */

/* --- Scale & Spaces Styles --- */

/* General styling for headers within this section */
#spacing-and-sizing h4 {
    color: var(--color-path-strong);
    font-size: var(--font-heading-md);
    margin-bottom: var(--spaces-md);
    border-bottom: 1px solid var(--color-neutral-lighter);
    padding-bottom: var(--spaces-xs);
}

/* Scale Variables Examples */
.scale-examples {
    display: flex;
    flex-wrap: wrap; /* Allow items to wrap to next line */
    gap: var(--spaces-md); /* Spacing between scale items */
    justify-content: flex-start; /* Align items to the start */
    align-items: flex-end; /* Align boxes to the bottom for consistent baseline */
}

.scale-item {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center content horizontally */
    text-align: center;
    padding-bottom: var(--spaces-sm); /* Space below the box for text */
    flex-shrink: 0; /* Prevent items from shrinking too much */
}

.scale-box {
    background-color: var(--color-global-a-accent); /* A consistent color for the boxes */
    border: 1px solid var(--color-global-a-accent-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-path-inverse); /* White text on blue boxes */
    font-size: var(--font-body-xs);
    font-weight: var(--font-weight-medium);
    margin-bottom: var(--spaces-xs); /* Space between box and info */
}

/* Specific `width` and `height` for each --scale-l-* variable */
.scale-0 { width: var(--scale-l-0); height: var(--scale-l-0); border: none; } /* Invisible, but for completeness */
.scale-2 { width: var(--scale-l-2); height: var(--scale-l-2); }
.scale-4 { width: var(--scale-l-4); height: var(--scale-l-4); }
.scale-6 { width: var(--scale-l-6); height: var(--scale-l-6); }
.scale-8 { width: var(--scale-l-8); height: var(--scale-l-8); }
.scale-10 { width: var(--scale-l-10); height: var(--scale-l-10); }
.scale-12 { width: var(--scale-l-12); height: var(--scale-l-12); }
.scale-13 { width: var(--scale-l-13); height: var(--scale-l-13); }
.scale-14 { width: var(--scale-l-14); height: var(--scale-l-14); }
.scale-16 { width: var(--scale-l-16); height: var(--scale-l-16); }
.scale-18 { width: var(--scale-l-18); height: var(--scale-l-18); }
.scale-20 { width: var(--scale-l-20); height: var(--scale-l-20); }
.scale-22 { width: var(--scale-l-22); height: var(--scale-l-22); }
.scale-24 { width: var(--scale-l-24); height: var(--scale-l-24); }
.scale-26 { width: var(--scale-l-26); height: var(--scale-l-26); }
.scale-28 { width: var(--scale-l-28); height: var(--scale-l-28); }
.scale-30 { width: var(--scale-l-30); height: var(--scale-l-30); }
.scale-32 { width: var(--scale-l-32); height: var(--scale-l-32); }
.scale-34 { width: var(--scale-l-34); height: var(--scale-l-34); }
.scale-36 { width: var(--scale-l-36); height: var(--scale-l-36); }
.scale-37 { width: var(--scale-l-37); height: var(--scale-l-37); }
.scale-38 { width: var(--scale-l-38); height: var(--scale-l-38); }
.scale-40 { width: var(--scale-l-40); height: var(--scale-l-40); }
.scale-42 { width: var(--scale-l-42); height: var(--scale-l-42); }
.scale-43 { width: var(--scale-l-43); height: var(--scale-l-43); }
.scale-44 { width: var(--scale-l-44); height: var(--scale-l-44); }
.scale-46 { width: var(--scale-l-46); height: var(--scale-l-46); }
.scale-48 { width: var(--scale-l-48); height: var(--scale-l-48); }
.scale-50 { width: var(--scale-l-50); height: var(--scale-l-50); }
.scale-54 { width: var(--scale-l-54); height: var(--scale-l-54); }
.scale-56 { width: var(--scale-l-56); height: var(--scale-l-56); }
.scale-62 { width: var(--scale-l-62); height: var(--scale-l-62); }
.scale-64 { width: var(--scale-l-64); height: var(--scale-l-64); }
.scale-67 { width: var(--scale-l-67); height: var(--scale-l-67); }
.scale-72 { width: var(--scale-l-72); height: var(--scale-l-72); }
.scale-78 { width: var(--scale-l-78); height: var(--scale-l-78); }
.scale-80 { width: var(--scale-l-80); height: var(--scale-l-80); }
.scale-88 { width: var(--scale-l-88); height: var(--scale-l-88); }
.scale-96 { width: var(--scale-l-96); height: var(--scale-l-96); }
.scale-104 { width: var(--scale-l-104); height: var(--scale-l-104); }
.scale-112 { width: var(--scale-l-112); height: var(--scale-l-112); }
.scale-120 { width: var(--scale-l-120); height: var(--scale-l-120); }
.scale-128 { width: var(--scale-l-128); height: var(--scale-l-128); }
.scale-144 { width: var(--scale-l-144); height: var(--scale-l-144); }
.scale-168 { width: var(--scale-l-168); height: var(--scale-l-168); }
.scale-192 { width: var(--scale-scale-l-192); height: var(--scale-scale-l-192); } /* Note: Using your variable name */


/* Spaces Variables Examples */
.spaces-examples {
    display: flex;
    flex-direction: column; /* Stack items vertically */
    gap: var(--spaces-md); /* Space between each example */
    margin-top: var(--spaces-lg);
}

.space-item {
    display: flex;
    align-items: center;
    background-color: var(--color-bg-container);
    border: 1px solid var(--color-neutral-light);
    border-radius: var(--corner-sm);
    padding: var(--spaces-sm); /* Internal padding for the item */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.space-label {
    font-family: var(--font-family-number), monospace;
    font-size: var(--font-body-sm);
    color: var(--color-path-strong);
    white-space: nowrap; /* Keep label on one line */
    min-width: 180px; /* Give labels enough space */
    flex-shrink: 0;
    margin-right: var(--spaces-md); /* Space between label and box */
}

.space-box {
    background-color: var(--color-global-b-accent); /* A distinct color for spaces boxes */
    border: 1px solid var(--color-global-b-accent-dark);
    height: var(--spaces-lg); /* Consistent height for all space boxes */
    flex-grow: 1; /* Allow box to grow and demonstrate width */
}

/* Specific widths for each --spaces-* variable */
/* These widths will be visually represented by the `space-box` */
.space-xs { width: var(--spaces-xs); }
.space-sm { width: var(--spaces-sm); }
.space-md { width: var(--spaces-md); }
.space-lg { width: var(--spaces-lg); }
.space-xl { width: var(--spaces-xl); }
.space-layout-colums-grid { width: var(--spaces-layout-colums-grid); }
.space-gutter-layout { width: var(--spaces-gutter-layout); }
.space-padding-site { width: var(--spaces-padding-site); }
.space-margin-section { width: var(--spaces-margin-section); }

/* Responsive adjustments for scale and spaces */
@media (max-width: 769px) {
    .scale-examples {
        justify-content: center; /* Center boxes on small screens */
    }

    .space-item {
        flex-direction: column; /* Stack label and box on small screens */
        align-items: flex-start;
    }

    .space-label {
        margin-right: 0;
        margin-bottom: var(--spaces-xs); /* Space when stacked */
    }

    .space-box {
        width: 100%; /* Make space boxes fill width when stacked */
        max-width: 200px; /* Optional: limit max width even if 100% */
    }
}

/* --- Corners Styles --- */
.corner-examples {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spaces-md);
    justify-content: center;
    margin-top: var(--spaces-lg);
}

.corner-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spaces-sm);
    background-color: var(--color-bg-container);
    border: 1px solid var(--color-neutral-light);
    border-radius: var(--corner-sm); /* Default border-radius for the item card itself */
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: transform 0.2s ease-in-out;
}

.corner-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.corner-box {
    width: 100px;
    height: 100px;
    background-color: var(--color-global-a-accent);
    border: 1px solid var(--color-global-a-accent-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-path-inverse);
    font-size: var(--font-body-sm);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spaces-sm);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* Specific border-radius for each corner variable */
.corner-sm {
    border-radius: var(--corner-sm);
}

.corner-md {
    border-radius: var(--corner-md);
}

.corner-lg {
    border-radius: var(--corner-lg);
}

/* JavaScript para mostrar los valores de las variables en tiempo real (opcional) */
/* Agrega esto al final de tu archivo HTML, antes de </body> */

/* --- Opacity Styles --- */
.opacity-examples {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spaces-md);
    justify-content: center;
    margin-top: var(--spaces-lg);
}

.opacity-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--spaces-sm);
    background-color: var(--color-bg-container);
    border: 1px solid var(--color-neutral-light);
    border-radius: var(--corner-sm);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    transition: transform 0.2s ease-in-out;
}

.opacity-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.opacity-box {
    width: 100px;
    height: 100px;
    background-color: var(--color-global-a-accent); /* Un color base para ver la opacidad */
    border: 1px solid var(--color-global-a-accent-dark);
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-path-inverse);
    font-size: var(--font-body-sm);
    font-weight: var(--font-weight-bold);
    margin-bottom: var(--spaces-sm);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    position: relative; /* Para el pseudo-elemento */
}

/* Pseudo-elemento para el fondo de rayas */
.opacity-box::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Patrón de rayas para que la opacidad sea más evidente */
    background-image: linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc),
                      linear-gradient(45deg, #ccc 25%, transparent 25%, transparent 75%, #ccc 75%, #ccc);
    background-size: 20px 20px;
    background-position: 0 0, 10px 10px;
    z-index: -1; /* Detrás del color principal de la caja */
}


/* Aplicación de las variables de opacidad */
.opacity-strong {
    opacity: var(--opacity-opacity-strong);
}

.opacity-medium {
    opacity: var(--opacity-medium);
}

.opacity-subtle {
    opacity: var(--opacity-subtle);
}





/* --- Componentes Section Styles --- */
.component-item {
    background-color: var(--color-bg-container);
    border: 1px solid var(--color-neutral-light);
    border-radius: var(--corner-md);
    padding: var(--spaces-lg);
    margin-bottom: var(--spaces-margin-section);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.component-item h4 {
    color: var(--color-path-strong);
    font-size: var(--font-heading-md);
    margin-top: 0;
    margin-bottom: var(--spaces-sm);
    border-bottom: 1px solid var(--color-neutral-lighter);
    padding-bottom: var(--spaces-xs);
}

.component-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spaces-md);
    padding: var(--spaces-lg);
    background-color: var(--color-surface-subtle-a);
    border-radius: var(--corner-sm);
    justify-content: center;
    align-items: center;
    margin-bottom: var(--spaces-lg);
}

.component-code {
    display: flex;
    flex-direction: column;
    gap: var(--spaces-md);
}

.code-block {
    background-color: var(--color-gray-950); /* Fondo gris oscuro, como el más oscuro de tus grises */
    padding: var(--spaces-md);
    border-radius: var(--corner-sm);
    overflow-x: auto; /* Para scroll horizontal en código largo */
}

.code-block h5, .code-block h6 { /* Aseguramos que los títulos de Anatomía y Implementación también sean blancos */
    color: var(--color-white);
    font-size: var(--font-body-sm);
    margin-top: 0;
    margin-bottom: var(--spaces-sm);
    border-bottom: 1px solid var(--color-gray-700);
    padding-bottom: var(--spaces-xs);
}

.code-block pre {
    margin: 0;
}

.code-block code {
    font-family: var(--font-family-number), monospace;
    font-size: var(--font-body-xs);
    color: #8be9fd; /* Color celeste brillante para el texto del código (similar a temas de sintaxis) */
    white-space: pre-wrap; /* Para que el código se ajuste si es muy largo */
}


/* Estilos específicos del Botón Tipo "Fill" (basados en tu input) */
.btn-fill {
    display: inline-flex;
    padding: var(--spaces-sm) var(--spaces-md);
    justify-content: center;
    align-items: center;
    gap: var(--spaces-xs);
    border-radius: var(--corner-sm);
    background: var(--color-global-a-state-default);
    color: var(--color-white);
    font-size: var(--font-button-text);
    font-weight: var(--font-weight-bold);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    white-space: nowrap;
}

.btn-fill:hover {
    background: var(--color-global-a-state-hover);
}
.btn-fill:active {
    background: var(--color-global-a-state-active);
}
.btn-fill:disabled {
    background: var(--color-global-a-state-disabled);
    color: var(--color-neutral-base);
    cursor: not-allowed;
}

/* Responsive adjustments for component code blocks */
@media (max-width: 769px) {
    .component-code {
        flex-direction: column; /* Ensure vertical stacking on small screens */
    }
}

/* --- Component Group Styles --- */
.component-group {
    margin-bottom: var(--spaces-margin-section); /* Espacio entre grupos de componentes */
    padding: var(--spaces-lg);
    border: 1px dashed var(--color-neutral-light); /* Borde punteado para visualización de grupo */
    border-radius: var(--corner-md);
    background-color: var(--color-bg-container); /* Fondo similar a otras secciones */
}

.component-group h4 {
    color: var(--color-path-strong);
    font-size: var(--font-heading-lg); /* Un poco más grande para el título del grupo */
    margin-top: 0;
    margin-bottom: var(--spaces-sm);
    border-bottom: 1px solid var(--color-neutral-lighter);
    padding-bottom: var(--spaces-xs);
}



/* Estilos específicos del Botón Tipo "Outline" */
.btn-outline {
    display: inline-flex; /* */
    padding: var(--spaces-sm) var(--spaces-md); /* */
    justify-content: center; /* */
    align-items: center; /* */
    gap: var(--spaces-xs); /* */
    border-radius: var(--corner-sm); /* */
    border: 1px solid var(--color-global-a-state-default); /* */
    background: transparent;
    color: var(--color-global-a-state-default); /* */
    font-size: var(--font-button-text); /* */
    font-weight: var(--font-weight-bold); /* */
    cursor: pointer; /* */
    transition: all 0.2s ease-in-out; /* */
    white-space: nowrap; /* */
}

.btn-outline:hover {
    border: 1px solid var(--color-global-a-state-hover); /* */
    color: var(--color-global-a-state-hover); /* */
}

.btn-outline:active {
    background: var(--color-global-a-state-lightest); /* */
    border: 1px solid var(--color-global-a-state-active); /* */
    color: var(--color-global-a-state-active); /* */
}

.btn-outline:disabled {
    border: 1px solid var(--color-path-disabled); /* */
    color: var(--color-path-disabled); /* */
    cursor: not-allowed; /* */
    opacity: 0.7;
}

/* Estilos específicos del Componente Chip Tipo "Fill" */
.chip-fill {
    display: inline-flex; /* */
    padding: var(--spaces-xs) var(--spaces-sm); /* */
    justify-content: center; /* */
    align-items: center; /* */
    gap: var(--spaces-xs); /* */
    border-radius: var(--corner-md); /* */
    background: var(--color-global-b-accent); /* */
    color: var(--color-white); /* */
    font-size: var(--font-body-sm); /* */
    font-weight: var(--font-weight-regular); /* */
    white-space: nowrap; /* */
    cursor: default;
    transition: all 0.2s ease-in-out; /* */
}

.chip-fill:hover {
    background: var(--color-global-b-accent-dark); /* */
    cursor: pointer;
}

.chip-fill.disabled {
    background: var(--color-neutral-lighter); /* */
    color: var(--color-path-disabled); /* */
    cursor: not-allowed;
}

/* Estilos específicos del Componente Chip Tipo "Outline" */
.chip-outline {
    display: inline-flex;
    padding: var(--spaces-xs) var(--spaces-sm); /* */
    justify-content: center;
    align-items: center;
    gap: var(--spaces-xs); /* */
    border-radius: var(--corner-md); /* */
    border: 1px solid var(--color-global-b-accent); /* */
    background: transparent;
    color: var(--color-global-b-accent); /* */
    font-size: var(--font-body-sm); /* */
    font-weight: var(--font-weight-regular); /* */
    white-space: nowrap;
    cursor: default;
    transition: all 0.2s ease-in-out; /* */
}

.chip-outline:hover {
    background: var(--color-global-b-accent-lightest); /* */
    color: var(--color-global-b-accent-dark); /* */
    border-color: var(--color-global-b-accent-dark); /* */
    cursor: pointer;
}

.chip-outline.disabled {
    border: 1px solid var(--color-path-disabled); /* */
    color: var(--color-path-disabled); /* */
    background: transparent;
    cursor: not-allowed;
}



/* --- Estilos específicos del Componente Checkbox --- */
.checkbox-wrapper {
    display: inline-flex; /* */
    padding: var(--spaces-xxs); /* */
    align-items: center; /* */
    gap: var(--spaces-sm); /* */
    cursor: pointer;
}

/* Ocultar el checkbox nativo para poder estilizar uno personalizado */
.minecon-checkbox {
    /* */
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* El label actúa como contenedor para el texto y el elemento visual personalizado */
.minecon-checkbox-label {
    display: inline-flex;
    align-items: center;
    position: relative; /* Para posicionar el checkmark y el cuadro */
    cursor: pointer;
    color: var(--color-path-strong); /* */
    font-size: var(--font-body-sm); /* */
    font-weight: var(--font-weight-regular); /* */
    line-height: var(--font-lh-body-md); /* */
}

/* Pseudo-elemento ::before para el cuadro visual del checkbox */
.minecon-checkbox-label::before {
    content: '';
    display: block;
    width: var(--scale-l-16); /* */
    height: var(--scale-l-16); /* */
    border: 1.5px solid var(--color-global-a-state-default); /* */
    border-radius: var(--corner-xs); /* */
    background-color: var(--color-white); /* */
    margin-right: var(--spaces-xs); /* */
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Pseudo-elemento ::after para el checkmark */
.minecon-checkbox-label::after {
    content: '';
    position: absolute;
    /* Ajusta top y left para centrar el checkmark dentro del cuadro.
       Estos valores pueden necesitar un ajuste fino visualmente. */
    top: 2px; /* Suma el padding del wrapper y el borde */
    left: 1.3px;
    width: var(--scale-l-16); /* */
    height: var(--scale-l-16); /* */
    /* Icono de checkmark SVG en blanco. Asegúrate de que este SVG sea compatible con tu diseño. */
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23ffffff" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>');
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0; /* Oculto por defecto */
    transition: opacity 0.2s ease;
}

/* Estilos cuando el checkbox está marcado */
.minecon-checkbox:checked + .minecon-checkbox-label::before {
    background-color: var(--color-global-a-state-default); /* */
    border-color: var(--color-global-a-state-default); /* */
}

.minecon-checkbox:checked + .minecon-checkbox-label::after {
    opacity: 1; /* Mostrar el checkmark */
}

/* Estilos para el checkbox deshabilitado */
.minecon-checkbox:disabled + .minecon-checkbox-label {
    cursor: not-allowed;
    color: var(--color-path-disabled); /* */
}

.minecon-checkbox:disabled + .minecon-checkbox-label::before {
    background-color: var(--color-neutral-lighter); /* */
    border-color: var(--color-path-disabled); /* */
}

/* Checkmark deshabilitado y marcado (cambia el color del checkmark a gris) */
.minecon-checkbox:disabled:checked + .minecon-checkbox-label::after {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23888888" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"></polyline></svg>'); /* Checkmark gris */
    opacity: 1; /* Asegurar que el checkmark gris es visible */
}

/* Estado de Foco (para accesibilidad con teclado) */
.minecon-checkbox:focus + .minecon-checkbox-label::before {
    outline: 2px solid var(--color-global-a-accent); /* */
    outline-offset: 2px;
}

/* Estado Hover para todo el wrapper */
.checkbox-wrapper:hover .minecon-checkbox-label::before {
    border-color: var(--color-global-a-state-hover); /* */
}

.checkbox-wrapper:hover .minecon-checkbox:checked + .minecon-checkbox-label::before {
    background-color: var(--color-global-a-state-hover); /* */
}

/* --- Estilos específicos del Componente Radio Button --- */
.radio-wrapper {
    display: inline-flex; /* */
    padding: var(--spaces-xxs); /* */
    align-items: center; /* */
    gap: var(--spaces-sm); /* */
    cursor: pointer;
}

/* Ocultar el radio button nativo */
.minecon-radio {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Estilo para el label que actúa como el texto y el indicador visual */
.minecon-radio-label {
    display: inline-flex;
    align-items: center;
    position: relative;
    cursor: pointer;
    color: var(--color-path-strong); /* */
    font-size: var(--font-body-sm); /* */
    font-weight: var(--font-weight-regular); /* */
    line-height: var(--font-lh-body-md); /* */
}

/* Pseudo-elemento ::before para el círculo exterior del radio button */
.minecon-radio-label::before {
    content: '';
    display: block;
    width: var(--scale-l-16); /* */
    height: var(--scale-l-16); /* */
    border: 1.5px solid var(--color-global-a-state-default); /* */
    border-radius: 50%; /* */
    background-color: var(--color-white); /* */
    margin-right: var(--spaces-xs); /* */
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Pseudo-elemento ::after para el punto central del radio button */
.minecon-radio-label::after {
    content: '';
    position: absolute;
    /* Ajusta top/left para centrar el punto dentro del círculo exterior de 16px */
    top: 6.1px;
    left: 5.2px;
    width: var(--scale-l-8); /* */
    height: var(--scale-l-8); /* */
    border-radius: 50%; /* */
    background-color: var(--color-global-a-state-default); /* */
    opacity: 0; /* */
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

/* Estilos cuando el radio button está marcado */
.minecon-radio:checked + .minecon-radio-label::before {
    border-color: var(--color-global-a-state-default); /* */
}

.minecon-radio:checked + .minecon-radio-label::after {
    opacity: 1; /* */
}

/* Estado deshabilitado */
.minecon-radio:disabled + .minecon-radio-label {
    cursor: not-allowed;
    color: var(--color-path-disabled); /* */
}

.minecon-radio:disabled + .minecon-radio-label::before {
    background-color: var(--color-neutral-lighter); /* */
    border-color: var(--color-path-disabled); /* */
}

.minecon-radio:disabled:checked + .minecon-radio-label::after {
    background-color: var(--color-path-disabled); /* */
    opacity: 1; /* */
}

/* Estado Focus (accesibilidad) */
.minecon-radio:focus + .minecon-radio-label::before {
    outline: 2px solid var(--color-global-a-accent); /* */
    outline-offset: 2px;
}

/* Estado Hover para todo el wrapper */
.radio-wrapper:hover .minecon-radio-label::before {
    border-color: var(--color-global-a-state-hover); /* */
}

.radio-wrapper:hover .minecon-radio:checked + .minecon-radio-label::after {
    background-color: var(--color-global-a-state-hover); /* */
}