/* ─── Light theme  ─────── */
:root {
  /* Base tokens — exact values from style guide */
  --card:                        #fcfcfc;
  --ring:                        #644a40;
  --input:                       #d8d8d8;
  --muted:                       #efefef;
  --border:                      #d8d8d8;
  --radius:                      0.5rem;
  --popover:                     #fcfcfc;
  --primary:                     #644a40;
  --sidebar:                     #fbfbfb;
  --secondary:                   #ffdfb5;
  --background:                  #f9f9f9;
  --foreground:                  #202020;
  --destructive:                 #e54d2e;
  --sidebar-ring:                #b5b5b5;
  --sidebar-accent:              #f7f7f7;
  --sidebar-border:              #ebebeb;
  --card-foreground:             #202020;
  --sidebar-primary:             #343434;
  --muted-foreground:            #646464;
  --accent-foreground:           #202020;
  --popover-foreground:          #202020;
  --primary-foreground:          #ffffff;
  --sidebar-foreground:          #252525;
  --secondary-foreground:        #582d1d;
  --destructive-foreground:      #ffffff;
  --sidebar-accent-foreground:   #343434;
  --sidebar-primary-foreground:  #fbfbfb;

  /* Charts */
  --chart-1: #644a40;
  --chart-2: #ffdfb5;
  --chart-3: #e8e8e8;
  --chart-4: #ffe6c4;
  --chart-5: #66493e;

  /* Typography */
  --font-sans: 'Inter', 'Noto Sans', system-ui, sans-serif;
  --font-serif: 'Noto Serif', Georgia, serif;
  --font-mono: 'JetBrains Mono', 'DM Mono', monospace;
  --letter-spacing: 0.5px;

  /* Shadows */
  --shadow-color:    #000000;
  --shadow-opacity:  0.04;
  --shadow-offset-x: 1px;
  --shadow-offset-y: 2px;
  --shadow-blur:     8px;
  --shadow-spread:   0px;
  --spacing:         0.25rem;

  /* ── App-specific aliases used by templates ───────────────────────────── */
  --bg:         #f9f9f9;   /* page background  */
  --bg2:        #fcfcfc;   /* cards / panels   */
  --bg3:        #efefef;   /* inputs / inset   */
  --bg4:        #e4e0db;   /* hover states     */
  --sidebar-bg: #fbfbfb;

  --text:  #202020;
  --text2: #646464;
  --text3: #9a9a9a;

  --border2: #c4c0ba;

  /* --accent is used throughout templates for icons, active nav, badges */
  --accent:  #644a40;   /* primary brown-terracotta */

  /* Semantic colours */
  --gold:   #c49a28;    /* warm amber — readable on light bg */
  --green:  #3d7a52;    /* success / WS live dot */
  --red:    #e54d2e;    /* destructive / errors */
  --purple: #7a5c8a;    /* avatar background */
}

/* ─── Dark theme ──────── */
.dark {
  --card:                        #191919;
  --ring:                        #ffe0c2;
  --input:                       #484848;
  --muted:                       #222222;
  --border:                      #201e18;
  --radius:                      0.5rem;
  --popover:                     #191919;
  --primary:                     #ffe0c2;
  --sidebar:                     #18181b;
  --secondary:                   #393028;
  --background:                  #111111;
  --foreground:                  #eeeeee;
  --destructive:                 #e54d2e;
  --sidebar-ring:                #d4d4d8;
  --sidebar-accent:              #27272a;
  --sidebar-border:              #27272a;
  --card-foreground:             #eeeeee;
  --sidebar-primary:             #1d4ed8;
  --muted-foreground:            #b4b4b4;
  --accent-foreground:           #eeeeee;
  --popover-foreground:          #eeeeee;
  --primary-foreground:          #081a1b;
  --sidebar-foreground:          #f4f4f5;
  --secondary-foreground:        #ffe0c2;
  --destructive-foreground:      #ffffff;
  --sidebar-accent-foreground:   #f4f4f5;
  --sidebar-primary-foreground:  #ffffff;

  --chart-1: #ffe0c2;
  --chart-2: #393028;
  --chart-3: #2a2a2a;
  --chart-4: #42382e;
  --chart-5: #ffe0c1;

  --bg:         #111111;
  --bg2:        #191919;
  --bg3:        #222222;
  --bg4:        #2a2a2a;
  --sidebar-bg: #18181b;

  --text:  #eeeeee;
  --text2: #b4b4b4;
  --text3: #707070;

  --border2: #3a3830;

  --accent: #ffe0c2;

  --gold:   #ffe0c2;
  --green:  #8ab88a;
  --red:    #e54d2e;
  --purple: #b0a0c0;
}

/* ─── Tailwind v4 @theme bridge (no-op in v3 CDN, harmless) ─────────────── */
@theme inline {
  --color-card:                        var(--card);
  --color-ring:                        var(--ring);
  --color-input:                       var(--input);
  --color-muted:                       var(--muted);
  --color-accent:                      var(--accent);
  --color-border:                      var(--border);
  --color-radius:                      var(--radius);
  --color-chart-1:                     var(--chart-1);
  --color-chart-2:                     var(--chart-2);
  --color-chart-3:                     var(--chart-3);
  --color-chart-4:                     var(--chart-4);
  --color-chart-5:                     var(--chart-5);
  --color-popover:                     var(--popover);
  --color-primary:                     var(--primary);
  --color-sidebar:                     var(--sidebar);
  --color-secondary:                   var(--secondary);
  --color-background:                  var(--background);
  --color-foreground:                  var(--foreground);
  --color-destructive:                 var(--destructive);
  --color-sidebar-ring:                var(--sidebar-ring);
  --color-sidebar-accent:              var(--sidebar-accent);
  --color-sidebar-border:              var(--sidebar-border);
  --color-card-foreground:             var(--card-foreground);
  --color-sidebar-primary:             var(--sidebar-primary);
  --color-muted-foreground:            var(--muted-foreground);
  --color-accent-foreground:           var(--accent-foreground);
  --color-popover-foreground:          var(--popover-foreground);
  --color-primary-foreground:          var(--primary-foreground);
  --color-sidebar-foreground:          var(--sidebar-foreground);
  --color-secondary-foreground:        var(--secondary-foreground);
  --color-destructive-foreground:      var(--destructive-foreground);
  --color-sidebar-accent-foreground:   var(--sidebar-accent-foreground);
  --color-sidebar-primary-foreground:  var(--sidebar-primary-foreground);

}
.author-a { background: #F87171; } /* red */
.author-b { background: #FB923C; } /* orange */
.author-c { background: #FBBF24; } /* amber */
.author-d { background: #A3E635; } /* lime */
.author-e { background: #34D399; } /* green */
.author-f { background: #2DD4BF; } /* teal */
.author-g { background: #22D3EE; } /* cyan */
.author-h { background: #60A5FA; } /* blue */
.author-i { background: #818CF8; } /* indigo */
.author-j { background: #A78BFA; } /* violet */
.author-k { background: #C084FC; } /* purple */
.author-l { background: #E879F9; } /* fuchsia */
.author-m { background: #F472B6; } /* pink */
.author-n { background: #FB7185; } /* rose */
.author-o { background: #94A3B8; } /* slate */
.author-p { background: #64748B; } /* gray-blue */
.author-q { background: #38BDF8; } /* sky */
.author-r { background: #4ADE80; } /* emerald */
.author-s { background: #FACC15; } /* yellow */
.author-t { background: #FB7185; } /* rose-red */
.author-u { background: #34D399; } /* green-alt */
.author-v { background: #60A5FA; } /* blue-alt */
.author-w { background: #A78BFA; } /* violet-alt */
.author-x { background: #F472B6; } /* pink-alt */
.author-y { background: #FBBF24; } /* amber-alt */
.author-z { background: #22C55E; } /* green-dark */