/* ══════════════════════════════════════════════════════════════
   SKIN SYSTEM — CSS custom properties per theme
   Consumed by main.css via var(--*)
   ══════════════════════════════════════════════════════════════ */

/* ── Google Classroom (default) ────────────────────────────── */
[data-skin="classroom"] {
  /* Header — white, like the real Classroom */
  --header-bg:                  #ffffff;
  --header-text:                #202124;
  --header-border:              #e0e0e0;
  --header-search-bg:           #f1f3f4;
  --header-search-focus-bg:     #ffffff;
  --header-search-border:       #f1f3f4;
  --header-search-text:         #202124;
  --header-search-placeholder:  #5f6368;
  --header-shadow:              0 1px 3px rgba(0,0,0,.12);

  /* Skin switcher (on white bg, needs dark styling) */
  --switcher-bg:                rgba(0,0,0,0.06);
  --switcher-inactive:          #5f6368;
  --switcher-active-bg:         rgba(0,0,0,0.12);
  --switcher-active-text:       #202124;

  /* Sidebar */
  --sidebar-bg:                 #ffffff;
  --sidebar-text:               #444746;
  --sidebar-hover-bg:           rgba(0,0,0,0.04);
  --sidebar-active-bg:          #e8f0fe;
  --sidebar-active-text:        #1967d2;
  --sidebar-active-bar:         #1967d2;
  --sidebar-label-color:        #202124;
  --sidebar-border:             #e8eaed;

  /* Content */
  --body-bg:                    #f0f4f8;
  --card-bg:                    #ffffff;
  --card-border:                #e0e0e0;
  --card-shadow:                0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --card-shadow-hover:          0 4px 12px rgba(0,0,0,.12), 0 2px 6px rgba(0,0,0,.08);

  --accent:                     #1e8e3e;
  --accent-hover:               #166d30;
  --text-primary:               #202124;
  --text-secondary:             #5f6368;
  --text-muted:                 #9aa0a6;
  --banner-bg:                  #ffffff;
  --banner-border:              #e0e0e0;
}

/* ── Canvas LMS ─────────────────────────────────────────────── */
[data-skin="canvas"] {
  --header-bg:                  #e66000;
  --header-text:                #ffffff;
  --header-border:              transparent;
  --header-search-bg:           rgba(255, 255, 255, 0.15);
  --header-search-focus-bg:     rgba(255, 255, 255, 0.25);
  --header-search-border:       rgba(255, 255, 255, 0.3);
  --header-search-text:         #ffffff;
  --header-search-placeholder:  rgba(255,255,255,0.65);
  --header-shadow:              0 2px 6px rgba(0,0,0,.2);

  --switcher-bg:                rgba(0,0,0,0.2);
  --switcher-inactive:          rgba(255,255,255,0.65);
  --switcher-active-bg:         rgba(255,255,255,0.25);
  --switcher-active-text:       #ffffff;

  --sidebar-bg:                 #2d3b45;
  --sidebar-text:               #c7cdd1;
  --sidebar-hover-bg:           #394b55;
  --sidebar-active-bg:          #394b55;
  --sidebar-active-text:        #ffffff;
  --sidebar-active-bar:         #e66000;
  --sidebar-label-color:        #8e9ba3;
  --sidebar-border:             #3d4f5a;

  --body-bg:                    #f5f5f5;
  --card-bg:                    #ffffff;
  --card-border:                #e0e0e0;
  --card-shadow:                0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
  --card-shadow-hover:          0 4px 14px rgba(0,0,0,.14), 0 2px 6px rgba(0,0,0,.08);

  --accent:                     #e66000;
  --accent-hover:               #c45400;
  --text-primary:               #2d3b45;
  --text-secondary:             #5d6b74;
  --text-muted:                 #9aaab4;
  --banner-bg:                  #ffffff;
  --banner-border:              #e0e0e0;
}

/* ── Schoology ──────────────────────────────────────────────── */
[data-skin="schoology"] {
  --header-bg:                  #162d4c;
  --header-text:                #ffffff;
  --header-border:              transparent;
  --header-search-bg:           rgba(255, 255, 255, 0.12);
  --header-search-focus-bg:     rgba(255, 255, 255, 0.2);
  --header-search-border:       rgba(255, 255, 255, 0.25);
  --header-search-text:         #ffffff;
  --header-search-placeholder:  rgba(255,255,255,0.55);
  --header-shadow:              0 2px 6px rgba(0,0,0,.25);

  --switcher-bg:                rgba(0,0,0,0.2);
  --switcher-inactive:          rgba(255,255,255,0.6);
  --switcher-active-bg:         rgba(255,255,255,0.2);
  --switcher-active-text:       #ffffff;

  --sidebar-bg:                 #1d3a5f;
  --sidebar-text:               #a8bac8;
  --sidebar-hover-bg:           #254a7a;
  --sidebar-active-bg:          #254a7a;
  --sidebar-active-text:        #ffffff;
  --sidebar-active-bar:         #0770b8;
  --sidebar-label-color:        #6a869a;
  --sidebar-border:             #254060;

  --body-bg:                    #f0f2f5;
  --card-bg:                    #ffffff;
  --card-border:                #dce3eb;
  --card-shadow:                0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --card-shadow-hover:          0 4px 14px rgba(22,45,76,.15), 0 2px 6px rgba(0,0,0,.07);

  --accent:                     #0770b8;
  --accent-hover:               #055f9e;
  --text-primary:               #162d4c;
  --text-secondary:             #4d6275;
  --text-muted:                 #8a9db0;
  --banner-bg:                  #ffffff;
  --banner-border:              #dce3eb;
}