/* === Axiom Docs CSS === */

:root {
    --docs-header-bg: var(--a-color-surface-variant);
    --docs-header-border: var(--a-color-outline);
    --docs-section-border: var(--a-color-outline);
    --docs-code-bg: var(--a-color-surface);
    --docs-code-text: var(--a-color-on-surface);
    --docs-code-border: var(--a-color-outline);
}

/* Dark theme support for docs */
[data-theme="dark"] {
    --docs-code-bg: #1e1e1e;
    --docs-code-text: #ffffff;
    --docs-code-border: #404040;
}

.component-docs {
    padding: var(--a-space-xl);
}

.docs-header {
    background-color: var(--docs-header-bg);
    padding: var(--a-space-xl);
    border-radius: var(--a-border-radius-large);
    margin-bottom: var(--a-space-xxl);
    border: 1px solid var(--docs-header-border);
}

.docs-header h1 {
    font-size: 3rem;
    font-weight: var(--a-font-weight-black);
    margin: 0 0 var(--a-space-m);
}

.docs-header p {
    font-size: 1.2rem;
    color: var(--a-color-on-surface-variant);
    max-width: 80ch;
}

.docs-section {
    margin-bottom: var(--a-space-xxl);
}

.section-title {
    font-size: 2rem;
    font-weight: var(--a-font-weight-bold);
    margin-bottom: var(--a-space-m);
    padding-bottom: var(--a-space-s);
    border-bottom: 1px solid var(--docs-section-border);
}

.example-preview {
    background-color: var(--a-color-surface-variant);
    padding: var(--a-space-l);
    border-radius: var(--a-border-radius-large);
    margin-bottom: var(--a-space-m);
    border: 1px solid var(--docs-section-border);
}

.example-preview > .button + .button {
    margin-left: var(--a-space-s);
}

.example-preview > .badge + .badge {
    margin-left: var(--a-space-s);
}

.example-preview > * + * {
    margin-top: var(--a-space-m);
}

pre[class*="language-"] {
    border-radius: var(--a-border-radius-large);
    background: var(--docs-code-bg) !important;
    color: var(--docs-code-text) !important;
    border: 1px solid var(--docs-code-border);
    padding: var(--a-space-l) !important;
    margin: var(--a-space-m) 0 !important;
    overflow-x: auto;
    font-family: var(--a-font-family-mono);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* Inline code styling */
code:not([class*="language-"]) {
    background: var(--docs-code-bg);
    color: var(--docs-code-text);
    padding: 0.2em 0.4em;
    border-radius: var(--a-border-radius-medium);
    font-family: var(--a-font-family-mono);
    font-size: 0.85em;
    border: 1px solid var(--docs-code-border);
}

/* Best practices styling */
.do-dont {
    margin: var(--a-space-l) 0;
    padding: var(--a-space-l);
    border-radius: var(--a-border-radius-large);
    border-left: 4px solid;
}

.do-dont.success,
.do-dont h3.success {
    border-color: var(--a-color-success, #10b981);
    background-color: rgba(16, 185, 129, 0.1);
}

.do-dont.error,
.do-dont h3.error {
    border-color: var(--a-color-error, #ef4444);
    background-color: rgba(239, 68, 68, 0.1);
}

.do-dont h3 {
    margin-top: 0;
    margin-bottom: var(--a-space-m);
    font-size: 1.2rem;
}

/* Navigation within docs */
.docs-nav {
    background: var(--a-color-surface-variant);
    padding: var(--a-space-m);
    border-radius: var(--a-border-radius-large);
    margin-bottom: var(--a-space-l);
}

.docs-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--a-space-m);
}

.docs-nav a {
    padding: var(--a-space-s) var(--a-space-m);
    background: var(--a-color-surface);
    border: 1px solid var(--a-color-outline);
    border-radius: var(--a-border-radius-medium);
    text-decoration: none;
    color: var(--a-color-on-surface);
    transition: all 0.2s ease;
}

.docs-nav a:hover {
    background: var(--a-color-primary);
    color: var(--a-color-on-primary);
    text-decoration: none;
}
