/* ==========================================================================
   CreatesOnline — unified monochrome design tokens
   Single source of truth for color. Black & white scheme with automatic
   dark/light mode (system default via prefers-color-scheme, overridable by
   the [data-theme] attribute set from the theme toggle cookie).
   Loaded LAST so these definitions win over legacy per-file :root blocks.
   ========================================================================== */

:root {
  /* Surfaces (light values; flip in dark mode) */
  --bg:            #ffffff;
  --surface:       #f7f7f8;
  --surface-2:     #ededf0;
  --surface-3:     #e4e4e7;

  /* Foreground / text */
  --fg:            #18181b;
  --fg-muted:      #52525b;
  --fg-subtle:     #8a8a94;

  /* Lines */
  --border:        #e4e4e7;
  --border-strong: #d4d4d8;

  /* Accent = monochrome (black in light, white in dark) */
  --accent:        #18181b;
  --accent-hover:  #3f3f46;
  --accent-fg:     #ffffff;

  /* Brand blue — active nav + primary actions (theme-independent) */
  --brand-blue:      #2563ff;
  --brand-blue-hover:#1d4ed8;
  --brand-blue-fg:   #ffffff;
  --brand-blue-soft: rgba(37, 99, 255, 0.12);

  /* Semantic (kept, muted — a B&W UI still needs status signals) */
  --danger:        #dc2626;
  --danger-bg:     #fef2f2;
  --success:       #16a34a;
  --success-bg:    #f0fdf4;
  --warning:       #b45309;
  --warning-bg:    #fffbeb;

  --shadow:        rgba(0, 0, 0, 0.08);
  --shadow-lg:     rgba(0, 0, 0, 0.12);

  /* ---- Legacy --strapi-* remap so existing CSS/templates auto-theme ---- */
  --strapi-primary:        var(--accent);
  --strapi-primary-dark:   var(--accent-hover);
  --strapi-primary-light:  var(--surface-2);
  --strapi-secondary:      var(--accent);
  --strapi-neutral-0:      var(--bg);
  --strapi-neutral-100:    var(--surface);
  --strapi-neutral-150:    var(--surface-2);
  --strapi-neutral-200:    var(--border);
  --strapi-neutral-300:    var(--border-strong);
  --strapi-neutral-400:    var(--fg-subtle);
  --strapi-neutral-500:    var(--fg-subtle);
  --strapi-neutral-600:    var(--fg-muted);
  --strapi-neutral-700:    var(--fg-muted);
  --strapi-neutral-800:    var(--fg);
  --strapi-neutral-900:    var(--fg);
  --strapi-danger:         var(--danger);
  --strapi-success:        var(--success);
  --strapi-warning:        var(--warning);
}

/* Dark values, shared by the media-query default and the explicit attribute */
:root[data-theme="dark"],
:root.theme-dark {
  --bg:            #0b0b0d;
  --surface:       #161619;
  --surface-2:     #212126;
  --surface-3:     #2a2a30;
  --fg:            #f4f4f5;
  --fg-muted:      #a1a1aa;
  --fg-subtle:     #71717a;
  --border:        #27272a;
  --border-strong: #3f3f46;
  --accent:        #f4f4f5;
  --accent-hover:  #d4d4d8;
  --accent-fg:     #0b0b0d;
  --danger:        #f87171;
  --danger-bg:     #2a1416;
  --success:       #4ade80;
  --success-bg:    #0f2417;
  --warning:       #fbbf24;
  --warning-bg:    #2a2113;
  --shadow:        rgba(0, 0, 0, 0.5);
  --shadow-lg:     rgba(0, 0, 0, 0.65);
}

/* System preference when the user hasn't explicitly chosen light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:            #0b0b0d;
    --surface:       #161619;
    --surface-2:     #212126;
    --surface-3:     #2a2a30;
    --fg:            #f4f4f5;
    --fg-muted:      #a1a1aa;
    --fg-subtle:     #71717a;
    --border:        #27272a;
    --border-strong: #3f3f46;
    --accent:        #f4f4f5;
    --accent-hover:  #d4d4d8;
    --accent-fg:     #0b0b0d;
    --danger:        #f87171;
    --danger-bg:     #2a1416;
    --success:       #4ade80;
    --success-bg:    #0f2417;
    --warning:       #fbbf24;
    --warning-bg:    #2a2113;
    --shadow:        rgba(0, 0, 0, 0.5);
    --shadow-lg:     rgba(0, 0, 0, 0.65);
  }
}

/* Base element defaults so unstyled surfaces still follow the theme */
html, body { background-color: var(--bg); color: var(--fg); }
body { transition: background-color .15s ease, color .15s ease; }

/* Native <select> dropdown options must be readable in dark mode
   (default option popup is white → white text becomes invisible). */
select option,
select optgroup { background-color: var(--surface); color: var(--fg); }

/* Floating theme toggle shared across every surface */
.theme-toggle {
  position: fixed; bottom: 18px; right: 18px; z-index: 9999;
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border-strong);
  box-shadow: 0 2px 10px var(--shadow);
  cursor: pointer; font-size: 18px; line-height: 1;
  transition: transform .12s ease, background .15s ease;
}
.theme-toggle:hover { transform: scale(1.06); background: var(--surface-2); }

/* ── Brand logo: automatic light / dark switching ──────────────────────── */
/* Wrap two <img>s in <span class="brand-logo">; assign .brand-logo__light  */
/* and .brand-logo__dark — the correct one shows automatically.             */
.brand-logo { display: inline-flex; line-height: 0; }
.brand-logo__light { display: block; }
.brand-logo__dark  { display: none;  }

[data-theme="dark"]  .brand-logo__light { display: none;  }
[data-theme="dark"]  .brand-logo__dark  { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .brand-logo__light { display: none;  }
  :root:not([data-theme="light"]) .brand-logo__dark  { display: block; }
}

/* ── Sidebar: collapsed vs expanded logo + footer theme toggle ──────────── */
.sidebar-logo-wordmark { display: flex; align-items: center; }
.sidebar-logo-icon     { display: none; align-items: center; justify-content: center; }
.sidebar.collapsed .sidebar-logo-wordmark { display: none; }
.sidebar.collapsed .sidebar-logo-icon     { display: flex; }
.sidebar-logo a { text-decoration: none; line-height: 0; }

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  flex-shrink: 0;
}
.sidebar-theme-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; width: 100%;
  background: none; border: none; border-radius: 8px;
  cursor: pointer; font-size: 13px; font-weight: 500;
  transition: background .15s, color .15s;
  text-align: left; color: inherit; opacity: .6;
}
.sidebar-theme-btn:hover { opacity: 1; background: rgba(255, 255, 255, 0.08); }
.sidebar-theme-icon { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.sidebar.collapsed .sidebar-theme-btn  { justify-content: center; padding: 9px; }
.sidebar.collapsed .sidebar-theme-label { display: none; }