/* ── Inkwell Editorial Desk palette ─────────────────────────── */
:root {
    --background:                 #FAF7F2;  /* ink-cream */
    --foreground:                 #1A1A1A;  /* ink-black */
    --card:                       #FFFDF9;  /* lifted off the cream page so surfaces separate */
    --card-foreground:            #1A1A1A;
    --popover:                    #FAF7F2;
    --popover-foreground:         #1A1A1A;
    --primary:                    #1A1A1A;  /* ink-black — Compose button bg */
    --primary-foreground:         #FAF7F2;  /* cream — Compose button text */
    --secondary:                  #F4EFE6;  /* surface */
    --secondary-foreground:       #1A1A1A;
    --muted:                      #EFE9DC;  /* surface-2 */
    --muted-foreground:           #8B7355;  /* ink-sepia */
    --accent:                     #E8E1D3;  /* cream-edge — hover bg */
    --accent-foreground:          #1A1A1A;
    --destructive:                #8C2A1F;  /* burgundy */
    --destructive-foreground:     #FAF7F2;
    --border:                     #E8E1D3;
    --input:                      #E8E1D3;
    --ring:                       #1A1A1A;
    --sidebar:                    #F4EFE6;  /* slightly off-cream sidebar */
    --sidebar-foreground:         #1A1A1A;
    --sidebar-primary:            #1A1A1A;  /* active nav bg */
    --sidebar-primary-foreground: #FAF7F2;
    --sidebar-accent:             #EFE9DC;  /* hover bg */
    --sidebar-accent-foreground:  #1A1A1A;
    --sidebar-border:             #E8E1D3;
    --sidebar-ring:               #1A1A1A;
    /* One radius token; the compiled Tailwind scale derives rounded-sm/md/lg/xl from it (tailwind.desk.config.js). */
    --radius:                     8px;
    /* One card shadow and one popover shadow, used through shadow-card / shadow-pop. */
    --shadow-card:                0 1px 2px rgba(26, 26, 26, .04), 0 1px 3px rgba(26, 26, 26, .06);
    --shadow-pop:                 0 4px 6px -1px rgba(26, 26, 26, .08), 0 10px 24px -8px rgba(26, 26, 26, .18);
    /* Chart palette (Analytics). Read from script with getPropertyValue so charts follow the scheme. */
    --chart-1: #1A1A1A; --chart-2: #8B7355; --chart-3: #2D6A4F; --chart-4: #C4632B;
    --chart-5: #2F5D8A; --chart-6: #8C2A1F; --chart-7: #6B5B95; --chart-8: #B49A78;
}

body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: 'Geist', 'Inter', system-ui, sans-serif;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }

/* ── Dark scheme (Settings → Colour scheme: system follows the OS; dark forces it) ── */
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        color-scheme: dark;
        --background: #16140F; --foreground: #F4EFE6;
        --card: #1E1B16; --card-foreground: #F4EFE6;
        --popover: #1E1B16; --popover-foreground: #F4EFE6;
        --primary: #F4EFE6; --primary-foreground: #16140F;
        --secondary: #26221C; --secondary-foreground: #F4EFE6;
        --muted: #26221C; --muted-foreground: #B49A78;
        --accent: #332E26; --accent-foreground: #F4EFE6;
        --destructive: #E06B5E; --destructive-foreground: #16140F;
        --border: #332E26; --input: #332E26; --ring: #F4EFE6;
        --sidebar: #1A1712; --sidebar-foreground: #F4EFE6;
        --sidebar-primary: #F4EFE6; --sidebar-primary-foreground: #16140F;
        --sidebar-accent: #26221C; --sidebar-accent-foreground: #F4EFE6;
        --sidebar-border: #332E26; --sidebar-ring: #F4EFE6;
        --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .25);
        --shadow-pop: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 10px 24px -8px rgba(0, 0, 0, .6);
        --chart-1: #F4EFE6; --chart-2: #B49A78; --chart-3: #7CCB9B; --chart-4: #E9A94A;
        --chart-5: #8DBDF0; --chart-6: #E06B5E; --chart-7: #B39DDB; --chart-8: #8B7355;
    }
}
html[data-theme="dark"] {
    color-scheme: dark;
    --background: #16140F; --foreground: #F4EFE6;
    --card: #1E1B16; --card-foreground: #F4EFE6;
    --popover: #1E1B16; --popover-foreground: #F4EFE6;
    --primary: #F4EFE6; --primary-foreground: #16140F;
    --secondary: #26221C; --secondary-foreground: #F4EFE6;
    --muted: #26221C; --muted-foreground: #B49A78;
    --accent: #332E26; --accent-foreground: #F4EFE6;
    --destructive: #E06B5E; --destructive-foreground: #16140F;
    --border: #332E26; --input: #332E26; --ring: #F4EFE6;
    --sidebar: #1A1712; --sidebar-foreground: #F4EFE6;
    --sidebar-primary: #F4EFE6; --sidebar-primary-foreground: #16140F;
    --sidebar-accent: #26221C; --sidebar-accent-foreground: #F4EFE6;
    --sidebar-border: #332E26; --sidebar-ring: #F4EFE6;
    --shadow-card: 0 1px 2px rgba(0, 0, 0, .3), 0 1px 3px rgba(0, 0, 0, .25);
    --shadow-pop: 0 4px 6px -1px rgba(0, 0, 0, .4), 0 10px 24px -8px rgba(0, 0, 0, .6);
    --chart-1: #F4EFE6; --chart-2: #B49A78; --chart-3: #7CCB9B; --chart-4: #E9A94A;
    --chart-5: #8DBDF0; --chart-6: #E06B5E; --chart-7: #B39DDB; --chart-8: #8B7355;
}