/**
 * ============================================
 * medDevice Design System - Base Styles
 * Reset, Typography, Global Styles
 * ============================================
 */

/* === CSS RESET === */
*,
*::before,
*::after {
    box-sizing: border-box;
}

/* Remove default margin/padding */
html, body {
    margin: 0;
    padding: 0;
}

/* === BODY === */
body {
    font-family: var(--font-family, 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif);
    font-size: var(--font-size-base, 14px);
    font-weight: var(--font-weight-normal, 400);
    line-height: var(--line-height-base, 1.5);
    background-color: var(--md-bg, #F8FAFB);
    color: var(--md-text, #2C3E50);
    padding-top: var(--md-fixed-header-height, 110px);
    transition: background-color var(--transition-base), color var(--transition-base);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* === TYPOGRAPHY === */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: var(--spacing-sm, 8px);
    font-weight: var(--font-weight-semibold, 600);
    line-height: var(--line-height-tight, 1.25);
    color: var(--md-text, #2C3E50);
}

/* Responsive font sizes using clamp() for fluid scaling */
h1 { font-size: var(--md-font-size-responsive-h1, clamp(20px, 5vw, 28px)); }
h2 { font-size: var(--md-font-size-responsive-h2, clamp(18px, 4.5vw, 24px)); }
h3 { font-size: var(--md-font-size-responsive-h3, clamp(16px, 4vw, 20px)); }
h4 { font-size: var(--md-font-size-responsive-md, clamp(14px, 3.5vw, 16px)); }
h5 { font-size: var(--md-font-size-responsive-base, clamp(13px, 3vw, 14px)); }
h6 { font-size: var(--md-font-size-responsive-sm, clamp(12px, 2.5vw, 13px)); }

p {
    margin-top: 0;
    margin-bottom: var(--spacing-md, 16px);
}

/* === LINKS === */
a {
    color: var(--md-blue, #0F78A5);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--md-blue-hover, #1487B8);
    text-decoration: underline;
}

/* === FOCUS VISIBLE (Accessibility) === */
:focus-visible {
    outline: 2px solid var(--md-blue, #0F78A5);
    outline-offset: 2px;
}

/* Remove outline for mouse users */
:focus:not(:focus-visible) {
    outline: none;
}

/* === SELECTION === */
::selection {
    background-color: var(--md-blue-light, #3D99C1);
    color: #FFFFFF;
}

/* === SMOOTH SCROLLING === */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* === IMAGES === */
img {
    max-width: 100%;
    height: auto;
    vertical-align: middle;
}

/* === LISTS === */
ul, ol {
    padding-left: var(--spacing-lg, 24px);
    margin-top: 0;
    margin-bottom: var(--spacing-md, 16px);
}

/* === CODE === */
code, kbd, pre, samp {
    font-family: var(--font-family-mono, 'SF Mono', Consolas, Monaco, monospace);
    font-size: var(--font-size-sm, 13px);
}

code {
    padding: 2px 6px;
    background-color: var(--md-gray-100, #F1F4F8);
    border-radius: var(--radius-sm, 4px);
    color: var(--md-danger, #E74C3C);
}

pre {
    display: block;
    padding: var(--spacing-md, 16px);
    margin: 0 0 var(--spacing-md, 16px);
    background-color: var(--md-gray-100, #F1F4F8);
    border-radius: var(--radius-md, 8px);
    overflow-x: auto;
}

pre code {
    padding: 0;
    background: none;
    color: inherit;
}

/* === HORIZONTAL RULE === */
hr {
    margin: var(--spacing-lg, 24px) 0;
    border: 0;
    border-top: 1px solid var(--md-border, #E4E9F0);
}

/* === BLOCKQUOTE === */
blockquote {
    margin: 0 0 var(--spacing-md, 16px);
    padding: var(--spacing-sm, 8px) var(--spacing-md, 16px);
    border-left: 4px solid var(--md-blue, #0F78A5);
    background-color: var(--md-gray-50, #F8FAFB);
    color: var(--md-text-secondary, #586069);
}

/* === SMALL TEXT === */
small, .small {
    font-size: var(--font-size-sm, 13px);
}

.text-muted {
    color: var(--md-text-muted, #6B7C93) !important;
}

/* === MAIN CONTENT CONTAINER === */
#contentContainer {
    padding: 0;
    min-height: calc(100vh - var(--md-fixed-header-height, 110px));
    transition: margin-left var(--transition-base);
}

/* === CONTENT WRAPPER === */
.content {
    padding: var(--spacing-lg, 24px);
}

/* Flush content (no padding) */
.md-content-flush {
    padding: 0;
}

/* === RESPONSIVE BASE === */
@media (max-width: 768px) {
    body {
        padding-top: 100px;
    }

    .content {
        padding: var(--spacing-md, 16px);
    }
}

@media (max-width: 576px) {
    .content {
        padding: var(--spacing-sm, 8px);
    }

    /* Responsive typography for small screens */
    body {
        font-size: var(--md-font-size-responsive-base, 14px);
    }

    small, .small {
        font-size: var(--md-font-size-responsive-sm, 12px);
    }
}

/* Very small phones */
@media (max-width: 480px) {
    body {
        padding-top: 92px;
    }

    /* Tighter spacing on very small screens */
    h1, h2, h3, h4, h5, h6 {
        margin-bottom: var(--spacing-xs, 4px);
    }

    p {
        margin-bottom: var(--spacing-sm, 8px);
    }
}