/* create.ax — App Shell Design System
 *
 * These variables control the application chrome (toolbar, sidebar, agent panel,
 * titlebar, window frame). They are INDEPENDENT of brand/collection themes.
 * Content (slides, documents) uses --sf-* from brand CSS.
 *
 * Prefix: --cx-  (create.ax)
 * Prepared for: Web + future Tauri desktop
 */

:root {
  /* ── Surface layers (warm dark, never pure black) ── */
  --cx-bg-deep:       #0c0c0e;
  --cx-bg:            #131316;
  --cx-bg-elevated:   #1a1a1f;
  --cx-bg-surface:    #212127;
  --cx-bg-hover:      #28282f;

  /* ── Borders ── */
  --cx-border:        #2a2a32;
  --cx-border-subtle: #1e1e24;
  --cx-border-hover:  #3a3a44;

  /* ── Text ── */
  --cx-text:          #e8e8ec;
  --cx-text-secondary:#9d9da8;
  --cx-text-muted:    #6b6b78;

  /* ── Accent (gold) ── */
  --cx-accent:        #f6c944;
  --cx-accent-dim:    #c9a236;
  --cx-accent-bg:     rgba(246, 201, 68, 0.08);
  --cx-accent-border: rgba(246, 201, 68, 0.22);
  --cx-accent-glow:   rgba(246, 201, 68, 0.04);

  /* ── Semantic colors ── */
  --cx-green:         #34d399;
  --cx-green-bg:      rgba(52, 211, 153, 0.08);
  --cx-green-border:  rgba(52, 211, 153, 0.22);
  --cx-blue:          #60a5fa;
  --cx-blue-bg:       rgba(96, 165, 250, 0.08);
  --cx-red:           #f87171;
  --cx-red-bg:        rgba(248, 113, 113, 0.08);

  /* ── Typography ── */
  --cx-font-display:  'Plus Jakarta Sans', system-ui, sans-serif;
  --cx-font-body:     'IBM Plex Sans', system-ui, sans-serif;
  --cx-font-mono:     'JetBrains Mono', monospace;

  /* ── Radius ── */
  --cx-radius:        10px;
  --cx-radius-sm:     6px;
  --cx-radius-md:     10px;
  --cx-radius-lg:     14px;
  --cx-radius-xl:     18px;

  /* ── Window chrome (Tauri prep) ── */
  --cx-window-radius: 10px;
  --cx-titlebar-h:    38px;
  --cx-toolbar-h:     44px;

  /* ── Bridge aliases ──
     Pages that only show app chrome (dashboard, login) can use --sf-* names
     and resolve to app palette. Brand CSS overrides these for content pages. */
  --sf-bg:              var(--cx-bg);
  --sf-bg-card:         var(--cx-bg-elevated);
  --sf-bg-card-hover:   var(--cx-bg-hover);
  --sf-text:            var(--cx-text);
  --sf-text-secondary:  var(--cx-text-secondary);
  --sf-text-muted:      var(--cx-text-muted);
  --sf-accent:          var(--cx-accent);
  --sf-accent-bg:       var(--cx-accent-bg);
  --sf-accent-border:   var(--cx-accent-border);
  --sf-border:          var(--cx-border);
  --sf-border-hover:    var(--cx-border-hover);
  --sf-font-display:    var(--cx-font-display);
  --sf-font-body:       var(--cx-font-body);
  --sf-font-mono:       var(--cx-font-mono);
  --sf-card-radius:     var(--cx-radius);
  --sf-green:           var(--cx-green);
  --sf-blue:            var(--cx-blue);
  --sf-red:             var(--cx-red);
}

/* ════════════════════════════════════════════════════════
   WINDOW FRAME — wraps entire app
   Web: simulates floating window with rounded corners + shadow
   Tauri: body IS the window, frame is transparent
   ════════════════════════════════════════════════════════ */
.cx-frame {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  border-radius: var(--cx-window-radius);
  overflow: hidden;
  box-shadow: 0 0 0 1px var(--cx-border-subtle), 0 20px 60px rgba(0, 0, 0, 0.5);
  margin: 8px;
}

/* Tauri: no margin/shadow, OS handles window chrome */
body.cx-tauri .cx-frame {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* Web mode: full viewport, no desktop simulation */
body.cx-web .cx-frame {
  margin: 0;
  border-radius: 0;
  box-shadow: none;
}

/* ════════════════════════════════════════════════════════
   TITLE BAR — draggable in Tauri, decorative in browser
   ════════════════════════════════════════════════════════ */
.cx-titlebar {
  display: flex;
  align-items: center;
  height: var(--cx-titlebar-h);
  background: var(--cx-bg);
  border-bottom: 1px solid var(--cx-border-subtle);
  padding: 0 12px;
  flex-shrink: 0;
  -webkit-app-region: drag;
  user-select: none;
}

/* macOS traffic lights */
.cx-titlebar .traffic-lights {
  display: flex;
  gap: 8px;
  align-items: center;
  padding-right: 14px;
  margin-right: 8px;
  border-right: 1px solid var(--cx-border-subtle);
  -webkit-app-region: no-drag;
}

.traffic-light {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  transition: opacity 0.15s;
}

.traffic-light:hover { opacity: 0.8; }
.tl-close    { background: #ff5f57; }
.tl-minimize { background: #febc2e; }
.tl-maximize { background: #28c840; }

/* Breadcrumb nav in titlebar */
.cx-titlebar-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.76rem;
  color: var(--cx-text-muted);
  -webkit-app-region: no-drag;
}

.cx-titlebar-nav button {
  background: none;
  border: none;
  color: var(--cx-text-muted);
  font-family: var(--cx-font-body);
  font-size: 0.76rem;
  cursor: pointer;
  padding: 3px 6px;
  border-radius: var(--cx-radius-sm);
  transition: all 0.12s;
}

.cx-titlebar-nav button:hover {
  color: var(--cx-text);
  background: var(--cx-bg-elevated);
}

.cx-titlebar-nav .current {
  color: var(--cx-text);
  font-weight: 600;
}

.cx-titlebar-nav .sep {
  opacity: 0.4;
  font-size: 0.65rem;
}

.cx-titlebar-spacer { flex: 1; }

/* Windows controls (hidden by default, shown via body.cx-windows) */
.cx-titlebar .win-controls {
  display: none;
  gap: 0;
  -webkit-app-region: no-drag;
}

body.cx-windows .win-controls { display: flex; }
body.cx-windows .traffic-lights { display: none; }

.win-ctrl {
  width: 46px;
  height: var(--cx-titlebar-h);
  background: none;
  border: none;
  color: var(--cx-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.1s;
}

.win-ctrl:hover { background: var(--cx-bg-hover); color: var(--cx-text); }
.win-ctrl.close:hover { background: #c42b1c; color: white; }
.win-ctrl svg { width: 10px; height: 10px; }

/* Web mode: hide titlebar entirely */
body.cx-web .cx-titlebar { display: none; }

/* ════════════════════════════════════════════════════════
   DEBUG / MODE TOGGLE
   ════════════════════════════════════════════════════════ */
.cx-mode-toggle {
  display: flex;
  align-items: center;
  gap: 5px;
  background: var(--cx-bg-elevated);
  border: 1px solid var(--cx-border);
  color: var(--cx-text-muted);
  cursor: pointer;
  font-family: var(--cx-font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: var(--cx-radius-sm);
  -webkit-app-region: no-drag;
  transition: all 0.15s;
  margin-right: 6px;
}

.cx-mode-toggle:hover {
  color: var(--cx-text);
  border-color: var(--cx-border-hover);
}

.cx-mode-toggle .dt-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cx-accent);
  transition: background 0.15s;
}

body.cx-web .cx-mode-toggle {
  position: fixed;
  top: 8px;
  right: 8px;
  z-index: 9999;
}

body.cx-web .cx-mode-toggle .dt-dot { background: var(--cx-blue); }

/* ════════════════════════════════════════════════════════
   SHARED ICON BUTTON
   ════════════════════════════════════════════════════════ */
.cx-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--cx-radius-sm);
  background: none;
  border: 1px solid transparent;
  color: var(--cx-text-muted);
  cursor: pointer;
  transition: all 0.12s;
}

.cx-icon-btn:hover {
  color: var(--cx-text);
  background: var(--cx-bg-elevated);
  border-color: var(--cx-border);
}

.cx-icon-btn.active {
  color: var(--cx-accent);
  background: var(--cx-accent-bg);
  border-color: var(--cx-accent-border);
}

.cx-icon-btn svg { width: 15px; height: 15px; }

/* ════════════════════════════════════════════════════════
   DECORATIVE CORNER DOTS
   ════════════════════════════════════════════════════════ */
.cx-dots {
  position: fixed;
  pointer-events: none;
  z-index: 0;
  opacity: 0.09;
}

.cx-dots svg { display: block; }
.cx-dots-tr { top: 12px; right: 12px; }
.cx-dots-bl { bottom: 12px; left: 12px; }
body.cx-web .cx-dots { display: none; }

/* ════════════════════════════════════════════════════════
   INSET PILL (reusable toolbar control group)
   ════════════════════════════════════════════════════════ */
.cx-pill {
  display: flex;
  align-items: center;
  gap: 3px;
  background: var(--cx-bg-deep);
  border: 1px solid var(--cx-border-subtle);
  border-radius: var(--cx-radius-lg);
  padding: 3px 4px;
}

.cx-pill-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: none;
  border: none;
  color: var(--cx-text-muted);
  cursor: pointer;
  font-family: var(--cx-font-body);
  font-size: 0.68rem;
  font-weight: 500;
  padding: 4px 8px;
  border-radius: var(--cx-radius-sm);
  transition: all 0.12s;
  white-space: nowrap;
}

.cx-pill-btn:hover { color: var(--cx-text); background: var(--cx-bg-elevated); }
.cx-pill-btn.active { color: var(--cx-accent); background: var(--cx-accent-bg); }
.cx-pill-btn svg { width: 13px; height: 13px; flex-shrink: 0; }

.cx-pill-sep {
  width: 1px;
  height: 14px;
  background: var(--cx-border);
  flex-shrink: 0;
  margin: 0 1px;
}

/* ════════════════════════════════════════════════════════
   AGENT BUTTON (toolbar)
   ════════════════════════════════════════════════════════ */
.cx-agent-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid var(--cx-border);
  color: var(--cx-text-secondary);
  cursor: pointer;
  font-family: var(--cx-font-body);
  font-size: 0.72rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: var(--cx-radius);
  transition: all 0.12s;
}

.cx-agent-btn:hover {
  color: var(--cx-text);
  border-color: var(--cx-border-hover);
  background: var(--cx-bg-elevated);
}

.cx-agent-btn.active {
  color: var(--cx-accent);
  border-color: var(--cx-accent-border);
  background: var(--cx-accent-bg);
}

.cx-agent-btn .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--cx-green);
}