/* The console's palette, layered over the app's tokens.css (loaded after it). The ONE place hex lives for the console,
   as tokens.css is for the app; console.css stays tokens-only.

   Built for an office manager who looks at it all day: no pure white field and no pure black text in light mode, no pure
   black field and no pure white text in dark mode. Body text sits near 14:1 (light) and 12:1 (dark) - comfortably past
   WCAG AAA without the 21:1 glare of black on white - and secondary text stays above the 4.5:1 AA floor on every surface
   it appears on (card, canvas and sidebar). Amber stays the accent, used for the one main action per screen.

   Three ways in, the same as the app: no data-theme attribute is System (follows the computer), and
   data-theme="light" / "dark" are the explicit choices. Every token set in the light block is set again in BOTH dark
   blocks, or dark mode would inherit a light value. */

:root {
    /* Desktop reading size: the app's 17px body is for a phone at arm's length; a desk display at 100% reads 14px
       comfortably and fits a full table without scrolling sideways. Theme-independent, so only here. */
    --console-text-body:    0.875rem;
    --console-sidebar-width: 15rem;
    --console-toolbar-height: 3.25rem;
    --console-content-max:  80rem;

    --color-bg:             #EFEDE7;   /* the window canvas */
    --console-sidebar:      #E6E3DB;
    --console-selection:    #DCD8CE;   /* the selected sidebar row */
    --color-surface:        #F8F7F3;
    --color-surface-muted:  #ECE9E2;
    --color-surface-hover:  #E9E6DE;
    --color-surface-active: #E1DDD3;
    --color-surface-sunken: #E6E3DB;
    --color-surface-raised: #FBFAF7;
    --color-card:           #F8F7F3;
    --color-card-raised:    #FBFAF7;
    --color-card-border:    #E4E0D7;
    --color-border:         #DDD8CD;
    --color-border-strong:  #C9C2B4;
    --color-text:           #2A261F;   /* ~14:1 on the card */
    --color-text-muted:     #625B4F;
    --color-text-subtle:    #645D51;   /* >= 5:1 on card, canvas and sidebar */
    --console-scrim:        rgba(42, 38, 31, .32);
}

:root[data-theme="dark"] {
    --color-bg:             #1A1917;
    --console-sidebar:      #161513;
    --console-selection:    #2F2D29;
    --color-surface:        #22211E;
    --color-surface-muted:  #26241F;
    --color-surface-hover:  #2A2824;
    --color-surface-active: #33302B;
    --color-surface-sunken: #151412;
    --color-surface-raised: #2A2925;
    --color-card:           #22211E;
    --color-card-raised:    #2A2925;
    --color-card-border:    #33312D;
    --color-border:         #353330;
    --color-border-strong:  #47443F;
    --color-text:           #E4E0D8;   /* ~12:1 on the card, never pure white */
    --color-text-muted:     #ABA597;
    --color-text-subtle:    #A29C8F;   /* ~5.9:1 on the card */
    --console-scrim:        rgba(0, 0, 0, .5);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
        --color-bg:             #1A1917;
        --console-sidebar:      #161513;
        --console-selection:    #2F2D29;
        --color-surface:        #22211E;
        --color-surface-muted:  #26241F;
        --color-surface-hover:  #2A2824;
        --color-surface-active: #33302B;
        --color-surface-sunken: #151412;
        --color-surface-raised: #2A2925;
        --color-card:           #22211E;
        --color-card-raised:    #2A2925;
        --color-card-border:    #33312D;
        --color-border:         #353330;
        --color-border-strong:  #47443F;
        --color-text:           #E4E0D8;
        --color-text-muted:     #ABA597;
        --color-text-subtle:    #A29C8F;
        --console-scrim:        rgba(0, 0, 0, .5);
    }
}