/* ============================================================
   TempComm — Design Tokens (Microsoft Fluent-inspired)
   ============================================================
   Light and dark themes via CSS custom properties.
   Default: light. [data-theme="dark"] overrides for dark mode.
   system preference respected via media query when [data-theme="system"].
*/

:root {
  /* ── Light Theme (default) ────────────────────────── */
  --bg-primary:        #FFFFFF;
  --bg-secondary:      #F5F5F5;
  --bg-tertiary:       #E8E8E8;
  --bg-elevated:       #FFFFFF;

  --text-primary:      #1A1A1A;
  --text-secondary:    #616161;
  --text-tertiary:     #9E9E9E;
  --text-inverse:      #FFFFFF;

  --accent:            #0078D4;
  --accent-hover:      #106EBE;
  --accent-pressed:    #005A9E;
  --accent-light:      #E6F2FC;
  --accent-text:       #0078D4;

  --border:            #E0E0E0;
  --border-strong:     #C8C8C8;
  --divider:           #EDEDED;

  --shadow-sm:         0 1px 2px rgba(0,0,0,0.04);
  --shadow-md:         0 4px 12px rgba(0,0,0,0.08);
  --shadow-lg:         0 8px 24px rgba(0,0,0,0.12);
  --shadow-xl:         0 16px 48px rgba(0,0,0,0.16);

  --radius-sm:         4px;
  --radius-md:         8px;
  --radius-lg:         12px;
  --radius-xl:         16px;
  --radius-full:       9999px;

  --success:           #107C10;
  --success-light:     #DFF6DD;
  --warning:           #FF8C00;
  --warning-light:     #FFF4E5;
  --danger:            #D13438;
  --danger-light:      #FDE7E9;
  --info:              #0078D4;
  --info-light:        #E6F2FC;

  --online:            #33B563;
  --offline:           #BDBDBD;

  --font-family:       "Segoe UI", "Segoe UI Web", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-mono:         "Cascadia Code", "Cascadia Mono", Consolas, "Courier New", monospace;

  --font-xs:           11px;
  --font-sm:           12px;
  --font-base:         14px;
  --font-lg:           16px;
  --font-xl:           20px;
  --font-2xl:          24px;
  --font-3xl:          32px;

  --sidebar-width:     280px;
  --navbar-height:     48px;
  --statusbar-height:  32px;
  --chat-header-height: 56px;
  --input-min-height:  56px;

  --transition-fast:   100ms ease-out;
  --transition-base:   200ms ease-out;
  --transition-slow:   300ms ease-out;
  --transition-spring: 200ms cubic-bezier(0.16, 1, 0.3, 1);

  --z-sidebar:         100;
  --z-navbar:          200;
  --z-modal:           300;
  --z-toast:           400;
  --z-lightbox:        500;
}

/* ── Dark Theme ──────────────────────────────────────── */

[data-theme="dark"] {
  --bg-primary:        #1B1B1B;
  --bg-secondary:      #2D2D2D;
  --bg-tertiary:       #3D3D3D;
  --bg-elevated:       #282828;

  --text-primary:      #F5F5F5;
  --text-secondary:    #ADADAD;
  --text-tertiary:     #6E6E6E;
  --text-inverse:      #1A1A1A;

  --accent:            #60CDFF;
  --accent-hover:      #85D9FF;
  --accent-pressed:    #3DB8F0;
  --accent-light:      #1A3A4A;
  --accent-text:       #60CDFF;

  --border:            #404040;
  --border-strong:     #555555;
  --divider:           #333333;

  --shadow-sm:         0 1px 2px rgba(0,0,0,0.2);
  --shadow-md:         0 4px 12px rgba(0,0,0,0.3);
  --shadow-lg:         0 8px 24px rgba(0,0,0,0.4);
  --shadow-xl:         0 16px 48px rgba(0,0,0,0.5);

  --success:           #6CCB5F;
  --success-light:     #1D3A1A;
  --warning:           #FFB340;
  --warning-light:     #3D2E0A;
  --danger:            #E74856;
  --danger-light:      #3D1A1D;
  --info:              #60CDFF;
  --info-light:        #1A3A4A;

  --online:            #33B563;
  --offline:           #5C5C5C;
}

/* ── System preference detection ─────────────────────── */

@media (prefers-color-scheme: dark) {
  [data-theme="system"] {
    --bg-primary:        #1B1B1B;
    --bg-secondary:      #2D2D2D;
    --bg-tertiary:       #3D3D3D;
    --bg-elevated:       #282828;
    --text-primary:      #F5F5F5;
    --text-secondary:    #ADADAD;
    --text-tertiary:     #6E6E6E;
    --text-inverse:      #1A1A1A;
    --accent:            #60CDFF;
    --accent-hover:      #85D9FF;
    --accent-pressed:    #3DB8F0;
    --accent-light:      #1A3A4A;
    --accent-text:       #60CDFF;
    --border:            #404040;
    --border-strong:     #555555;
    --divider:           #333333;
    --shadow-sm:         0 1px 2px rgba(0,0,0,0.2);
    --shadow-md:         0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg:         0 8px 24px rgba(0,0,0,0.4);
    --shadow-xl:         0 16px 48px rgba(0,0,0,0.5);
    --success:           #6CCB5F;
    --success-light:     #1D3A1A;
    --warning:           #FFB340;
    --warning-light:     #3D2E0A;
    --danger:            #E74856;
    --danger-light:      #3D1A1D;
    --info:              #60CDFF;
    --info-light:        #1A3A4A;
    --online:            #33B563;
    --offline:           #5C5C5C;
  }
}