/* ══════════════════════════════════════════════════════════════
   SurveyMob Admin — Design Tokens
   CSS Custom Properties for consistent theming & maintainability.
   ══════════════════════════════════════════════════════════════ */

:root {
    /* ── Typography ── */
    --smob-font-family: 'Spoqa Han Sans Neo', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    --smob-font-mono: 'Roboto Mono', 'Consolas', monospace;

    --smob-font-size-2xs:  9px;
    --smob-font-size-xs:  11px;
    --smob-font-size-sm:  12px;
    --smob-font-size-md:  13px;
    --smob-font-size-base: 14px;
    --smob-font-size-lg:  15px;
    --smob-font-size-xl:  16px;
    --smob-font-size-2xl: 18px;
    --smob-font-size-3xl: 22px;

    --smob-font-weight-normal: 400;
    --smob-font-weight-medium: 500;
    --smob-font-weight-semibold: 600;
    --smob-font-weight-bold: 700;

    /* ── Layout Dimensions ── */
    --smob-header-height: 60px;
    --smob-sidebar-width: 210px;
    --smob-tab-bar-height: 48px;
    --smob-tab-height: 36px;
    --smob-sidebar-search-height: 32px;

    /* ── Spacing Scale ── */
    --smob-space-1:  2px;
    --smob-space-2:  4px;
    --smob-space-3:  6px;
    --smob-space-4:  8px;
    --smob-space-5: 10px;
    --smob-space-6: 12px;
    --smob-space-7: 14px;
    --smob-space-8: 16px;
    --smob-space-9: 18px;
    --smob-space-10: 20px;
    --smob-space-12: 24px;
    --smob-space-16: 32px;

    /* ── Border Radii ── */
    --smob-radius-none: 0;
    --smob-radius-sm:  3px;
    --smob-radius-md:  4px;
    --smob-radius-lg:  6px;
    --smob-radius-xl: 12px;

    /* ── Colors — Page Background ── */
    --smob-color-page-bg: #f1f2f7;

    /* ── Colors — Header ── */
    --smob-color-header-bg: #ffffff;
    --smob-color-header-border: #f1f2f7;
    --smob-color-header-toggle: #7087a3;
    --smob-color-header-text: #6a6a6a;
    --smob-color-header-icon: #6f6f6f;

    /* ── Colors — Sidebar ── */
    --smob-color-sidebar-bg: #2f4050;
    --smob-color-sidebar-text: #aeb2b7;
    --smob-color-sidebar-active-bg: #35495d;
    --smob-color-sidebar-search-bg: #2d3e50;
    --smob-color-sidebar-search-border: #475a6d;

    /* ── Colors — Tab Bar (Survey Context Tabs) ── */
    --smob-color-tab-bar-bg: #7087a3;
    --smob-color-tab-text: rgba(255, 255, 255, 0.95);
    --smob-color-tab-active-bg: #ffffff;
    --smob-color-tab-active-text: #7087a3;
    --smob-color-tab-hover-bg: rgba(255, 255, 255, 0.18);

    /* ── Colors — Primary Actions ── */
    --smob-color-primary: #7087a3;
    --smob-color-primary-action: #7087a3;
    --smob-color-primary-action-hover: #5d738f;
    --smob-color-success-action: #78cd51;
    --smob-color-danger: #ff6c60;
    --smob-color-danger-text: #d9534f;

    /* ── Colors — Text ── */
    --smob-color-text-primary: #404347;
    --smob-color-text-secondary: #555555;
    --smob-color-text-muted: #777777;
    --smob-color-text-dim: #999999;
    --smob-color-text-link: #337ab7;

    /* ── Colors — Borders ── */
    --smob-color-border-default: #dddddd;
    --smob-color-border-subtle: #ececec;
    --smob-color-border-medium: #cccccc;
    --smob-color-border-heavy: #d7d7d7;
    --smob-color-border-focus: #7087a3;

    /* ── Colors — Surfaces ── */
    --smob-color-surface-white: #ffffff;
    --smob-color-surface-alt: #f5f5f5;
    --smob-color-surface-subtle: #f3f3f3;
    --smob-color-surface-hover: #eeeeee;
    --smob-color-surface-bg: #fafafa;
    --smob-color-surface-input: #ffffff;
    --smob-color-surface-dialog: #f5f5f5;

    /* ── Colors — Semantic Backgrounds ── */
    --smob-color-info-bg: #edf4fb;
    --smob-color-info-border: #b8d0e8;
    --smob-color-info-text: #44698c;
    --smob-color-success-bg: #eef7e9;
    --smob-color-success-border: #d7e8cf;
    --smob-color-success-text: #3a6e28;
    --smob-color-danger-bg: #fff3f1;
    --smob-color-danger-border: #e7c2bc;
    --smob-color-warning-bg: #f9f4de;
    --smob-color-warning-border: #e5d38a;
    --smob-color-warning-text: #8c6d1f;

    /* ── Colors — Table ── */
    --smob-color-table-header-bg: #f5f5f5;
    --smob-color-table-header-text: #404347;
    --smob-color-table-border: #dddddd;
    --smob-color-table-row-alt: #fafbfd;
    --smob-color-table-row-odd: #f9f9f9;

    /* ── Colors — Question Badge ── */
    --smob-color-badge-bg: #2f3f52;
    --smob-color-badge-text: #ffffff;

    /* ── Component Sizes ── */
    --smob-input-height-xs: 22px;
    --smob-input-height-sm: 26px;
    --smob-input-height-md: 28px;
    --smob-input-height-lg: 32px;
    --smob-input-height-xl: 36px;

    --smob-icon-button-xs: 22px;
    --smob-icon-button-sm: 24px;
    --smob-icon-button-md: 28px;

    /* ── Preview / Chart Sizes ── */
    --smob-preview-max-size: 200px;
    --smob-chart-height-sm: 280px;
    --smob-chart-height-md: 320px;

    /* ── Form Layout ── */
    --smob-form-label-width: 120px;
    --smob-form-max-width: 480px;
    --smob-field-min-height: 40px;

    /* ── Transitions ── */
    --smob-transition-fast: 0.15s ease;
    --smob-transition-normal: 0.2s ease;
}

/* ── Responsive: Sidebar width shrinks as viewport narrows ── */
@media (max-width: 1100px) {
    :root {
        --smob-sidebar-width: 185px;
    }
}

@media (max-width: 960px) {
    :root {
        --smob-sidebar-width: 160px;
    }
}