/* kAI brand tokens -- replace this file (and theme.py) to rebrand for a different agent */

:root {
  /* Brand */
  --accent:          #bd9476;
  --accent-rgb:      189, 148, 118;
  --accent-hover:    #a07458;
  --accent-soft:     #a89080;
  --accent-soft-rgb: 168, 144, 128;
  --accent-glow-rgb: 189, 148, 118;
  --accent-bg:       #f5ede6;
  --text-brand:      #2c3e50;

  /* Structural surfaces */
  --bg-page:    #f8f9fa;
  --bg-card:    #e8e8e8;
  --bg-surface: #ffffff;
  --bg-deep:    #f0f0f0;
  --bg-hover:   #e0e0e0;
  --code-bg:    #f5f5f5;
  --overlay-bg: rgba(0,0,0,0.45);
  --glass-bg:   transparent;

  /* Borders & text */
  --border-ui:        #dddddd;
  --border-strong:    #bbbbbb;
  --text-muted:       #666666;
  --text-subtle:      #999999;
  --text-placeholder: #aab0bc;
  --notice-bg:        #cfcfcf;   /* What's New strip */

  /* Semantic -- danger */
  --danger:          #c0392b;
  --danger-dk:       #96281b;
  --danger-soft:     #ffb3b3;
  --danger-bg:       #fef0f0;
  --danger-bg-hover: #fad7d7;

  /* Semantic -- highlight */
  --highlight-bg:   #ffe566;
  --highlight-text: #1a1a1a;

  /* Structural tints (opacity-based, adapt to any brand color) */
  --spinner-tint: rgba(255,255,255,0.30);
  --on-accent:    #ffffff;

  /* Sidebar tints over --accent: light sidebar -> hover darkens */
  --sb-text:       rgba(255,255,255,0.90);
  --sb-text-muted: rgba(255,255,255,0.50);
  --sb-line:       rgba(255,255,255,0.25);
  --sb-hover:      rgba(0,0,0,0.08);
  --sb-sunken:     rgba(0,0,0,0.16);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    /* Brand */
    --accent:          #504035;
    --accent-rgb:      80, 64, 53;
    --accent-hover:    #5e4d40;
    --accent-soft:     #5c4f48;
    --accent-soft-rgb: 92, 79, 72;
    --accent-glow-rgb: 189, 148, 118;
    --accent-bg:       #2c2724;
    --text-brand:      #c8c8c8;

    /* Structural surfaces */
    --bg-page:    #1a1a1a;
    --bg-card:    #262626;
    --bg-surface: #2e2e2e;
    --bg-deep:    #202020;
    --bg-hover:   #333333;
    --code-bg:    #2a2a2a;
    --overlay-bg: rgba(0,0,0,0.65);
    --glass-bg:   rgba(255,255,255,0.09);

    /* Borders & text */
    --border-ui:        #3a3a3a;
    --border-strong:    #505050;
    --text-muted:       #888888;
    --text-subtle:      #a0a0a0;
    --text-placeholder: #555555;
    --notice-bg:        #505050;

    /* Semantic -- danger */
    --danger:          #7a2a22;
    --danger-dk:       #8f3229;
    --danger-soft:     #e07878;
    --danger-bg:       #2a1818;
    --danger-bg-hover: #3d1a1a;

    /* Semantic -- highlight */
    --highlight-bg:   rgba(255,200,0,0.25);
    --highlight-text: #ffd060;

    /* Structural tints */
    --spinner-tint: rgba(255,255,255,0.30);
    --on-accent:    rgba(255,255,255,0.88);

    /* Sidebar tints over --accent: dark sidebar -> hover lightens */
    --sb-text:       rgba(255,255,255,0.62);
    --sb-text-muted: rgba(255,255,255,0.40);
    --sb-line:       rgba(255,255,255,0.15);
    --sb-hover:      rgba(255,255,255,0.08);
    --sb-sunken:     rgba(0,0,0,0.22);
  }
}

:root[data-theme="dark"] {
  /* Brand */
  --accent:          #504035;
  --accent-rgb:      80, 64, 53;
  --accent-hover:    #5e4d40;
  --accent-soft:     #5c4f48;
  --accent-soft-rgb: 92, 79, 72;
  --accent-glow-rgb: 189, 148, 118;
  --accent-bg:       #2c2724;
  --text-brand:      #c8c8c8;

  /* Structural surfaces */
  --bg-page:    #1a1a1a;
  --bg-card:    #262626;
  --bg-surface: #2e2e2e;
  --bg-deep:    #202020;
  --bg-hover:   #333333;
  --code-bg:    #2a2a2a;
  --overlay-bg: rgba(0,0,0,0.65);
  --glass-bg:   rgba(255,255,255,0.09);

  /* Borders & text */
  --border-ui:        #3a3a3a;
  --border-strong:    #505050;
  --text-muted:       #888888;
  --text-subtle:      #a0a0a0;
  --text-placeholder: #555555;
  --notice-bg:        #505050;

  /* Semantic -- danger */
  --danger:          #7a2a22;
  --danger-dk:       #8f3229;
  --danger-soft:     #e07878;
  --danger-bg:       #2a1818;
  --danger-bg-hover: #3d1a1a;

  /* Semantic -- highlight */
  --highlight-bg:   rgba(255,200,0,0.25);
  --highlight-text: #ffd060;

  /* Structural tints */
  --spinner-tint: rgba(255,255,255,0.30);
  --on-accent:    rgba(255,255,255,0.88);

  /* Sidebar tints over --accent: dark sidebar -> hover lightens */
  --sb-text:       rgba(255,255,255,0.62);
  --sb-text-muted: rgba(255,255,255,0.40);
  --sb-line:       rgba(255,255,255,0.15);
  --sb-hover:      rgba(255,255,255,0.08);
  --sb-sunken:     rgba(0,0,0,0.22);
}