/* ============================================================
   CRM Theme — Global Design Tokens
   Brand color extracted from TELA logo (deep navy blue)
   ============================================================ */

:root {
    /* ── Brand Colors ── */
    --brand-primary:       #1B2B5E;   /* TELA deep navy — buttons, links, accents */
    --brand-primary-dark:  #142044;   /* hover / active state */
    --brand-primary-light: #E8ECF4;   /* tinted backgrounds, selected states */
    --brand-primary-rgb:   27, 43, 94;

    /* ── Neutral Palette ── */
    --color-bg:            #F0F2F5;   /* page background */
    --color-surface:       #FFFFFF;   /* card / panel background */
    --color-border:        #E2E5EC;   /* default border */
    --color-border-focus:  #1B2B5E;   /* focused input border */

    /* ── Typography ── */
    --color-text:          #1F2937;   /* primary body text */
    --color-text-muted:    #6B7280;   /* secondary / helper text */
    --color-label:         #374151;   /* form labels */
    --color-placeholder:   #9CA3AF;   /* input placeholders */
    --color-link:          #1B2B5E;
    --color-link-hover:    #142044;

    /* ── Input ── */
    --color-input-bg:      #F5F6FA;
    --color-input-border:  #E2E5EC;

    /* ── Shadows ── */
    --shadow-card:   0 4px 24px rgba(0, 0, 0, 0.08);
    --shadow-btn:    0 4px 12px rgba(27, 43, 94, 0.30);
    --shadow-btn-hover: 0 6px 18px rgba(27, 43, 94, 0.40);

    /* ── Radius ── */
    --radius-card:  12px;
    --radius-input:  8px;
    --radius-btn:    8px;

    /* ── Spacing ── */
    --spacing-xs:  4px;
    --spacing-sm:  8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 40px;

    /* ── Font ── */
    --font-base: 'Microsoft YaHei', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-size-sm:   13px;
    --font-size-base: 14px;
    --font-size-md:   16px;
    --font-size-lg:   20px;
    --font-size-xl:   24px;
}