/* Design System — CSS variables, base typography, body/page resets */

:root {
    /* Colors */
    --color-text: #0f172a;
    --color-text-secondary: #64748b;
    --color-text-muted: #94a3b8;
    --color-bg: #f8fafc;
    --color-surface: #ffffff;
    --color-border: #e2e8f0;
    --color-border-light: #f1f5f9;
    --color-primary: #6366f1;
    --color-primary-hover: #4f46e5;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-danger: #ef4444;

    /* Typography */
    --font-stack: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base: 14px;
    --font-size-title: 24px;
    --font-size-section: 16px;
    --font-size-caption: 12px;
    --font-size-badge: 10px;

    /* Spacing & Radius */
    --radius-card: 10px;
    --radius-input: 6px;
    --radius-btn: 6px;
    --radius-badge: 99px;
    --padding-card: 20px;
    --padding-page: 24px;
    --gap-section: 16px;
}

/* Base resets */
html {
    font-size: var(--font-size-base);
}

body {
    font-family: var(--font-stack);
    background-color: var(--color-bg);
    color: var(--color-text);
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* Page title */
.page-title {
    font-size: var(--font-size-title);
    font-weight: 600;
    color: var(--color-text);
    margin: 0;
}

/* Page subtitle */
.page-subtitle {
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
    margin: 0;
}

/* Section heading */
.section-heading {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 12px;
}

/* Caption/label */
.field-label {
    font-size: var(--font-size-caption);
    font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

/* Main content flex grow for sticky footer */
.page-wrapper {
    flex: 1;
}

/* Page content container — uses Bootstrap container-fluid for proper responsive width */
.page-content {
    padding-top: var(--padding-page);
    padding-bottom: var(--padding-page);
    padding-left: 40px;
    padding-right: 40px;
}

@media (max-width: 768px) {
    .page-content {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Color utilities */
.text-secondary-ds { color: var(--color-text-secondary); }
.text-danger-ds { color: var(--color-danger); }
.text-primary-ds { color: var(--color-primary); }

/* Font-size utilities */
.text-sm-ds { font-size: 13px; }
.text-xs-ds { font-size: 12px; }

/* Link styling */
a {
    color: var(--color-primary);
    text-decoration: none;
}

a:hover {
    color: var(--color-primary-hover);
}