/* cc-proxy / theme.css
   Color tokens for wirezatUI. Accent: cyan (matches the CC client).
   Surface style: flat (bg = bg-page = bg-card — borders carry hierarchy).
   Load after: /static/ui/index.css
*/

:root {
    /* Accent — cyan */
    --accent:           #0e7490;
    --accent-dark:      #155e75;
    --accent-text:      #ecfeff;
    --accent-muted:     #cffafe;

    /* Text */
    --text:             #14201f;
    --text-muted:       #5d6b6a;
    --text-faint:       #9aa6a5;

    /* Borders */
    --border:           rgba(0, 0, 0, 0.12);
    --border-strong:    rgba(0, 0, 0, 0.22);

    /* Surfaces — flat style */
    --bg:               #f2f4f4;
    --bg-page:          #f2f4f4;
    --bg-card:          #f2f4f4;
    --bg-hover:         #e7eaea;

    /* Semantic */
    --danger:           #c0392b;
    --danger-muted:     #fdf0ee;
    --success:          #2e7d32;
    --success-muted:    #f0f7f0;
    --warn:             #d97706;
    --warn-muted:       #fef3c7;

    /* Config-Container (accent tint) */
    --config-bg:        #cffafe;
    --config-border:    color-mix(in srgb, var(--accent) 22%, transparent);
    --config-header-bg: color-mix(in srgb, var(--accent) 6%, transparent);
}

html.dark {
    /* Accent — cyan (lighter for dark backgrounds) */
    --accent:           #22d3ee;
    --accent-dark:      #06b6d4;
    --accent-text:      #04181c;
    --accent-muted:     #06222a;

    /* Text */
    --text:             #e6efee;
    --text-muted:       #8f9d9c;
    --text-faint:       #56625f;

    /* Borders */
    --border:           rgba(255, 255, 255, 0.08);
    --border-strong:    rgba(255, 255, 255, 0.16);

    /* Surfaces */
    --bg:               #0c1110;
    --bg-page:          #0c1110;
    --bg-card:          #0c1110;
    --bg-hover:         #18201f;

    /* Semantic */
    --danger:           #e57373;
    --danger-muted:     #2a1010;
    --success:          #81c784;
    --success-muted:    #0f2010;
    --warn:             #fbbf24;
    --warn-muted:       #1c1500;

    /* Config-Container (accent tint) */
    --config-bg:        #06222a;
    --config-border:    color-mix(in srgb, var(--accent) 22%, transparent);
    --config-header-bg: color-mix(in srgb, var(--accent) 8%, transparent);
}

/* ── Status messages ─────────────────────────────────────────────────────── */
.status-msg { font-size: var(--text-sm); font-weight: var(--weight-medium); padding: var(--gap-inline) var(--gap-field); border-radius: var(--radius); display: none; }
.status-msg.ok   { background: var(--success-muted); color: var(--success); display: inline-flex; }
.status-msg.err  { background: var(--danger-muted);  color: var(--danger);  display: inline-flex; }
.status-msg.warn { background: var(--warn-muted);    color: var(--warn);    display: inline-flex; }