/* design-system.css specific overrides */
body {
    background-color: #F9FAFB;
    display: flex;
    min-height: 100vh;
}

/* Sidebar */
.ds-sidebar {
    width: 280px;
    background: #FFFFFF;
    /* Pure White */
    position: fixed;
    height: 100vh;
    overflow-y: auto;
    padding: 2rem 1.5rem;
    display: flex;
    flex-direction: column;
    z-index: 50;
    border-right: 1px solid var(--color-border);
}

.ds-logo {
    margin-bottom: 3rem;
}

.ds-nav-group {
    /* Removed margin-bottom to fix spacing gap */
    margin-bottom: 0;
}

.ds-nav-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #9CA3AF;
    font-weight: 600;
    margin-bottom: 1rem;
}

.ds-nav-link {
    display: block;
    width: fit-content;
    padding: 0.5rem 0;
    color: var(--color-text-secondary);
    text-decoration: none;
    font-size: 0.95rem;
    transition: color 0.2s;
    position: relative;
}

.ds-nav-link::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    width: 100%;
    height: 2px;
    height: 2px;
    background-color: var(--color-primary);
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.3s ease-out;
}

.ds-nav-link:hover,
.ds-nav-link.active {
    color: var(--color-primary);
    font-weight: 500;
}

.ds-nav-link:hover::after,
.ds-nav-link.active::after {
    transform: scaleX(1);
    transform-origin: left;
}

/* Main Content */
.ds-main {
    margin-left: 280px;
    flex: 1;
    padding: 4rem 5%;
    max-width: 1400px;
}

.ds-section-header {
    margin-bottom: 2rem;
    padding-bottom: 0;
}

/* Additional specific overrides for other pages may be needed here, 
   but for now we keep the base styles. 
   Note: components.html had specific margin-bottom: 4rem for ds-section-header 
   and border-bottom. We might want to standardize or keep as is.
   For unification, I will include the superset or specific overrides if needed.
   Let's check components.html specific overrides again:
   .ds-section-header { margin-bottom: 4rem; border-bottom: 1px ...; padding-bottom: 2rem; }
*/

/* Standardized Section Header (merging index and components styles) 
   Adopting the more detailed one from components.html for inner pages?
   Actually, let's keep it simple for now and stick to what was in index.html,
   but I need to be careful not to break components.html layout.
   
   Let's just copy the common sidebar stuff first. 
   The pages have slightly different .ds-section-header styles.
   I will include the sidebar styles here, and page specific content styles 
   might need to stay or be merged carefully.
   
   However, the user asked to fix the sidebar gap.
   The sidebar styles are identical.
*/

.ds-title {
    font-size: 3rem;
    font-weight: 700;
    color: black;
    line-height: 1.1;
    margin-bottom: 1.5rem;
}

.ds-intro {
    font-size: 1.25rem;
    color: var(--color-text-secondary);
    max-width: 800px;
    line-height: 1.6;
}

/* Hub Grid (index.html specific, but harmless to verify) */
.hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 6rem;
}

.hub-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    transition: all 0.2s;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.hub-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-light);
}

.hub-icon {
    width: 48px;
    height: 48px;
    background: var(--color-primary-tint);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-bottom: 1.5rem;
}

.hub-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
}

.hub-desc {
    font-size: 0.95rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* SG Section (from components.html and others) */
.sg-section {
    background: white;
    border-radius: var(--radius-lg);
    padding: 3rem;
    margin-bottom: 4rem;
}

.sg-title {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text-primary);
    margin-bottom: 2.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--color-border);
}

.sg-subtitle {
    font-size: 1.1rem;
    color: var(--color-text-secondary);
    font-weight: 600;
    margin: 2rem 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.btn-grid {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 1024px) {
    body {
        flex-direction: column;
    }

    .ds-sidebar {
        position: relative;
        width: 100%;
        height: auto;
        border-right: none;
        border-bottom: 1px solid var(--color-border);
        padding: 1.5rem;
    }

    .ds-main {
        margin-left: 0;
        padding: 3rem 5%;
    }
}

/* --- Page Specific Styles --- */

/* Colors Page */
.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1.5rem;
}

.color-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.color-swatch {
    height: 100px;
    width: 100%;
}

.color-info {
    padding: 1rem;
}

.color-name {
    font-weight: 600;
    display: block;
    margin-bottom: 0.25rem;
}

.color-hex {
    font-family: var(--font-mono);
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

/* Typography Page */
.type-row {
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--color-border);
    display: grid;
    grid-template-columns: 320px 1fr;
    align-items: start;
    gap: 2rem;
}

.type-label {
    font-family: var(--font-mono);
    color: var(--color-text-muted);
    font-size: 0.875rem;
    line-height: 1.5;
}

.type-usage {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--color-border);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    font-family: var(--font-sans);
    line-height: 1.5;
}

.type-usage strong {
    color: var(--color-text-primary);
    font-weight: 600;
    margin-right: 4px;
}

/* Logo & Iconography Page */
.ds-section {
    margin-bottom: 4rem;
}

.ds-subtitle {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: 1.5rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid var(--color-border);
}

.ds-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 2rem;
    margin-bottom: 2rem;
}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}

.logo-card {
    background: white;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 0.2s;
}

.logo-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-primary-light);
}

.logo-display-area {
    background-color: #f3f4f6;
    padding: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 200px;
    border-bottom: 1px solid var(--color-border);
}

.logo-display-area img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.logo-info {
    padding: 1.5rem;
}

.logo-version {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: 0.5rem;
    display: block;
}

.logo-desc {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

.logo-display {
    background-color: #f3f4f6;
    padding: 3rem;
    border-radius: var(--radius-md);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5rem;
}

.logo-display.dark {
    background-color: #111827;
}

.icon-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 2rem;
}

.icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1rem;
}

.icon-preview {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-preview img {
    max-width: 100%;
    max-height: 100%;
}

.icon-name {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.85rem;
    color: var(--color-text-secondary);
}

/* Avatars & Personas Page */
.persona-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.persona-card {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: white;
    border-radius: var(--radius-md);
    border: 1px solid var(--color-border);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.persona-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.persona-img-container {
    width: 100%;
    height: 240px;
    overflow: hidden;
    background-color: var(--color-primary-tint);
    position: relative;
}

.persona-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

.persona-info {
    padding: 1.5rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.persona-info h4 {
    margin-bottom: 0.25rem;
    color: var(--color-text-primary);
    font-size: 1.125rem;
}

.persona-role {
    font-size: 0.875rem;
    color: var(--color-primary);
    font-weight: 600;
    margin-bottom: 1rem;
    display: block;
}

.persona-desc {
    font-size: 0.95rem;
    color: var(--color-text-secondary);
    line-height: 1.5;
}

/* Page Navigation & Bottom Nav - Standardized */
.page-nav,
.ds-bottom-nav {
    margin-top: auto;
    border-top: 1px solid var(--color-border);
    padding-top: 2rem;
    display: flex;
    justify-content: space-between;
}

.page-nav-prev,
.page-nav-next,
.nav-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1.1rem;
    transition: color 0.2s;
}

.page-nav-prev:hover,
.page-nav-next:hover,
.nav-item:hover {
    color: var(--color-primary-dark);
}



/* Ensure material symbols in nav align correctly */
.page-nav-prev::before {
    content: "←";
    font-weight: bold;
    margin-right: 4px;
}

.page-nav-next::after {
    content: "→";
    font-weight: bold;
    margin-left: 4px;
}