/* darkmode.css — Dark theme custom properties, overrides lightmode.css defaults */

:root {
    --color-text-base:                #c7c3b9;
    --color-text-inverted:            #2a2824;
    --color-text-soft:                #908d83;
    --color-text-verysoft:            #615f58;
    --color-text-codebox:             #c7c3b9;
    --color-comment:                  #feed93;
    --color-citation-tooltip:         #2a2926;
    --color-highlight:                #cbc6bd;
    --color-accent:                   #ffae00;
    --color-delete:                   #f00;
    --color-background:               #262624;
    --color-background-boxes:         #30302e;

    /* Warm-grey surface ramp — Claude.ai's dark neutrals. As on claude.ai, the
       sidebar/menubar chrome (--surface) is darker than the content area, with
       cards raised lighter on top. (tweakcn "Claude" dark tokens, oklch→hex.) */
    --surface:                        #1f1e1d;   /* chrome: sidebar, menubar       */
    --surface-card:                   #2a2a28;   /* panel cards (raised)           */
    --surface-sunken:                 #353531;   /* inset controls, hover, active  */
    --border:                         #3e3e38;   /* hairline                       */
    --border-strong:                  #52514a;   /* stronger edge                  */

    --color-background-panels:        #252320;
    --color-background-documentview:  #151311;
    --color-background-imagecards:    #6a655c;
    --color-background-chatbox:       #322f2a;
    --color-background-codebox:       #181613;
    --color-background-tablezebra:    #262420;
    --color-mark:                     #005f73;
    --color-error-text:               #ff6b6b;
    --color-success-text:             #4caf50;
    --color-success-background:       #1a3a1f;
    --color-success-border:           #2d5a33;
    --color-error-background:         #3a1f1f;
    --color-error-border:             #5a2f2f;
    --color-shadow:                   rgba(1, 1, 1, 0.1);
    --color-shadow-hover:             rgba(1, 1, 1, 0.25);
    --color-chart-background:         #242424;
    --color-chart-bar-color:          #e0e0e0;
    --color-chart-bar-hover-color:    #f0f0f0;
    --color-chart-tooltip-bg:         #ccc;
    --color-chart-tooltip-border:     #eee;
    --color-chart-tooltip-text:       #333;
    --color-chart-grid-color:         #444;
    --color-chart-axis-color:         #888;
    --color-chart-label-color:        #e0e0e0;
    --color-stickynote-color-01:      #f2be5c;
    --color-stickynote-color-02:      #79bf65;
    --color-stickynote-color-03:      #6bbef2;
    --color-stickynote-color-04:      #c189d9;
    --color-stickynote-color-05:      #f25c93;
    --color-stickynote-text:          #333;
    --color-audio-background:         #333;
    --color-audio-background-02:      #444;
    --color-audio-button:             #555;
    --color-audio-button-hover:       #666;
    --color-audio-play:               #bbb;
    --color-audio-playing:            #ff3b30;
    --color-audio-pause:              #ff9500;
    --color-audio-stop:               #34c759;
    --color-audio-record:             #ff3b30;
    --color-audio-waveform-container: #121212;
    --color-audio-waveform:           #777;
    --color-audio-waveform-paused:    #ff9500;
    --color-audio-waveform-recording: #ff3b30;
}