/*
 * ACP design tokens — the single source of truth for color, spacing, typography, and radii.
 *
 * NO other stylesheet in the app may declare literal color hex values. Reference these variables
 * only, so a theme swap is a single-file change. Component classes live in acp-components.css;
 * Telerik k-* overrides live in acp-telerik.css.
 *
 * Palette is "Precinct" — cool professional with a teal primary and semantic critical/warn/good.
 * See the mockup at claude.ai/code/artifact/885c9787-8b7a-444e-8d04-22b0d94f3f95.
 */

:root {
    /* --- surfaces (light) --- */
    --acp-bg:         #F5F6F8;   /* page background */
    --acp-card:       #FFFFFF;   /* card surface, dialog surface */
    --acp-surface:    #EEF0F3;   /* subtle tinted surface — chip bg, input bg, hover */

    /* --- text --- */
    --acp-ink:        #0F1424;   /* primary body text, headings */
    --acp-ink-2:      #2B3141;   /* strong secondary — labels-with-value */
    --acp-muted:      #6B7085;   /* muted labels, captions, subtitles */
    --acp-muted-2:    #97A0B0;   /* placeholder, "not set" (—) */

    /* --- lines --- */
    --acp-line:       #E1E4EA;   /* default hairline */
    --acp-line-2:     #C7CBD4;   /* stronger — input borders, dividers with emphasis */

    /* --- signature: emerald green (single hue that means "primary action / in progress") --- */
    --acp-primary:      #059669;   /* emerald-600 */
    --acp-primary-2:    #047857;   /* hover / pressed (emerald-700) */
    --acp-primary-soft: #D1FAE5;   /* pill background, subtle badge (emerald-100) */
    --acp-primary-on:   #FFFFFF;   /* text on solid primary */

    /* --- semantics — used ONLY for status/severity, never decoratively --- */
    --acp-critical:      #B03A48;
    --acp-critical-soft: #FBDDDF;
    --acp-warn:          #B45309;
    --acp-warn-soft:     #FBEACC;
    --acp-info:          #2C5FA8;
    --acp-info-soft:     #DDE7F5;
    --acp-good:          #14824B;
    --acp-good-soft:     #D6EEDF;

    /* --- typography --- */
    --acp-font-sans:  'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --acp-font-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

    /* type scale */
    --acp-fs-11:      11px;   /* eyebrow labels, timestamps */
    --acp-fs-12:      12px;   /* card sub, body-secondary */
    --acp-fs-13:      13.5px; /* body */
    --acp-fs-14:      14.5px; /* body strong */
    --acp-fs-16:      16px;   /* section title */
    --acp-fs-18:      18px;   /* card title */
    --acp-fs-22:      22px;   /* page title */
    --acp-fs-28:      28px;   /* hero */

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

    /* --- radii --- */
    --acp-radius-sm:  4px;
    --acp-radius:     6px;
    --acp-radius-lg:  8px;
    --acp-radius-xl:  12px;

    /* --- z-index scale --- */
    --acp-z-sticky:   10;
    --acp-z-topbar:   50;
    --acp-z-dialog:   100;

    /* --- shell layout constants (referenced by AcpAppShell) --- */
    --acp-topbar-h:      52px;
    --acp-sidebar-w:     220px;
    --acp-list-rail-w:   300px;
    /* Activity rail — was 320px; reduced 2026-09-04 so the tab content area gets
       more room (Contacts grid especially — carries 24 legacy columns). */
    --acp-activity-w:    220px;
}

/* --- dark mode --- */
:root:not([data-theme="light"]) {
    @media (prefers-color-scheme: dark) {
        --acp-bg:      #0E1218;
        --acp-card:    #171B24;
        --acp-surface: #1F242F;

        --acp-ink:     #EEF0F4;
        --acp-ink-2:   #C6C9D3;
        --acp-muted:   #7C8194;
        --acp-muted-2: #5A5F72;

        --acp-line:    #262B36;
        --acp-line-2:  #363C4A;

        --acp-primary:      #5EBFB7;
        --acp-primary-2:    #82D0C7;
        --acp-primary-soft: #143430;
        --acp-primary-on:   #0E1218;

        --acp-critical-soft: #34161B;
        --acp-warn-soft:     #2E210B;
        --acp-info-soft:     #10233F;
        --acp-good-soft:     #10281B;
    }
}
:root[data-theme="dark"] {
    --acp-bg:      #0E1218;
    --acp-card:    #171B24;
    --acp-surface: #1F242F;

    --acp-ink:     #EEF0F4;
    --acp-ink-2:   #C6C9D3;
    --acp-muted:   #7C8194;
    --acp-muted-2: #5A5F72;

    --acp-line:    #262B36;
    --acp-line-2:  #363C4A;

    --acp-primary:      #5EBFB7;
    --acp-primary-2:    #82D0C7;
    --acp-primary-soft: #143430;
    --acp-primary-on:   #0E1218;

    --acp-critical-soft: #34161B;
    --acp-warn-soft:     #2E210B;
    --acp-info-soft:     #10233F;
    --acp-good-soft:     #10281B;
}