/* =========================================================================
   Smart Intake System — Design tokens (Phase 3.6)
   Single source of truth for brand colors, glass, spacing, type.
   ========================================================================= */

:root {
    /* Brand ramp (icy blue → navy) */
    --surface-base:  #e8eef1;
    --surface-1:     #bfdff1;
    --surface-2:     #abd7f1;
    --accent-soft:   #96cff1;
    --accent:        #6dc0f1;
    --accent-strong: #43b0f1;
    --primary:       #057dcd;
    --ink:           #1e3d58;
    /* Secondary copy on light / glass surfaces — §8.5.d.4 contrast (AA body text) */
    --text-secondary: #2d4660;
    --text-tertiary:  #3d566d;

    /* Status — icy / desaturated */
    --success:       #8ec9b1;
    --warning:       #e0c59a;
    --danger:        #d49a9a;
    --success-ink:   #3e8a6b;
    --warning-ink:   #a07a36;
    --danger-ink:    #9d4a4a;

    /* Glassmorphism */
    --glass-bg:      rgba(232, 238, 241, 0.55);
    --glass-bg-dark: rgba(30, 61, 88, 0.45);
    --glass-border:  rgba(255, 255, 255, 0.40);
    --glass-shadow:  0 8px 32px rgba(30, 61, 88, 0.12);
    --glass-blur:    16px;

    /* Spacing scale */
    --space-1:  4px;
    --space-2:  8px;
    --space-3:  12px;
    --space-4:  16px;
    --space-5:  24px;
    --space-6:  32px;
    --space-7:  48px;

    /* Radius */
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 20px;

    /* Type */
    --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --fs-base: 14px;
    --fs-md:   15px;
    --fs-lg:   16px;
    --fs-xl:   20px;
    --fs-2xl:  28px;
    --fs-3xl:  40px;

    /* Shadow */
    --shadow-sm: 0 1px 2px rgba(30, 61, 88, 0.08);
    --shadow-md: 0 4px 12px rgba(30, 61, 88, 0.10);

    /* Gerente / task workspace (§8.5.d) — distinct columns without heavy chrome */
    --gerente-accent: #0a6b8c;
    --gerente-rail-width: 280px;
    --gerente-center-min: 280px;
    --gerente-info-width: 300px;
    /* Narrow strip when Info panel is collapsed (toggle only) */
    --gerente-info-collapsed-width: 44px;
    --surface-gerente-rail: rgba(245, 249, 252, 0.92);
    --surface-gerente-canvas: rgba(252, 254, 255, 0.95);
    --surface-gerente-panel: rgba(238, 245, 250, 0.88);
}

@media (min-width: 900px) {
    :root {
        --fs-base: 14px;
    }
}

@media (max-width: 899px) {
    :root {
        --fs-base: 16px;
    }
}