/* ============================================================
   Coral — Design Tokens / CSS Custom Properties
   ============================================================
   Theme is controlled via data-theme attribute on <html>.
   Values: "dark" (default), "light".
   The "system" option is handled in JS by mapping to dark/light.
   ============================================================ */

/* ── Dark Theme (default) ──────────────────────────────────── */

:root,
[data-theme="dark"] {
    /* Surface / Background — deep warm black */
    --bg-primary:   #111114;
    --bg-secondary: #18181c;
    --bg-tertiary:  #212126;
    --bg-hover:     #2a2a30;
    --bg-elevated:  #1e1e24;

    /* Borders */
    --border:       #2e2e36;
    --border-light: #3a3a42;

    /* Text */
    --text-primary:   #f0f0f2;
    --text-secondary: #a0a0a8;
    --text-muted:     #626268;

    /* Accent / Brand */
    --accent:     #58a6ff;
    --accent-dim: #1f6feb;
    --accent-rgb: 88, 166, 255;

    /* Semantic Status */
    --success:     #4aba60;
    --success-rgb: 74, 186, 96;
    --warning:     #d4a030;
    --warning-rgb: 212, 160, 48;
    --error:       #e05545;
    --error-rgb:   224, 85, 69;
    --danger:      var(--error); /* alias: several rules (stuck dot, tooltips) use this name */

    /* Aliases for names older rules use. Declared once here: they follow whichever theme sets
       the underlying token, because the substitution happens on the same root element. */
    --accent-primary: var(--accent);
    --accent-color:   var(--accent);
    --border-color:   var(--border);
    --error-color:    var(--error);
    --status-error:   var(--error);
    --status-warning: var(--warning);
    --fg:             var(--text-primary);
    --fg-muted:       var(--text-muted);
    --working:     #61afef;
    --working-rgb: 97, 175, 239;

    /* Agent rail (collapsed sidebar) */
    --rail-tile-bg:            #0b0b0e;
    --rail-tile-bg-hover:      #1a1a20;
    --rail-tile-border:        #2e2e36;
    --rail-tile-text:          #ffffff;
    --rail-tile-active-bg:     #1a1a20;
    --rail-tile-active-border: #ffffff;
    --rail-chip-text:          #14141a;
    --rail-badge-unread:       #e5484d;
    --rail-badge-done:         #30a46c;
    --rail-badge-text:         #ffffff;

    /* Agent Badges */
    --badge-claude: #7c3aed;
    --badge-agy: #2563eb;
    --badge-gemini: #2563eb;
    --badge-codex: #10a37f;

    /* Shadows */
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.4);

    /* Typography */
    --font-sans:  'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --font-mono:  'SF Mono', 'Fira Code', 'Cascadia Code', monospace;

    /* Syntax Highlighting — warm palette */
    --sh-keyword:   #e06c75;
    --sh-string:    #98c379;
    --sh-comment:   #7f848e;
    --sh-number:    #d19a66;
    --sh-builtin:   #e5c07b;
    --sh-decorator: #c678dd;

    /* Diff */
    --diff-add-bg:    rgba(74, 186, 96, 0.15);
    --diff-add-color: #4aba60;
    --diff-del-bg:    rgba(224, 85, 69, 0.15);
    --diff-del-color: #e05545;

    /* Tool / Event Colors */
    --color-tool-read:       var(--accent);
    --color-tool-write:      var(--success);
    --color-tool-edit:       var(--warning);
    --color-tool-bash:       #c678dd;
    --color-tool-grep:       #61afef;
    --color-tool-web:        #e5c07b;
    --color-tool-task:       var(--accent);
    --color-tool-agent:      #c678dd;
    --subagent-accent:       #a371f7;
    --color-tool-status:     var(--accent);
    --color-tool-goal:       var(--success);
    --color-tool-confidence: #e5c07b;
    --color-tool-stop:       var(--error);
    --color-tool-pulse:      #c678dd;
    --color-tool-thinking:   #56b6c2;
    --color-tool-default:    var(--text-muted);

    /* Design Tokens — Spacing Scale */
    --space-xs:  4px;
    --space-sm:  6px;
    --space-md:  8px;
    --space-lg:  12px;
    --space-xl:  16px;
    --space-2xl: 24px;

    /* Design Tokens — Border Radius Scale */
    --radius-xs:  2px;
    --radius-sm:  4px;
    --radius-md:  6px;
    --radius-lg:  8px;
    --radius-xl:  12px;
    --radius-2xl: 16px;

    /* Design Tokens — Font Size Scale */
    --fs-xs:   10px;
    --fs-sm:   11px;
    --fs-base: 12px;
    --fs-md:   13px;
    --fs-lg:   14px;
    --fs-xl:   16px;

    /* Shared UI roles. User themes may override the prose family and size. */
    --type-page-size: 20px;
    --control-height: 36px;
    --control-compact-height: 32px;
    --control-touch-height: 44px;
    --icon-size: 18px;
    --icon-inline-size: 16px;
    --chat-prose-font: var(--font-sans);
    --chat-prose-size: var(--fs-lg);

    /* Accent variants */
    --accent-light: #79c0ff;
    --accent-secondary: color-mix(in srgb, var(--accent) 55%, white);
    --terminal-name-color: #b8b8be;
    --text-on-accent: #fff;

    /* Modal backdrop */
    --modal-backdrop: rgba(0, 0, 0, 0.6);

    /* Chat */
    --chat-human-bg:      color-mix(in srgb, var(--accent) 12%, var(--bg-tertiary));
    --chat-prose-inline-code: #e5931f;
    --chat-human-color:   var(--text-primary);
    --chat-assistant-bg:  var(--bg-tertiary);
    --board-msg-bg:       transparent;

    /* Chat / markdown specifics */
    --code-inline-bg:  rgba(255, 255, 255, 0.07);
    --code-block-bg:   rgba(0, 0, 0, 0.3);
    --table-header-bg: rgba(0, 0, 0, 0.2);

    /* Capture blocks */
    --capture-text-bg:   rgba(140, 140, 148, 0.06);
    --capture-tool-bg:   rgba(88, 166, 255, 0.05);
    --capture-user-bg:   rgba(198, 120, 221, 0.08);
    --capture-pulse-bg:  rgba(74, 186, 96, 0.08);
    --capture-code-bg:   rgba(140, 140, 148, 0.1);
    --capture-user-color: #c678dd;

    /* Top bar */
    --topbar-bg: rgba(17, 17, 20, 0.92);
    --topbar-border: rgba(46, 46, 54, 0.6);

    /* Terminal (xterm) */
    --xterm-background:          #111114;
    --xterm-foreground:          #f0f0f2;
    --xterm-cursor:              #f0f0f2;
    --xterm-selection-background:#4a4a56;
    --xterm-black:               #5a5a62;
    --xterm-red:                 #e05545;
    --xterm-green:               #4aba60;
    --xterm-yellow:              #d4a030;
    --xterm-blue:                #61afef;
    --xterm-magenta:             #c678dd;
    --xterm-cyan:                #56b6c2;
    --xterm-white:               #f0f0f2;
    --xterm-bright-black:        #7f848e;
    --xterm-bright-red:          #e88070;
    --xterm-bright-green:        #6ccc7c;
    --xterm-bright-yellow:       #e5c07b;
    --xterm-bright-blue:         #7ec0f0;
    --xterm-bright-magenta:      #d2a0ee;
    --xterm-bright-cyan:         #73ccd4;
    --xterm-bright-white:        #f0f0f2;

    /* Message Board */
    --mb-bg:          #18181c;
    --mb-text:        #e0e0e0;
    --mb-text-bright: #f0f0f0;
    --mb-heading:     #79c0ff;
    --mb-code-bg:     #111114;
    --board-msg-bg:   transparent;
}

/* ── Light Theme ───────────────────────────────────────────── */

[data-theme="light"] {
    /* Surface / Background — warm off-white, not pure white */
    --bg-primary:   #f4f5f7;
    --bg-secondary: #ecedf0;
    --bg-tertiary:  #e2e4e8;
    --bg-hover:     #d8dbe0;
    --bg-elevated:  #e8eaed;

    /* Borders */
    --border:       #c9cdd3;
    --border-light: #b0b6be;

    /* Text */
    --text-primary:   #1f2328;
    --text-secondary: #59636e;
    --text-muted:     #8b949e;

    /* Accent / Brand */
    --accent:     #0969da;
    --accent-dim: #0550ae;
    --accent-rgb: 9, 105, 218;

    /* Semantic Status */
    --success:     #1a7f37;
    --success-rgb: 26, 127, 55;
    --warning:     #9a6700;
    --warning-rgb: 154, 103, 0;
    --error:       #cf222e;
    --error-rgb:   207, 34, 46;
    --danger:      var(--error);
    --working:     #0969da;
    --working-rgb: 9, 105, 218;

    /* Agent rail (collapsed sidebar) */
    --rail-tile-bg:            #ffffff;
    --rail-tile-bg-hover:      #eceef1;
    --rail-tile-border:        #c9cdd3;
    --rail-tile-text:          #1f2328;
    --rail-tile-active-bg:     #e2e4e8;
    --rail-tile-active-border: #1f2328;
    --rail-chip-text:          #14141a;
    --rail-badge-unread:       #cf222e;
    --rail-badge-done:         #1a7f37;
    --rail-badge-text:         #ffffff;

    /* Agent Badges */
    --badge-claude: #7c3aed;
    --badge-agy: #2563eb;
    --badge-gemini: #2563eb;
    --badge-codex: #10a37f;

    /* Shadows */
    --shadow-md: 0 4px 16px rgba(31, 35, 40, 0.12);
    --shadow-lg: 0 8px 32px rgba(31, 35, 40, 0.16);

    /* Syntax Highlighting */
    --sh-keyword:   #cf222e;
    --sh-string:    #0a3069;
    --sh-comment:   #6e7781;
    --sh-number:    #0550ae;
    --sh-builtin:   #953800;
    --sh-decorator: #8250df;

    /* Diff */
    --diff-add-bg:    rgba(26, 127, 55, 0.12);
    --diff-add-color: #1a7f37;
    --diff-del-bg:    rgba(207, 34, 46, 0.12);
    --diff-del-color: #cf222e;

    /* Tool / Event Colors */
    --color-tool-read:       #0969da;
    --color-tool-write:      #1a7f37;
    --color-tool-edit:       #9a6700;
    --color-tool-bash:       #8250df;
    --color-tool-grep:       #0550ae;
    --color-tool-web:        #953800;
    --color-tool-task:       #0969da;
    --color-tool-agent:      #8250df;
    --subagent-accent:       #8250df;
    --color-tool-status:     #0969da;
    --color-tool-goal:       #1a7f37;
    --color-tool-confidence: #9a6700;
    --color-tool-stop:       #cf222e;
    --color-tool-pulse:      #8250df;
    --color-tool-thinking:   #1b7c83;
    --color-tool-default:    #8b949e;

    /* Accent variants */
    --accent-light: #0550ae;
    --accent-secondary: color-mix(in srgb, var(--accent) 75%, black);
    --terminal-name-color: #6e7781;
    --text-on-accent: #fff;

    /* Modal backdrop */
    --modal-backdrop: rgba(31, 35, 40, 0.4);

    /* Chat */
    --chat-human-bg:      #d4e4f7;
    --chat-prose-inline-code: #976012; /* #e5931f's hue, dark enough for 4.5:1 */
    --chat-human-color:   #1f2328;
    --chat-assistant-bg:  #f0f1f3;
    --board-msg-bg:       transparent;

    /* Chat / markdown specifics */
    --code-inline-bg:  rgba(31, 35, 40, 0.07);
    --code-block-bg:   #e2e4e8;
    --table-header-bg: #e2e4e8;

    /* Capture blocks */
    --capture-text-bg:   rgba(89, 99, 110, 0.06);
    --capture-tool-bg:   rgba(9, 105, 218, 0.06);
    --capture-user-bg:   rgba(130, 80, 223, 0.08);
    --capture-pulse-bg:  rgba(26, 127, 55, 0.06);
    --capture-code-bg:   rgba(89, 99, 110, 0.08);
    --capture-user-color: #8250df;

    /* Top bar */
    --topbar-bg: rgba(236, 237, 240, 0.92);
    --topbar-border: rgba(201, 205, 211, 0.8);

    /* Terminal (xterm) */
    --xterm-background:          #c8ccd2;
    --xterm-foreground:          #1f2328;
    --xterm-cursor:              #1f2328;
    --xterm-selection-background:#a8c8f0;
    --xterm-black:               #1f2328;
    --xterm-red:                 #cf222e;
    --xterm-green:               #1a7f37;
    --xterm-yellow:              #9a6700;
    --xterm-blue:                #0969da;
    --xterm-magenta:             #8250df;
    --xterm-cyan:                #1b7c83;
    --xterm-white:               #59636e;
    --xterm-bright-black:        #59636e;
    --xterm-bright-red:          #a40e26;
    --xterm-bright-green:        #116329;
    --xterm-bright-yellow:       #7c5600;
    --xterm-bright-blue:         #0550ae;
    --xterm-bright-magenta:      #6639ba;
    --xterm-bright-cyan:         #1b7c83;
    --xterm-bright-white:        #1f2328;

    /* Message Board */
    --mb-bg:          rgba(240, 240, 240, 0.6);
    --mb-text:        #333;
    --mb-text-bright: #1a1a1a;
    --mb-heading:     #2e7d9c;
    --mb-code-bg:     #e8e8e8;
    --board-msg-bg:   transparent;
}